Skip to content

Project 3 Guide

Get started on project 3 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 2 must be free of errors before starting Project 3

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

Overview

Directory Structure

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

CSS Files

Create the below 2 CSS files inside your styleSheets folder.

  • club.css
  • contact.css

Connect CSS & HTML Documents

Connect the club.css and contact.css to the appropriate HTML file in the <head> section after main.css link.

Images

No additional images are needed for this project.

HTML Validation

The club.html and contact.html pages must be validated.

  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 club.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 the contact.html page, renaming the file per page.

CSS Validation

The club.css, contact.css, index.css, and coffeeGuide.css pages must be validated.

  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 club.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 the remaining 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 all form data makes it to the Echo screen.
  • 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 2
  • Course Coding Standards are 1followed 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
  • Working form (fields go to Echo server)
  • Correct form attributes to control form behavior
  • Correct use of floats to obtain desired page layout
  • Thoughtfulness and completeness of reflection questions (below).

Submission

Part 1: Reflection

  1. Locate the submission link for Project 3 in Brightspace (Unit 2 > Week 12 > Project 3).
  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.

3. Are you interested in completing the Project 3 Swap & Review challenge? If yes, I will pair you with another student so you can review their work and they can review yours.

Part 2: Upload .zip

  1. Compress your entire project03 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
      • club.css
      • contact.css
    • validations (folder)
      • 2 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 3 one time after it has been graded. This allows you to correct mistakes and demonstrate improved understanding.

  1. Locate the submission link for Project 3 in Brightspace (Unit 3 > Week 12 > Project 3).
  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 added a required attribute to the password field to make it required by the user.”)

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.