Build a credibility-first portfolio page

A phone-ready page with clear purpose, useful evidence, predictable navigation, and a working action.

Week 5 · web studio

Build a trustworthy community site

Create a clear, responsive program page whose main action works for keyboard and phone users.

Semantic structure
Responsive CSS
Accessible interaction

index.html12 lines · Tab inserts two spaces

Edit HTML

<main>
  <nav aria-label="Program navigation"><a href="#program">Program</a><a href="#schedule">Schedule</a><a href="#contact">Contact</a></nav>
  <section class="hero" id="program">
    <p class="eyebrow">Free community workshop</p>
    <h1>Build digital skills you can use this week.</h1>
    <p>Small-group practice, shared-device activities, and a project you can show.</p>
    <button id="interestButton" type="button">I am interested</button>
    <p id="interestStatus" aria-live="polite">Registration opens Monday.</p>
  </section>
  <section id="schedule"><h2>What to expect</h2><ul><li>Saturday, 10:00</li><li>Bring curiosity; devices are shared</li></ul></section>
  <footer id="contact">Questions? <a href="mailto:hello@example.org">Email the program</a>.</footer>
</main>

Live preview

Preview ready

The preview is isolated from your account and cannot make network requests.

Project checks

Turn your idea into working code

Run your project, try it in the preview, then choose Check project for clear, testable feedback.

Close the loop

Explain what changed.

After the checks pass, name one decision, one failure you corrected, and one improvement you would make next. That explanation is part of the project.

Return to the lesson