Build an evidence-first portfolio

A responsive portfolio with About, Skills, two project case studies, process evidence, and a safe contact path.

Week 6 · portfolio studio

Build an evidence-first portfolio

Turn two projects into readable case studies and create a responsive, safe contact path.

Case studies
Responsive layout
Professional evidence

index.html7 lines · Tab inserts two spaces

Edit HTML

<main><header><p class="eyebrow">Amina Diallo · student developer</p><h1>I build clear tools for community learning.</h1><p>Responsive web projects with careful research and accessible interaction.</p></header>
  <section aria-labelledby="work"><h2 id="work">Selected work</h2><div class="project-grid">
    <article class="project-card"><h3>Workshop finder</h3><p><strong>Problem:</strong> opportunities were scattered across chats.</p><p><strong>Contribution:</strong> I designed and built a phone-first searchable list.</p></article>
    <article class="project-card"><h3>Shared-device quiz</h3><p><strong>Problem:</strong> groups needed immediate practice feedback.</p><p><strong>Contribution:</strong> I added keyboard controls and clear result states.</p></article>
  </div></section>
  <button id="processButton" type="button">How I work</button><p id="processNote" aria-live="polite">Select the button to read my process.</p>
  <footer><a href="mailto:portfolio@example.org">Contact me about a project</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