A responsive site that introduces you, lists your projects and gives visitors a way to contact you.
Difficulty: Beginner · Technology: HTML, CSS
Features to build
- Responsive layout
- Projects section with links
- Contact links
- Accessible headings and alt text
Step-by-step build plan
- Sketch the pages on paper first
- Write semantic HTML with no styling
- Add a mobile layout, then scale up to desktop
- Add a projects section with real links
- Test with keyboard only and fix focus issues
The part most people find hard
Making the layout look good at 360px without breaking it at large sizes.
How to test it
Open it on a real phone and run a Lighthouse audit.
Suggested extensions
Add user accounts, better error handling, automated tests and a README with screenshots. Each extension is a new talking point in interviews.
How to describe it on your resume
Designed and deployed a responsive personal portfolio using HTML and CSS.
Portfolio tip
Deploy it, link both the live version and the code, and write two paragraphs about what you learned and what you would improve.