Module Project:

This project allows you to practice the concepts and techniques learned in today's lecture: implenting semantic HTML and getting comfortable with CSS.

Expectations

Commit your code regularly and meaningfully. Check out this guide on how to make meaningful commits.

In your solution, it is essential that you follow best practices and produce clean and professional results. Schedule time to review, refine, and assess your work. Perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a Module Project that meets MVP than one that attempts too much and does not.

Description

In this project, you will complete the HTML and CSS for a basic static web page for Sweet Eats Bakery. All of the text values have been provided in the HTML; you must create the structure of the page using semantic tags. Remember that semantic markup provides meaning. Here are a few tags you could consider using:

h1 through h6
p
header
footer
nav
a
section
address

Once you've completed the basic structure with HTML, you'll need to add some more style! Much of the stylesheet has already been completed, but there are comments where you'll need to fill in the blanks. Use MDN and other resources to look up specific style properties and selectors.

Project Set Up

1. Fork the repository, then clone from your fork.
2. Go into Canvas and connect your repo to CodeGrade.
3. DO NOT CREATE A BRANCH. You will be pushing your changes to the main/master today.
4. cd into your repository on the command line and use code . to open VS Code.
5. Open the terminal in VSC and type npm install. While this runs, click the split terminal icon.
6. Next type npm run test in one side, and use the other side for git commands or general use.
7. Download the Live Server extension from the Extensions tab on the left side of your VS Code. After it is done installing, click "Go Live" on the bottom right side of your screen to run your HTML file.
8. Complete your work making regular commits to the main branch; your CodeGrade score will update each time you make a push.

Minimum Viable Product

Your finished project must include all of the following requirements:

Semantic HTML and CSS Fill-in-the-Blanks

Review the provided design file for the menu page.

• Create the HTML structure using semantic tags
• Fill in the blanks in the CSS

Stretch Tasks

Only attempt these tasks after you've successfully reached MVP. Create a branch, do not do stretch in the same branch for HTML/CSS projects.

• Fork your final work and see how much you can change the design without changing the HTML; try to transform the site by only using CSS selectors
• Look at CSS animations and see if you could integrate them on the navigation hovers
• Pick a navigation item and create a new page with the same header and footer as the home page; be creative and have fun coming up with your own unique content and styles