Welcome to HTML Fundamentals

Learning Objectives

By the end of this lesson, you will:

• Summarize the Portfolio Pulse experience in one sentence.
• Explain how each module builds toward a launch-ready site.
• Identify the tools and support resources you will rely on.
• Capture personal learning goals for quick reference.

Project Context

Portfolio Pulse is a modern personal site designed to convert curious visitors into conversations. Everything you craft in this course—copy, layout, metadata, and forms—drives that outcome. You are not learning HTML in isolation; you are learning how professionals structure markup so design, performance, SEO, and accessibility checks pass without drama.

Why HTML Still Matters

Semantic Foundations

HTML communicates meaning before CSS or JavaScript render. Recruiters, SEO crawlers, and assistive technologies rely on the structure you produce. Strong semantic markup eliminates rework when you collaborate with designers or integrate frameworks later.

Production Mindset from Day One

This course mirrors how a production build progresses: define the story, map the structure, build incrementally, and run validation at each step. By Module 5 you will have a polished portfolio that passes accessibility and SEO audits.

Basic Example

<h1>Welcome to Portfolio Pulse</h1>
<p>Showcase your work and invite the right conversations.</p>

Practical Example

<header class="site-hero" aria-labelledby="site-title">
   <div class="hero-intro">
      <p class="text-sm uppercase tracking-wide">
         Product Designer & Frontend Engineer
      </p>
      <h1 id="site-title">Hi, I am Avery Stone.</h1>
      <p class="hero-lede">
         I design reliable customer journeys and prototype them in code.
         Portfolio Pulse walks you through my best work.
      </p>
      <a class="btn-primary" href="#contact">Book a strategy call</a>
   </div>
</header>

This hero structure previews the storytelling arc you will build throughout the course and demonstrates how semantics and calls to action coexist.

✅ Best Practices

1. Articulate the Product Vision Early

Why: Clarity about the portfolio goal helps you prioritize markup decisions and measure success.

-  Persona: Design-focused hiring manager
-  Primary action: Schedule a 30-minute chemistry call
-  Differentiator: Rapid prototyping and measurable UX improvements

2. Keep a Persistent Notes Log

Why: Documenting assumptions, blockers, and vocabulary creates continuity across modules and accelerates retrospectives.

# Portfolio Pulse · Notes

-  Wins:
-  Questions:
-  Follow-ups:

❌ Common Mistakes

1. Treating Lessons as Standalone Assignments

Problem: Fragmented learning produces inconsistent markup that is painful to maintain later.

// Bad: jumping into Module 2 without finishing metadata or notes from Module 0.

Solution:

1. Finish each lesson's implementation task.
2. Run the validation checklist.
3. Commit with a message that references the lesson number.

2. Ignoring Support Resources

Problem: Beginners lose momentum when they troubleshoot blindly.

// Bad: guessing at semantics without checking MDN or accessibility guidance.

Solution:

-  MDN HTML Reference → https://developer.mozilla.org/docs/Web/HTML
-  WebAIM Contrast Checker → https://webaim.org/resources/contrastchecker/
-  W3C Validator → https://validator.w3.org/

🔨 Implement in Portfolio Pulse

Task: Capture Your Starting Point

1. Create portfolio-pulse/notes/orientation.md.
2. Document the course vision in three bullet points and list your personal goals.
3. Add the support resources above and any communities you plan to lean on.
4. Commit with git commit -am "docs: capture html foundations orientation".

Expected Result

You have a durable reference that keeps you aligned on the purpose of Portfolio Pulse and where to find help when you are stuck.

✅ Validation Checklist

Functionality

• portfolio-pulse/notes/orientation.md exists and is tracked in Git.
• Notes include a one-sentence Portfolio Pulse vision.

Code Quality

• Commit message follows the <type>: <description> convention.
• Repository status is clean (git status shows no pending changes).

Understanding

• You can explain why semantic HTML improves collaboration.
• You can name the primary action the portfolio encourages.

Project Integration

• Support resources are documented for quick access.
• Next actions for Module 0 are listed in your notes file.