Build an H5 + JS Portfolio Site

Free Review to certify

Build an H5 + JS Portfolio Site

Ship a responsive personal portfolio with HTML5, CSS and vanilla JS — not just fill-in forms.

Skills you'll learn

HTML structure CSS layout JavaScript basics Portfolio storytelling Git intro

~90 min · +40 pts

Download the starter under /assets/templates/h5-portfolio/ and customize it into YOUR portfolio.

Must include:
1) Hero with your name + one-line pitch
2) Projects grid (at least 3 cards) with links
3) Skills section
4) Contact / GitHub / LinkedIn links
5) At least one JS interaction (theme toggle, smooth scroll, or filter)

Host it anywhere public (GitHub Pages, Netlify, or local demo video).
Submit: public URL (or clear demo notes) + reflection (120+ chars) on what you customized.

Environment setup (start here)

No install required — you only need a browser and a folder on your computer. A code editor (VS Code) helps but is optional for step 1.

Browser only

Pick your OS and follow from step 1:

Windows macOS

1) Create a folder, e.g. C:\Users\YourName\portfolio-lab
2) On this project page, download index.html, app.js, styles.css (or the whole README pack).
3) Move the files into that folder.
4) Double-click index.html — it should open in Edge/Chrome.
5) (Recommended) Install VS Code: https://code.visualstudio.com/ → File → Open Folder → pick portfolio-lab.
6) Edit index.html / styles.css / app.js, save (Ctrl+S), refresh the browser tab.

1) Create a folder, e.g. ~/Documents/portfolio-lab
2) Download the starter files from this project page into that folder.
3) Double-click index.html (or right-click → Open With → Chrome/Safari).
4) (Recommended) Install VS Code: https://code.visualstudio.com/ → File → Open Folder.
5) Edit files, save (Cmd+S), refresh the browser.
6) If macOS blocks opening: System Settings → Privacy & Security → allow the editor/browser.

How do I know it worked?

You should see the portfolio hero with placeholder name. After editing, your new text appears when you refresh.

Common issues

Blank page → open DevTools (F12) → Console for red errors. Styles missing → keep index.html, styles.css, app.js in the SAME folder. Chinese path issues on Windows → use a short English path like C:\portfolio-lab.

Starter pack

Download the H5+JS starter, customize your portfolio, and publish (GitHub Pages / Netlify, etc.).

Preview index.html app.js styles.css README

/assets/templates/h5-portfolio/