How do you host a web development portfolio for free?
One free route is GitHub Pages. The GitHub Docs page on creating a Pages site lists these steps.
| Step | What you do |
|---|
| 1 | Create a repository, or pick an existing one |
| 2 | Choose a publishing source: a branch and folder, or a GitHub Actions workflow |
| 3 | Add an entry file named index.html, index.md or README.md at the top level |
| 4 | Set the publishing source in the repository settings |
| 5 | Select Visit site under Settings, then Pages |
A repository named with your username and github.io becomes your main site. GitHub notes that Pages sites are public even when the repository is private. Free accounts must use public repositories. Pages does not run server-side languages such as PHP, Ruby or Python, so use it for front-end work. Changes can take up to 10 minutes to appear.
What should you leave out of your portfolio?
Cut anything that makes a reader doubt your care. This list comes from common hiring advice, not a survey.
- Tutorial clones with no changes of your own
- Broken links, empty pages and "coming soon" sections
- Skill bars and percentage scores, which no employer can check
- Projects you cannot explain line by line
Free lessons help you fill gaps. MDN Web Docs runs a free learn web development area. Pair it with your own projects, not in place of them.
How do you write a project case study?
A case study turns a project into a story a hiring manager can scan. Keep it to four short parts: the problem, your approach, the result and the next step. The example below is made up to show the shape.
| Part | Example: budget tracker |
|---|
| Problem | Friends split rent and bills in a shared spreadsheet and lose track of who paid. |
| Approach | A single-page app that stores entries in the browser, with a form check on every field. |
| Result | Adding an expense takes two steps, and the monthly summary updates at once. |
| Next step | Add sign-in so the data follows the user across devices. |
Do not invent results. If you have no users, say what you tested yourself. "Works on phone and desktop" is true and useful. "Used by thousands" is neither when it is false.
What common mistakes sink a web development portfolio?
- No live link. A repository alone asks the reader to run your code. Most will not.
- No mobile check. Open every page on a phone before you share the link.
- Slow pages. Huge images and heavy scripts make a portfolio feel careless.
- Hidden contact details. Put an email and a GitHub link on every page.
- Stale work. A portfolio last updated years ago suggests you stopped building.
These points come from common hiring advice. Test them against your own pages rather than trusting a checklist.
How do you keep your portfolio current?
Set a calendar reminder every three months. Replace your weakest project with a stronger one. Fix broken links. Update the tools list to match what you use now. Small, regular updates beat a rebuild every two years.
What should you do next?
Pick one project this week and ship it. Write the one-line summary first, build the smallest version that works and put it online before you polish it. Then add the second project. Three live projects with clear write-ups beat ten half-built ones.
When the portfolio is ready, tighten your resume. Our guide to writing a tech resume for ATS covers the steps. Then start applying to the roles on your list.
Photo: Pexels, Pixabay Content License, via Pixabay (https://pixabay.com/photos/laptop-notebook-cellphone-computer-1839876/)
Fazlur Rahman
