What you will build
- A responsive home page with your intro, skills, and a call to action
- A projects section with cards that link out to live demos and GitHub
- A working contact form and a light/dark mode toggle
- Clean, hand-written HTML and CSS you actually understand, not a copied template
The path, stage by stage
Work through these free courses in order. Each stage links to the full course details, its platform, and what you walk away able to do.
| Stage | Course | Platform | Hours | What you gain |
|---|---|---|---|---|
| 1. Learn HTML and CSS | Intro to HTML/CSS: Making Webpages | Khan Academy | 8 | You learn how a web page is structured and styled: headings, links, images, colors, and spacing. By the end you can hand-write the markup and CSS for a simple page without copying a template. |
| 2. Master layout with Flexbox and Grid | Foundations: HTML and CSS | The Odin Project | 40 | This is where a portfolio starts to look professional. You practice real layout with Flexbox and Grid, responsive breakpoints, and reusable components, so your site holds up on a phone and a laptop. |
| 3. Add interactivity with JavaScript | Intro to JavaScript: Drawing & Animation | Khan Academy | 10 | You add the small touches that make a portfolio feel alive: a mobile menu, a light and dark toggle, a contact form that reacts to input. You leave able to wire up DOM events without a framework. |
Why these courses, not the alternatives
We start with Khan Academy's HTML/CSS course because it is genuinely beginner-first and free with no account gate, so you write real markup on day one instead of watching setup videos. We hand layout off to The Odin Project because its Foundations HTML and CSS work drills Flexbox and Grid harder than any video course, and that layout skill is exactly what separates a portfolio that looks built from one that looks like a template. We stop at Khan Academy's intro JavaScript rather than a 300-hour track because a portfolio needs a handful of DOM tricks, not a full framework. You can go deeper later.
Before you start
None. This is a true from-scratch beginner path.
What you walk away with
A responsive personal portfolio site you can deploy and put on your resume.
Start with the first course
Frequently asked questions
Do I need to know how to code before building a portfolio?
No. This path starts from zero. The first course assumes you have never written a line of HTML.
Where do I host a portfolio website for free?
GitHub Pages, Netlify, and Cloudflare Pages all host static sites for free with a custom domain. GitHub Pages is the simplest first choice for a plain HTML and CSS site.
Do I need JavaScript for a portfolio?
Not strictly. A strong portfolio can be pure HTML and CSS. JavaScript is worth the extra hours for a mobile menu, form handling, and a theme toggle, which is why it is the last stage here rather than the first.
How long does it really take?
If you skip the deep-dive parts of the layout course and focus on the project, you can have a first version live in a couple of weekends. The 58-hour estimate covers doing the courses properly.
Keep going on FreeCodingCourses
Where this build leads
Related builds