Lab 1 - Basics Of HTML

Goals Of The Exercise

• Project Structure: Set up a clear folder hierarchy, including a homepage, CV section, projects section, and an image directory.
• Semantic HTML: Use proper HTML5 sectioning elements such as <header>, <main>, and <footer> on every page. Ensure each page has a meaningful title and the correct language attribute.
• Navigation: Include simple navigation links to the homepage and the projects page, using semantic tags and relative paths.
• Content & Validation: Add relevant text and images, validate all pages using the W3C Validator, and ensure clean URLs without exposing index.html.
• Portfolio & Reflection: Document the goals, your solution, useful resources, and a brief reflection (what went well, what was challenging). Maintain proper heading structure and publish the site on time.

Description

This project was part of an introductory web development course focused on learning the fundamentals of HTML and semantic structure. The goal was to build a small, multi-page website using only HTML, with a clear folder structure, accessible navigation, and proper use of HTML sectioning elements.

Each page includes meaningful content, relative links, and validates correctly according to W3C standards. This exercise laid the foundation for future web projects by emphasizing clean, structured, and standards-compliant code.

Related Links

To check the validity of my code, I used tools such as axe DevTools and the W3C Markup Validation Service. Using axe DevTools gave me insight into basic accessibility issues and helped me start thinking more critically about how websites can be made more inclusive.

The W3C Markup Validation Service helped me identify syntax errors in my HTML, which improved the technical accuracy of my pages. While I'm still learning how to interpret and fix everything these tools report, they've already become a valuable part of my workflow.

Reflection

Receiving detailed feedback on my website project was crucial in highlighting areas where I needed to improve. I learned that my file organization did not align with the expected structure, as I did not create separate folders with an index.html file for each page. This caused issues with URLs displaying .html extensions, which I now understand can be avoided by following the proper folder and file setup.

I reviewed this with my instructor to fully grasp the best practices. Regarding HTML element usage, I realized that my heading hierarchy on the homepage was not structured correctly. Instead of creating a clear outline with progressively nested headings, I had multiple subtitles that made the content appear as one flat section.

Additionally, my use of <section> elements and lists on the projects page was not optimal, using a <ul> with only one item and placing my own projects in the footer were mistakes I intend to correct. Through this feedback, I now have a better grasp on the value of semantic HTML and structured site organization for building accessible and maintainable websites. I'm motivated to implement these changes in upcoming projects and continue to improve with the help of my instructors.