Unit03 Modules

Overview

In this module, you will use JavaScript Modules to automate the building of the header, navigation, and footer. (These are like framework components)

Objectives

At the end of this module, you should be able to...

• Build a 4-page website using JS modules to dynamically build the header, footer and navigation.
• The navigation items are built from a JSON file and is also responsive using tailwind classes.
• Implement CSS trickery to automate Wayfinding.

AI Assist

Use AI to ...

PROMPT: Please build me a JSON file with four navigation links to home, products, store and profile. Include HREF for each one

Tasks

• Reference for Navigation
• Reference for Justification
• Reference for mouse hover state
• Reference for hidden

Watch

• Building the Assignment
• Watch 2620_01a Video
• Watch 2620_01b Video
• Watch 2620_01c Video

Assignment Example

• View the small screen version
• View the small screen with nav links
• View the medium screen version
• View the large screen version

Assignment Checklist

Unit03 Modules (10 pts)

html head tag

The head tag should contain the following

• Link to a favorite icon
• script cdn link to tailwind
• viewport meta tag
• page title

Header

The header tag should contain the following

• Styling done using only Tailwind classes
• SVG Logo built in a tool like Adobe Illustrator
• SVG icon representing the account
• SVG icon representing the shopping cart
• Displayed to match the proivided assignment examples

Modules

The page should be dynamically build using JavaScript modules

• The site should contain a modules folder with three relevant .mjs files
• The header should be dynamically built and inserted into the head tag on all four pages
• The navigation should be dynamically built and inserted into the nav tag on all four pages
• The footer should be dynamically built and inserted into the footer tag on all four pages

Navigation

The navigation tag should contain the following

• json formatted file containing the navigation link names and href
• Styling done using only Tailwind classes
• Four links to four different pages
• Wayfinding evident to match the page title
• Hover color change using tailwind hover classes
• Hamburger navigation used on small screens and horizontal navigation on larger screens.

Main

The main tag should contain the following

• Styling done using only Tailwind classes
• An h1 tag page title for each of the four page

Footer

The footer tag should contain the following

• Styling done using only Tailwind classes
• A copyright entity
• Student's name
• Dynamic current year using JS
• Class Name

Design Principle Requirements

Your page needs to meet these requirements

• Passes the HTML W3C HTML validator
• Passes the WAVE Accessibility test with no contrast errors
• Does not contain any Visual Tangent errors (items touching the screen edge)
• Page is responsive from 320px to 1600px
• Page does not have horizontal scrolling at any page width

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail