Building Your Developer Portfolio
Learn to design, build, and deploy a professional developer portfolio from scratch using HTML, CSS, JavaScript, and modern deployment tools. By the end, you will have a live, recruiter-ready portfolio site showcasing your projects, skills, and contact information.
Course Content
6 modules · 30 lessonsPortfolio Strategy and Planning
Students can define their portfolio's target audience, structure its content, and sketch a wireframe before writing a single line of code.
What makes a developer portfolio actually get you hired
portfolio purpose, recruiter perspective, social proof, project selection, differentiation, personal brand, common mistakes
How to choose which projects to put in your portfolio
project selection criteria, deployed vs undeployed, readme quality, problem statement, tech stack visibility, project depth vs breadth
How to wireframe a portfolio site before writing code
wireframing basics, section layout, above the fold, navigation structure, mobile-first planning, content hierarchy, tools for wireframing
How to write a personal brand statement for developers
personal branding, positioning statement, target audience definition, tone of voice, headline writing, elevator pitch, differentiators
How to set up your portfolio project folder structure
folder structure, file naming conventions, assets organization, index.html setup, css and js linking, git initialization, .gitignore basics
Building the Portfolio with HTML and CSS
Students can build a fully structured, mobile-responsive portfolio layout using semantic HTML and modern CSS including Flexbox and Grid.
How to build a portfolio hero section with HTML and CSS
hero section structure, semantic HTML, flexbox centering, viewport height, call-to-action button, heading hierarchy, text alignment
How to build a projects section with CSS Grid
CSS Grid, grid-template-columns, auto-fill, minmax, project card structure, responsive layout, image aspect ratio, card hover state
How to build a responsive navigation bar with CSS
sticky navigation, flexbox nav layout, space-between, smooth scroll, anchor links, mobile hamburger concept, z-index, backdrop filter
How to make a portfolio fully responsive with CSS media queries
media queries, breakpoints, mobile-first approach, font scaling, grid column collapse, padding adjustments, min-width vs max-width, clamp function
How to style a skills section and contact section for a portfolio
skill tags with flexbox wrap, contact section layout, mailto links, external link icons, section spacing, CSS custom properties, consistent color system
Adding Interactivity with JavaScript
Students can add practical JavaScript features — mobile navigation, dark mode, and smooth scroll interactions — that make a portfolio feel professional and polished.
How to build a mobile hamburger menu with JavaScript
hamburger menu, classList toggle, event listener, aria-expanded, mobile nav overlay, CSS transition, document.querySelector
How to implement dark mode toggle in a portfolio
dark mode, CSS custom properties, data-theme attribute, localStorage, prefers-color-scheme, classList toggle, system preference detection
How to add scroll-triggered animations to a portfolio using IntersectionObserver
IntersectionObserver API, threshold, rootMargin, fade-in animation, CSS opacity and transform, observe and unobserve, performance vs scroll events
How to build a working contact form with JavaScript validation
form validation, preventDefault, required field checks, email regex, error message display, form submission feedback, Formspree integration
How to add an active nav link highlight based on scroll position
active navigation state, IntersectionObserver for nav, classList add and remove, data attributes, multiple section tracking, nav link selector matching
Writing Effective Project Descriptions
Students can write project descriptions and README files that communicate technical depth, business context, and problem-solving ability to both recruiters and developers.
How to write a project description that impresses recruiters
project description formula, problem statement, solution summary, tech stack mention, impact metrics, avoiding generic language, recruiter reading patterns
How to write a README that makes developers trust your project
README structure, badges, installation instructions, env variables, screenshots, contributing section, license, live demo link, tech stack table
How to document technical decisions in a project for interviews
architecture decision records, why over what documentation, trade-off discussion, technology choice rationale, known limitations, future improvements section
How to add a live demo GIF or screenshot to a portfolio project
screen recording tools, GIF creation, LICEcap, Kap, image optimization, WebP format, lazy loading images, alt text for accessibility, demo video embedding
How to tailor your portfolio project descriptions by job type
audience targeting, frontend vs backend roles, startup vs enterprise framing, emphasis on different skills, keyword alignment, role-specific language, ATS optimization
Deploying and Optimizing Your Portfolio
Students can deploy a live portfolio to a custom domain, configure HTTPS, and achieve a high Lighthouse performance score.
How to deploy a portfolio site to Vercel or Netlify for free
Vercel deployment, Netlify deployment, Git-based deployment, production branch, automatic deploys, deploy previews, environment variables in dashboard, free tier limits
How to connect a custom domain to a portfolio site
domain registrar, DNS records, CNAME record, A record, nameserver configuration, HTTPS provisioning, domain verification, propagation time
How to optimize portfolio performance with Lighthouse
Lighthouse audit, performance score, Core Web Vitals, LCP, CLS, FID, image optimization, font loading, render blocking, defer and async scripts
How to add SEO metadata to a portfolio site
meta title and description, Open Graph tags, Twitter Card meta, canonical URL, favicon setup, robots.txt, sitemap basics, structured data basics
How to monitor portfolio uptime and analytics without cookies
Vercel Analytics, Plausible, Fathom, privacy-first analytics, page views, referrer tracking, uptime monitoring, UptimeRobot, no GDPR cookie consent needed
Standing Out: GitHub Profile and Online Presence
Students can build a professional GitHub profile, optimize their LinkedIn for developer roles, and create a consistent online presence that reinforces their portfolio.
How to build a GitHub profile README that gets noticed
GitHub profile README, special repository, dynamic badges, GitHub stats widgets, pinned repositories, contribution graph, profile photo, bio optimization
How to keep a clean and consistent GitHub commit history
conventional commits, commit message format, atomic commits, amend last commit, squash commits, branch naming, meaningful commit frequency, .gitignore hygiene
How to optimize your LinkedIn profile as a developer
LinkedIn headline, About section, featured section, experience descriptions, skills endorsements, creator mode, open to work banner, connection strategy, keyword optimization
How to contribute to open source to strengthen your portfolio
finding first issues, good first issue label, forking repositories, pull request etiquette, issue selection, documentation contributions, bug fixes vs features, contribution as portfolio evidence
How to use your portfolio as a job application tool
portfolio URL in applications, tailoring portfolio per application, tracking portfolio visits, follow-up timing, cold outreach with portfolio link, referral strategy, portfolio update cadence