Lab 2 - Advanced HTML

Goals of the Exercise

• Enhance my understanding of HTML structure and semantics.
• Improve accessibility and styling through CSS.

Description

In this lab, I focused on using more advanced HTML techniques and applying css styling to improve the website's functionality and appearance.

Related links

• W3C Validator: Used this to validate my HTML code.
• aXe DevTools: Checked my accessibility and color contrast with this tool.
• Google Fonts: Loaded the Montserrat font for a nice touch.
• CSS Normalization: I used normalize.css for consistency across browsers.

Reflection

Woaw!

What went well:

• The HTML structure is solid, with correct use of header, main, section, and footer elements.
• The CSS for basic styles is working well, with the right background and text colors.
• Navigation links are functional, and same-page links work as intended.
• Utility classes for margin and padding have been implemented, although there's room for optimization.

Aauuw!

What was difficult:

• I faced some issues with color contrast in the navigation, which needed adjustments for better visibility.
• The integration of the .container--narrow class into the structure needs improvement.
• Hover effects for navigation links required tweaks to ensure they were visible against various background colors.

Not sure?

What I’m uncertain about:

• Understanding the best practices for using utility classes for an organized layout.

Conclusion

Overall, the project turned out well! There were some challenges, but they helped me learn and improve the website's functionality and accessibility. More practice with CSS and utility classes will definitely help me get better at web development.