WDD 230 - Web Frontend Development I

L03: Home Page Enhancement

Overview

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.

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.
   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 <iframe> map at the bottom of the page before the footer. Note the dimensional size of the map.

Example Screenshots

Testing

1. Practice good design and development.
   • Course Development Standards checklist

     🛠️Use this page audit tool to help.

   • Color Contrast: Test the color contrasts used on the page. The page must pass contrast levels at the AA level.

     🛠️Use DevTools -> CSS Overview

2. Verify that your page is rendered on your wdd230 GitHub Pages enabled site.

Submission

1. Commit your local repository and push your work to your wdd230 GitHub Pages enabled repository.
2. Submit your home page URL in I-Learn.