Final Part A - Common Page Elements

Overview

In this module, we will begin the final project for the class using everything we have learned so far. Pick a topic that is NOT fast food. You wil be building a 4 page website and style everything using tailwindcss.

Objectives

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

• Pick a topic for this 4 page website (not fast food)
• Build a logo for your chosen topic [unit1]
• From that logo, build a fav icon [unit1]
• Build a responsive header [unit1]
• Build a responsive navigation with wayfinding [unit3]
• Build a consistent footer using modules [unit3]
• Identify and implement an appropiate color scheme and font family for your site [unit7]

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 open navigation
• View the medium screen version
• View the large screen version

Assignment Checklist

Final Part A - Common Page Elements (10 pts)

Overview

As you design you final project, consider the following requirements for the site

• Pick a color scheme and include a series of grey colors
• Override the default tailwind colors using your color scheme
• Pick a google font that works with your design. Extend tailwind to include your new fontfamily
• Build a pixel density logo 50px to 75px with 1x, 2x, 3x versions (File>Automate>Generator Plugins > Image Assets)
• Build and implement a fav icon

header of all 4 pages

The head tag should contain the following

• Link to a favorite icon
• Link to a stylesheet
• Link to appropiate google fonts
• Include a viewport meta tag
• Include a page title

Header

The header tag should contain the following

• Build the page header with a logo, company name and navigation (hamburger for small and menu items for larger)
• Hamburger is an inline SVG styled with tailwind
• Extend screens “small” so the break point works with the header navigation items
• Style the anchors in the nav bar using @apply
• Wrap the header in a division and set the max width and margin to auto

Navigation

The navigation should contain the following

• Responsive Nav bar with hamburger links to (Home, Products, Order, Profile)
• Build the navigation in the html of the page using a nav tag
• Give the nav tag an id to be used by JS for showing and hiding the menu items
• Build a JS that uses querySelector to add or remove a tailwind “hidden” class on the navigation items
• Insure that for smallest screens the class of “hidden” is applied to the nav items
• Style anchors inside the nav tag giving each a class of 'navLink'
• Style the navLink class using @apply in the input.css file with tailwind classes
• Add a custom tailwind class to the active menu item to implement wayfinding
• Ensure that wayfinding is working in your navigation
• On larger screens, display the navigation in the header aligned to the right

Footer

The footer tag should contain the following

• Use JS modules to dynamically add a section for 4 social media icons built from SVG's
• Use JS Modules to add a second section containing the copyright statement
• Use template literals to include a dynamic copyright year
• All styling is done in the JS using tailwind classes and className=
• Add mjs to the list of files being checked by tailwind config

Individual Pages

Build 4 individual pages which contain the following

• Use an h1 tag for the page title and style it using @apply for consistency
• Build four pages with page titles

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