Build Your Web Developer Portfolio
A code-along portfolio build: profile, resume, work, and contact pages, animated project cards, and every page made responsive.
A portfolio you built by hand answers a question every junior candidate faces: can this person actually code, or can they follow a template? When the site itself is your work, the site is the proof. This course is that build, a personal vCard style portfolio, coded on screen from the first div to the final responsive fix.
The pages, one by one
The build starts with the home page and immediately gets honest about the hard parts. There is a lesson literally called "Position Hell," because CSS positioning is where every beginner build goes sideways, and pretending otherwise helps no one. You work through the profile section, add buttons and a menu icon, wire up social media links, and then clean up the page, which is its own lesson because tidying real code is a skill.
From there, the site grows a page at a time. A resume page, set up and finished across two lessons. A portfolio page for your work, with animations added to your projects so the page feels alive instead of static. Then the contact page: building the form while working around Parcel's limitations, styling the form, and styling the rest of the page around it.
Responsive, properly
The final section makes the whole site work on mobile, and it does not cheat by cramming that into one lesson. The home page, the contact page, and the portfolio page each get their own responsive pass. Given that recruiters will absolutely open your portfolio on a phone, this section is not optional polish. It is the difference between a portfolio and a desktop-only demo.
Two notes on fit. If your HTML and CSS are shaky, start with HTML basics and CSS basics first, because this course assumes you can write both. And when the site is built, The Developer Portfolio Blueprint covers the strategy layer: what projects to feature, what message the portfolio sends, and how to track whether it is working.
What you'll learn
- ✓ Build a personal vCard style portfolio site from an empty folder
- ✓ Structure a profile section with buttons, a menu icon, and social links
- ✓ Create a resume page and a portfolio page for your work
- ✓ Add animations to your project listings
- ✓ Build and style a working contact form, including working around Parcel limitations
- ✓ Make the home, portfolio, and contact pages fully responsive
Course Curriculum
5 sections
1
Intro and Home Page
0 lessons
2
Resume Page
0 lessons
3
Portfolio Page
0 lessons
4
Contact Page
0 lessons
5
Make site responsive
0 lessons
Before you start
- ✓ Basic HTML and CSS. You should be comfortable writing markup and styles by hand
