Debugging Assignment Files

Welcome to the Debugging Assignment repository! This repository contains the resources for the debugging assignment in the Web Design Tools course. Students will debug the provided HTML and CSS files to meet W3C standards and accessibility guidelines.

Files Included

1. index.html

   • Contains intentional errors for students to identify and fix.
   • Errors include issues with HTML syntax, structure, accessibility, and semantic correctness.

2. style.css

   • Includes intentional errors related to CSS syntax, selectors, and properties.

3. Expected Site Design

   • Includes a screenshot of the error-free page (images/expected-site-design.png) to serve as a reference for students.

File Structure

debugging-html-css/
├── css/
│   ├── style.css
│   ├── layout.css
├── images/
│   ├── easter-bunny-150-profile.png
│   ├── expected-site-design.png
├── index.html
├── README.md

Objective

The goal of this assignment is to:

• Develop debugging skills by identifying and correcting errors in HTML and CSS.
• Improve familiarity with W3C standards and accessibility best practices.
• Practice using debugging tools and validators to ensure standards-compliant code.
• Learn to document errors and resolutions in a structured manner.

Instructions

1. Clone this repository to your local machine:

   git clone <repository-url>

2. Open the index.html and style.css files in your favorite text editor or IDE (e.g., Visual Studio Code).

3. Identify the errors in both files. Use tools like:

   • W3C HTML Validator
   • W3C CSS Validator
   • Wave Accessibility Checker

4. Resolve all identified errors in the index.html and style.css files by:

   • Commenting out the original error code.
   • Adding the corrected code directly below the commented-out error code.

5. Once all errors are corrected:

   • Commit your changes and push them to your own GitHub repository.
   • Deploy the corrected project to GitHub Pages.

6. Submit your GitHub repository link and GitHub Pages link as instructed in the course.

Tools and Resources

• W3C HTML Validator
• W3C CSS Validator
• Wave Accessibility Checker
• MDN Web Docs

License

This repository is for educational purposes only. All content is copyrighted by the course instructor and may not be distributed without permission.

---

Happy debugging!

1. index.html errors

Was missing 'lang="en>' which is used for telling the brower the page is in english

2. index.html errors

<meta charset="UTF-8">

add charset="UTF-8"> to the meta tag so that it can correctly display text

3. index.html errors

<meta name="viewport" content="width=device-width, initial-scale=1.0" >

removed the / at the end becauses it's uselesss

4. index.html errors

  <img src="images/easter-bunny-150-profile.png" alt="Easter Bunny profile picture">

add images/ to the front of easter so that it could pull the image from the folder as well alt which is for text description

5. index.html errors

        <h3>Enough Content</h3>

was missig the h3 tag to close it

1. layout.css errors

aside { position: relative; padding: 8px 16px; margin: 0; width: 20vw; height: auto; float: right; }

aside dt { font-weight: bold; }

aside dd { padding: 0 10px; }

missing aside which display the box as well there was an extra curly bracket

2. layout.css errors

Align nav link text to the left like the reference image

text-align: left;

3. layout.css errors width: 100%; float: none;
   clear: both;

remove desktop float & sit below nav bar

4. layout.css errors

duplicate

1. style.css errors

  color: #B2D732;

fix color

2. style.css errors

font-size: 5vw;

no space between 5 & v, will resize

3. style.css errors

line-height: 1.35em;

me is backwards fixes spacing

4. style.css errors

#FE27122;

too many 2's,

5. style.css errors

text-decoration: underline;

change to underline, for proper underline