Skip to content

Project 2 Guide

Get started on project 2 immediately!

Do what you know and check it off, you can come back and finish more later. The point is to not leave it to the last minute, otherwise, you will not finish.

Project 1 must be free of errors before starting Project 2

If you completed Project 1 with errors, make sure you have corrected these errors before starting Project 2. If there are items that are incorrect from Project 1, they can negatively impact your results for the CSS for Project 2 and if an item was marked incorrect for the first Project, it will be incorrect for the second project.

Overview

It’s time to add CSS to our website! The exact colors are up to you; however, I have provided the colors in the example images if you wish to duplicate the color scheme.

Directory Structure

Copy the entire project01 folder and rename it project02. This ensures you do not override your Project 1 work.

CSS Files

Create the below 4 CSS files inside your styleSheets folder.

  • main.css
  • index.css
  • coffee.css
  • menu.css

Connect CSS & HTML Documents

  • In all HTML documents, connect the main.css file in the <head> section. The main.css will be used for styles that are common on all pages.
  • Connect the individual CSS files for each HTML document after the main.css link. For example, link the coffee.css document to the coffee.html document

Images

Download all Project 2 images, unzip the folder and place each image into your images folder.

HTML Validation

All HTML documents must be validated prior to submission.

  1. Go to https://validator.w3.org/
  2. Click on the Validate by File Upload
  3. Click on the Choose file button and navigate to the location of your index.html document.
  4. Click the Check button
  5. Print it as a PDF and save it into a folder named validations in your project02 folder
  6. Name the PDF indexHTML.pdf.
  7. Repeat this process for each html pages, renaming the file per page.

CSS Validation

All CSS documents must be validated prior to submission.

  1. Go to https://jigsaw.w3.org/css-validator/
  2. Click on the by File Upload option
  3. Click on the Choose file button and navigate to the location of your main.css document.
  4. Click the Check button
  5. Print and save as a PDF and save the validation in a folder called validations in your project02 folder
  6. Name the PDF cssMain.pdf
  7. Repeat this process for all CSS pages, renaming the file per page

Grading

Your screen resolution may vary, so depending on your screen size and resolution, your website may differ from the example images provided. Regardless of this, your website should look acceptable on all screens.

Double-check everything!

  • Check that every link works
  • Make sure all images are visible
  • Review past feedback on your assignments and compare that to your current work
  • Review all the Coding Standards carefully
  • Make sure everything validates properly

The following will be assessed on Project 2

  • All Grading Criteria from Project 1
  • Course Coding Standards are followed on all pages. 1 - 16 apply.
  • Correct formatting of external CSS documents
  • Correct use of box model CSS properties.
  • Correct use of CSS id, class, and pseudo-class selectors
  • Correct application of background images and CSS color
  • Thoughtfulness and completeness of reflection questions (below).

Submission

Part 1: Reflection

  1. Locate the submission link for Project 2 in Brightspace (Unit 2 > Week 9 > Project 2).
  2. Copy the below text (there is a copy icon in the upper-right of the textarea) and paste it into the Comments section.
  3. Answer the reflection questions.
1. Tell your Project "story". Describe how it unfolded, from its overall learnings to the obstacles and pitfalls you encountered along the way, whether they made you cringe, caused frustration, or left you exclaiming "oh no!" Elaborate on the creative approaches and solutions that took you from "oh no!" to "I got this!". Emphasize the significant takeaways and knowledge you acquired throughout the project's journey. 

2. Based on this unit, list three things you want to focus on improving on in the next unit.

Part 2: Upload .zip

  1. Compress your entire project02 folder to a .zip (zipped) file.
  2. Do not zip the projects or Web Development folders.
  3. You should have the follow files/folder in the zip file:
    • images (folder) with images
    • styleSheets (folder)
      • main.css
      • index.css
      • coffee.css
      • coffeeGuide.css
      • menu.css
    • validations (folder)
      • 6 HTML validation files
      • 4 CSS validation files
    • index.html
    • coffee.html
    • coffeeGuide.html
    • menu.html
    • club.html
    • contact.html
  4. Click on Upload Files (under the Create Submission textarea) select Browse Local Files.
  5. Navigate to your .zip file and click Add
  6. Click Submit

Submitting Corrections

You have the opportunity to revise and resubmit your Project 2 one time after it has been graded. This allows you to correct mistakes and demonstrate improved understanding.

  1. Locate the submission link for Project 2 in Brightspace (Unit 2 > Week 9 > Project 2).
  2. Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.
  3. Click "Submit"

Reflection Questions

❗ REQUIRED with resubmission

1. What specific corrections did you make?
(List the changes clearly. Be specific—e.g., “I used a CSS shortcut to make my code cleaner, more efficient, and maintainable.”)

2. Why did each mistake happen?
(What was the misunderstanding or oversight behind each one? Be honest and curious.)

3. How has your understanding of HTML improved through this process?
(Describe what you now know or see differently.)

4. What will you do differently in the future to avoid similar mistakes?
(This could include strategies like proofreading your code, using checklists, asking questions earlier, or using validation tools.)

Tip

  • Think of this as a learning opportunity, not just a fix-it task.
  • Use your original feedback as a guide.
  • Be reflective—quality answers matter and help me understand your growth.

If Issues Remain After Resubmission

If your revised project still has significant issues or your reflection answers are incomplete or lack detail, you’ll be required to meet with me one-on-one to review your code and clarify your understanding before any additional resubmissions are accepted.

This meeting is intended to:

  • Help you strengthen your CSS skills
  • Clarify recurring errors or misconceptions
  • Support your continued success in the course
  • You’ll receive an Slack message with scheduling instructions if a meeting is needed.