Week 8 Coding Practice

Purpose

Create an HTML table and apply CSS.

---

Textbook Reference

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

---

Directory Structure

1. Download the practice08 and save it into your practice folder for this course.
2. Open the webpage, index.html in VS Code, and the browser.

Note: you will need to link the index.css to the index.html document.

Instructions

In this practice assignment, you’ll create an HTML page that displays a weekly class schedule using a table. You will use semantic HTML table tags and apply CSS styling to improve its appearance and usability.

1. Design Your Weekly Schedule

   • Create a schedule for a typical school or college week (Monday–Friday)
   • Include at least 5 rows (e.g., time slots) and 4–5 columns (e.g., days of the week or subjects)
   • Populate the table with realistic class or activity names and times

2. Build the HTML Table

   • Use proper table tags: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>

3. Style the Table with CSS

   Your styles should include: - Clear borders for readability - Cell padding and spacing - Alternating row or column colors - A hover effect that highlights a row when hovered - Centered or aligned text for clarity

Example Table Content

Time	Monday	Tuesday	Wednesday	Thursday	Friday
9:00–10:00	Math	English	Math	English	Study Hall
10:00–11:00	History	Science	History	Science	PE
11:00–12:00	Art	Coding	Art	Coding	Music
12:00–1:00	Lunch	Lunch	Lunch	Lunch	Lunch
1:00–2:00	Free Study	Lab	Free Study	Lab	Assembly

---

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

---

Grading Criteria

• The correct file directory structure exists in the practice08 folder along with the HTML and CSS validation.
• All course coding standards have been followed.
• The HTML table uses the correct semantic HTML tags.
• CSS styles have been applied for a legible and presentable table.
• Reflection questions are answered honestly and thoroughly.

---

Submission

Part 1: Reflection

1. Locate the submission link in Brightspace (Unit 2 > Week 8 > Week 8 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. Describe one moment in this week’s coding practice that made you say “Oh!” or changed how you understood something. What clicked?


3. What challenges (if any) did you encounter in your learning this week? To help, try using this sentence format: This week, I struggled with ________. I think this challenge came up because ________. To work through it, I ________.


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

Part 2: Upload .zip

1. Compress your entire practice08 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 (empty folder)
   • stylesheets (folder)
     • index.css
   • validations (folder)
     • 1 HTML validation file
     • 1 CSS validation file
   • index.html

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

4. Click "Submit"