Skip to content

Week 9 Coding Practice

Purpose

Create an HTML table and apply CSS.

Textbook Reference

  • Chapter 8: Table Markup
  • Chapter 14: Thinking Inside the Box

Instructions

This practice will be completed as part of your Project 2 – specifically, the coffee.html and coffee.css documents.

  1. View the Project 2 - Our Coffee page.

  2. Open the coffee.html from Project 2 in VS Code and your browser.

  3. If you haven’t created a coffee.css document yet, do this now.

  4. The content in the <main> element from Project 1 should look like the Sample Output below.

  5. For Project 2, the “Hot Coffee Drinks” list will be placed in a table and the page <h2> headings will have a background-image. The Project 2 images can be downloaded here.

  6. Follow the specifications for Project 2 - Our Coffee and complete the HTML and CSS for the table on coffee.html.

  7. For this practice, the <header>,<nav>, and <footer> styles do not need to be complete.

Sample Output

Our Coffee

HTML Validation

  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 practice09 folder
    • Name the PDF coffeeHtmlValidation.pdf.

CSS Validation

  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 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 practice09 folder
    • Name the PDF coffeeCssValidation.pdf

Grading Criteria

  • The correct file directory structure exists in the practice09 folder along with the HTML and CSS validation.
  • All course coding standards have been followed.
  • The background image has been applied to the headings and looks like the sample output provided.
  • The "Hot Coffee Drink" has been formatted into an HTML table, including the prices for small, medium, and large.
  • CSS styles have been applied correctly and look like the sample output provided.
  • Reflection questions are answered honestly and thoroughly.

Submission

Part 1: Reflection

  1. Locate the submission link for Practice 9 in Brightspace (Module 2 > Week 9 > Week 9 Coding Practice).
  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 in the Brightspace.
1. How are you doing? Are you encountering any issues preventing you from completing this week's assignments? What can I do to better support you this week?


2. What did you find particularly insightful this week?


3. What part of the learning or coding process did you find most challenging? How did you overcome it?


4. What questions (if any) do you have about the material covered this week?

5. How do padding and margin differ in the way they impact the spacing of an element?

Part 2: Upload .zip

  1. Compress your entire project02 folder to a .zip (zipped) file.

  2. Do not zip the practice or Web Development folders. You should have the following files/folder in the zip file:

    • images (folder)
      • with images
    • stylesheets (folder)
      • coffee.css
    • validations (folder)
      • 1 HTML validation file
      • 1 CSS validation file
    • index.html
    • coffee.html
    • coffeeGuide.html
    • menu.html
    • contact.html
    • club.html

  3. Click on "Upload" to upload your .zip file or you can drag and drop it into the submission window.

  4. Click "Submit"