In short
Recruiters spend very little time on each candidate. A clean portfolio with real projects and a working contact link says more than any 'passionate learner' line on your resume.
A personal site showcasing who you are, your skills and your work — often the very first real project a frontend developer builds and ships. A strong portfolio demonstrates not only visual polish but also problem-solving, technical decisions, responsiveness, accessibility, deployment, and the ability to explain what you built.
Think of it like this
Your shop's front window
People decide whether to walk into a sweet shop by looking at the window. Fresh, neatly arranged, clear prices. Your portfolio is that window: your best work up front, easy to see, and a clear way to reach you.
Watch it happen
Your portfolio's skeleton
1/4The header has your name and nav links that jump to each section.
The big ideas
What you need to know
Who you are in one line
Name, role and one sentence about what you build. No long life story on the first screen.
Three strong projects
Each with a screenshot, what it does, the tech used, and live and GitHub links.
Easy to contact
Email, LinkedIn and GitHub links that actually work, plus a resume PDF.
Practise semantic HTML
Header, nav, main, sections and footer. This is your first real chance to use them all together.
How it works
Build plan
- 1
Write content first
Your intro, project descriptions and contact details, in a plain text file.
- 2
Semantic skeleton
Build the HTML structure with header, nav, sections for about, projects and contact.
- 3
Make it responsive
Add the viewport tag and test on your phone before adding colours.
- 4
Polish and meta tags
Add alt text, a title, description and Open Graph tags.
- 5
Deploy
Put it live on GitHub Pages, Netlify or Vercel and share the link.
See it in code
Walk through the code
1<section id="projects" aria-labelledby="projects-title">2 <h2 id="projects-title">Projects</h2>3 <article class="project">4 <img src="img/mess-menu.webp" alt="Hostel mess menu app on a phone" />5 <h3>Mess Menu App</h3>6 <p>Shows today's hostel menu and lets students rate meals.</p>7 <p><strong>Built with:</strong> HTML, CSS, JavaScript</p>8 <a href="https://example.com/mess">Live demo</a>9 <a href="https://github.com/you/mess-menu">Code</a>10 </article>11</section>1/4aria-labelledby ties the section to its heading, so screen readers announce it as Projects.
One reusable project card. Copy it for each project. aria-labelledby ties the section to its heading for screen readers.
Save yourself the pain
Common mistakes
Oops
Filling the projects section with ten tutorial clones.
Do this instead
Show two or three projects you can explain in an interview, ideally ones that solve a real problem.
Oops
A skills bar saying 'JavaScript 90%'.
Do this instead
Percentages mean nothing. List your tools and let the projects prove the skill.
Oops
Broken links to demos that expired months ago.
Do this instead
Click every link before applying anywhere. Recruiters notice.
Your mission
Ship version 1 today
Quick check
Which HTML element is the best wrapper for each project card on your portfolio?
Go deeper
- 1Structure it with semantic HTML: header, about, projects, contact sections. Validate your understanding by applying it in a small practical example.
- 2Keep the first version simple — content and structure matter more than polish here. Validate your understanding by applying it in a small practical example.
- 3Deploy it live (even a basic version) so you get comfortable shipping early.
More projects at this stop
Resume
Product Page
Blog Page
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
