Skip to content

Project 1 Guide

Get started on project 1 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.

Overview

A local coffee shop, Crown Coffee, serves the Madison community offering a small menu, caffeinated beverages, and a coffee club for users to join. The first two projects in this course will consist of expanding and enhancing this website.

For Project 1, HTML will be used to develop webpages. In project 2, you will add CSS, and some additional HTML.

Directory Structure

The directory structure of Project 1 will be like the coding exercises. The directory structure should be created in your class folder on your external hard drive.

  1. In your class folder (Web Development), create a folder for project01
  2. Create three sub folders named stylesheets, images, and validations

Add HTML Files

This step will set up your proper folder structure. When finished, you will have 6 HTML files:

  1. index.html
  2. coffee.html
  3. coffeeGuide.html
  4. menu.html
  5. club.html
  6. contact.html

Steps for creating each HTML page

Create a new file named index.html and save it into the project01 folder

  1. Go to HTML Starter Code and copy the starter HTML code.
  2. Paste the code into the index.html file and save
  3. Modify the name and date in the comments section and save
  4. Repeat this process for the remaining 5 HTML pages, naming the files according to the list above

Project Sitemap

A sitemap is a tool that helps visualize the website structure. Below you see the HTML files you need to create for this project. The lines illustrate links to each of the pages. The homepage links to each page, and each page links to the contact.html page.

project 1 sitemap

Add Images

  1. Download all Project 1 images, unzip (uncompress) the folder and place each image into your images folder.

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 HTML document.
  4. Click the Check button
  5. Print it as a PDF and save it into a folder named validations in your project01 folder
  6. Name the PDF indexValidation.pdf.
  7. Repeat this process for each html 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. The main thing I am grading is the STRUCTURAL formatting of your web pages. However, do not forget to run your .html pages through a validator correcting any errors or major warnings.

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
  • Carefully review the HTML code for legibility, indentation, spacing, etc.
  • Make sure everything validates properly

The following will be assessed on Project 1

  • Course Coding Standards are followed on all pages. 1 - 15 apply.
  • Correct directory structure, file names, and validation PDFs.
  • Correct implementation of HTML semantic elements
  • Correct use and implementation of images.
  • Correct use and implementation of HTML lists.
  • Proper use of character entities for special characters.
  • Correct implementation of links, including email, telephone, and document fragments.
  • Proper use of id and class attributes.
  • Thoughtfulness and completeness of reflection questions (below).

Submission

Part 1: Reflection

  1. Locate the submission link for Project 1 in Brightspace (Module 1 > Week 6 > Project 1).
  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 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 project01 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)
    • validations (folder) with 6 PDFs for index, coffee, coffeeGuide, menu, club, and contact HTML pages
    • index.html
    • coffee.html
    • coffeeGuide.html
    • menu.html
    • club.html
    • contact.html
  4. Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.
  5. Click "Submit"

Submitting Corrections

You can make corrections to Project 1 one time after your instructor has graded your project. Once you have made your corrections, please upload the newly zipped project01 file to the same Project 1 submission link in Brightspace.

  1. Locate the submission link for Project 1 in Brightspace (Module 1 > Week 6 > Project 1).
  2. Click on Start New
  3. Click on Create Submission
  4. Copy the below text (there is a copy icon in the upper-right of the textarea) and paste it into the textarea that appears under the Create Submission link and answer the reflection question.
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 improved after making these corrections?

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