27/01/2024, 07:07 WDD 230 Home 12 13 14 Overview 1 WDD 230 | L03 | Home Page Enhancement 2 3 4 5 L03: Home Page Enhancement 6 7 8 9

Demonstrate your understanding of the learning activities by applying the concepts to your course home page. You will work with your group to apply the following specifications to your course home page. 10 11 Instructions 1. Apply a responsive = hamburger menu to your existing menu on your course home page using JavaScript. The hamburger button should only show in the mobile view. Clicking the hamburger button toggles the main menu items from viewable to not viewable. Use a symbol, such as an 'X', to close the hamburger menu. 2. Apply a CSS pseudo-element in your base.css file of your choice. The application is up to you. For example, it may be to support wayfinding notation on the menu, responsive navigation display, or list item markings, etc. Emoticons can be accessed by your operating system's emoji keyboard. On Windows, press the Windows key and. (period) key at the same time. On Mac, press Command and Control and Spacebar at the same time. 3. Make sure that any images used on your home page do not violate their intrinsic aspect ratio in any view. Note this accessibility concept for future page testing. ► Example Screenshots An example of contrast ratio issues can be found in this example: Image Aspect Ratio 4. Embed a Google Map of your home town/area by placing the provided