Use the code below to improve upon your lesson 4 (which should be a 'save as' of lesson 3 after you have finished it).
The script below is added to the head of the lesson 4, and the html tags should be used in the body (maybe inside the divs: LeftSideBox and RightSideBox.

add to 'head tag' of lesson 4 html

<script type="text/javascript">
    function newSize(img, height, width) {
        img.height = height;
        img.width = width;
    }
    function oldSize(img, height, width) {
        img.height = height;
        img.width = width;
    }
    function colorChange() {
        var r=Math.round(100*Math.random()), g=Math.round(100*Math.random()), b=Math.round(100*Math.random())
        var newColor='#'+r+g+b
        document.getElementById("newRGB").innerHTML=newColor
        document.getElementById("ColorText").style.color=newColor
    }
</script>   
            

add to 'body tag' of lesson 4 html

below is an example of one of the images in a div

    <img src="boarding.JPG" height="40px" width="40px" onMouseOver="newSize(this,400,400)" onMouseOut="oldSize(this,40,40)"/><br>
    
and below is for the other side div

    <button onClick="colorChange()" name="Change My Text Color">Change Text Color</button>
    <span id="ColorText">
    <ul>
        <li>Here are links to my favorite place to stay in Whistler: <a>Hotels</a></li>
        <li>Here are links to my favorite place to eat in Whistler: <a>Dine</a></li>
    </ul>
    <p>Color of text is <span id="newRGB"></span></p>
    </span>