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 7 CSS files inside your styleSheets folder.

  • main.css
  • index.css
  • coffee.css
  • coffeeGuide.css
  • menu.css
  • club.css
  • contact.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. 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
  • 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 2 in Brightspace (Module 2 > Week 12 > 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 module, list three things you want to focus on improving on in the next module.

3. If you haven’t already watched any Share & Tell presentations in Slack, do so now (unless none have been posted). What new insights or knowledge did you gain from the presentation(s)? What, if any, questions do you have on the topics? Post your insights and questions in the Slack channel as a thread.

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
      • club.css
      • contact.css
    • validations (folder)
      • 6 HTML validation files
      • 7 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 can make corrections to Project 2 one time after your instructor has graded your project. Once you have made your corrections, please upload the newly zipped project02 file to the same Project 2 submission link in Brightspace.

  1. Locate the submission link for Project 2 in Brightspace (Module 2 > Week 12 > 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"
1. What did you correct from the previous project submission?

2. What was the underlying reason for each error?

3. How has your understanding of HTML & CSS improved after making these corrections?

4. What strategies will you use in the future to avoid similar errors?