Day 10: The Web is for Everyone

We’ve reached the finish line! \o/ Today is about ethics and practice.

The web should be accessible to people with disabilities (blindness, motor impairments, cognitive differences). Good HTML is accessible by default.

1. Alt Text for Images

Imagine you can’t see the screen. Screen readers read the alt text.

Bad: alt="image.jpg" or alt="image"
Good: alt="A golden retriever catching a tennis ball"

2. Semantic HTML

Screen readers use <h1>, <nav>, <main> to jump around. If you use <div> for everything, they get lost.

3. ARIA (Accessible Rich Internet Applications)

Special attributes for complex widgets. Use sparingly!

aria-label: Use on a button that is only an icon (like a search magnifying glass).
aria-expanded: Tells the user if a menu is open or closed.

Final Project: The Portfolio Landing Page

Your mission is to build a portfolio.html file using everything we’ve learned.

The Requirements

Header: Your name (<h1>) and a navigation menu (<nav>) with links (Home, About, Contact).
Hero Section: A short bio paragraph and an image of you (or a cat!).
About Section: Use <h2> for the title. Describe your skills in a list (<ul>).
Work Section: A table (<table>) listing your past projects and their dates.
Contact Section: A form (<form>) with Name, Email, and message.
Footer: Copyright notice.

Code Snippet Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Portfolio</title>
</head>
<body>

    <header>
        <nav>...</nav>
    </header>

    <main>
        <section id="hero">
            <!-- Image & Bio -->
        </section>

        <section id="work">
            <!-- Table -->
        </section>
        
        <section id="contact">
            <!-- Form -->
        </section>
    </main>

    <footer>...</footer>

</body>
</html>

Conclusion

You are now an HTML Developer! 🎓 You know how to structure the web, make it accessible, and prepare it for search engines.

What’s Next?

CSS: Make it pretty! Colors, layouts, fonts.
JavaScript: Make it do things! Interactions, logic.

Check out our other tutorials to continue your journey. Happy coding!

Day 10: Accessibility & Final Project