Final Project
Build your capstone portfolio website, explore front-end career paths, and discover real earning potential with HTML & CSS.
Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
What You'll Learn in This Lesson
🎉 Welcome to the Final Step
Congratulations! You've reached the end of the LearnCodingFast HTML & CSS course. You now understand:
- ✔ Semantic HTML5 structure & accessibility
- ✔ CSS Flexbox, Grid, and modern layouts
- ✔ Responsive design & media queries
- ✔ Animations, transforms & transitions
- ✔ CSS custom properties & design systems
- ✔ Performance optimization & best practices
- Build a real portfolio website
- Show employers & clients your capability
- Start freelancing or apply for jobs
- Launch your own web projects
What You Can Do with HTML & CSS
Career Path
Typical Role
Core Skills
Average Salary (UK 2025)
Global Range (USD)
Front-End Developer
Build user interfaces & interactive sites
HTML, CSS, JS, React
£35,000 – £65,000
$55,000 – $110,000
UI/UX Designer
Design & prototype web experiences
CSS, Figma, Design Systems
£30,000 – £60,000
$50,000 – $100,000
Web Designer
Create visually stunning websites
HTML, CSS, WordPress
£25,000 – £50,000
$40,000 – $80,000
Email Developer
Build responsive email templates
HTML, CSS, Email clients
£30,000 – £55,000
$45,000 – $90,000
WordPress Developer
Build & customize WordPress sites
HTML, CSS, PHP basics
£28,000 – £55,000
$40,000 – $85,000
Freelancer
Build websites for clients
All of the above
£20 – £75 / hour
$25 – $100 / hour
🪙 Business Opportunities You Can Build
- • Freelance web design agency — build sites for local businesses.
- • Template marketplace — sell HTML/CSS templates on ThemeForest or Gumroad.
- • Landing page service — create high-converting landing pages for startups.
- • Email template business — design responsive email templates for marketers.
- • Online courses & tutorials — teach others what you've learned.
Many successful web agencies started with just HTML & CSS skills — you have everything you need to begin.
Your Capstone Project: Portfolio Website
Build a complete, professional portfolio website that showcases your skills. This is your "proof of mastery" — something you can share with employers, clients, or on your GitHub profile.
Project Requirements
Required Pages & Sections
- Homepage / Hero Section — Eye-catching introduction with your name and tagline
- About Section — Your background, skills, and what you do
- Projects Section — Showcase 3–6 projects with images and descriptions
- Skills Section — Your technical skills organized visually
- Contact Section — Contact form and/or contact information
- Navigation — Sticky or fixed navigation bar
- Footer — Social media links, copyright, additional info
Technical Checklist
HTML Best Practices
- • Semantic elements (header, nav, main, section, footer)
- • Proper heading hierarchy (h1 → h2 → h3)
- • Descriptive alt text on all images
- • Valid, well-structured markup
CSS Best Practices
- • Flexbox or Grid for layouts
- • CSS custom properties for theming
- • Smooth transitions & animations
- • Mobile-first responsive design
Responsive Design
- • Works on mobile (320px+), tablet, desktop
- • Responsive images
- • Touch-friendly buttons (44×44px min)
Accessibility
- • Keyboard navigable
- • Color contrast 4.5:1 for text
- • Form labels and ARIA where needed
Starter Template
Copy this starter code into a file called index.html and start customizing it:
Features to Showcase Your Skill Level
🟢 Beginner Level
- • Hover effects on links and buttons
- • Image gallery with captions
- • Custom styled contact form
- • Consistent colour scheme
🔵 Intermediate Level
- • CSS Grid layout for projects section
- • Smooth scroll navigation
- • Animated skill bars or progress indicators
- • Card flip or reveal effects
- • Mobile hamburger menu (CSS only)
🟣 Expert Level
- • Dark/light theme toggle with CSS custom properties
- • 3D transform effects on project cards
- • Scroll-triggered animations
- • CSS-only modals and accordions
- • Custom cursor effects and blend modes
Development Tips
- 1. Start with structure — Build all your HTML first, then add CSS styling.
- 2. Mobile-first — Design for mobile screens first, then add desktop styles with media queries.
- 3. Use placeholders — Start with placeholder images and lorem ipsum text while building layout.
- 4. Test frequently — Check in Chrome, Firefox, Safari and on real mobile devices.
- 5. Use DevTools — Right-click → Inspect to debug CSS issues and test responsive breakpoints.
- 6. Deploy it — Use GitHub Pages or Netlify to put your site live for free!
Free Resources & Inspiration
🎨 Design Resources
- • Unsplash.com — Free high-quality images
- • Google Fonts — Free web fonts
- • Font Awesome — Free icons
- • Coolors.co — Colour palette generator
- • CSS Gradient — Gradient generator tool
🚀 Where to Deploy
- • GitHub Pages — Free hosting for static sites
- • Netlify — Drag-and-drop deployment
- • Vercel — Fast, free hosting
- • Cloudflare Pages — Free with custom domains
📘 Quick Reference — Portfolio Checklist
Category
Requirement
Why It Matters
Structure
Semantic HTML5 tags
SEO & accessibility
Layout
Flexbox + Grid
Modern, flexible layouts
Responsive
Mobile-first design
50%+ traffic is mobile
Typography
Custom fonts + hierarchy
Professional appearance
Interactivity
Hover effects & transitions
Polished user experience
Accessibility
Contrast, alt text, keyboard nav
Inclusive & professional
Performance
Optimized images, minimal CSS
Fast load times
🎉 Congratulations — Course Complete!
You've completed the entire HTML & CSS course! You now have the skills to build beautiful, responsive, and accessible websites from scratch.
- Complete your portfolio — build it, deploy it, share it
- Learn JavaScript — add interactivity and dynamic features
- Build more projects — practice with real-world sites
- Start freelancing — offer your skills on Fiverr, Upwork, or locally
Keep building, keep learning, and never stop creating! 🚀
Practice quiz
Which set of elements reflects good semantic structure for a portfolio page?
- header, nav, main, section, footer
- div, div, div, div, div
- table, tr, td only
- span, b, i, font
Answer: header, nav, main, section, footer. Semantic landmarks (header, nav, main, section, footer) give the page structure for SEO and accessibility.
What does 'mobile-first' responsive design mean?
- Designing for mobile screens first, then enhancing for larger screens with media queries
- Only supporting mobile devices
- Building the desktop layout first and shrinking it
- Using a separate mobile-only website
Answer: Designing for mobile screens first, then enhancing for larger screens with media queries. Mobile-first starts with the small-screen layout and layers on desktop styles via media queries.
Which CSS feature is recommended for theming a portfolio (e.g. a dark/light toggle)?
- Inline styles on every element
- CSS custom properties (variables)
- Many duplicate stylesheets
- JavaScript only
Answer: CSS custom properties (variables). CSS custom properties centralize theme values so a toggle can swap them everywhere at once.
What is the recommended minimum touch target size for buttons on mobile?
- 10x10px
- 24x24px
- 44x44px
- 100x100px
Answer: 44x44px. The lesson recommends touch-friendly buttons of at least 44x44px.
What is the recommended minimum color contrast ratio for body text?
- 1:1
- 2:1
- 4.5:1
- 10:1
Answer: 4.5:1. A contrast ratio of at least 4.5:1 for text keeps content readable and accessible.
Which declaration creates a responsive projects grid without media queries?
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- display: block;
- float: left; width: 33%;
- grid-template-columns: 250px 250px 250px;
Answer: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));. auto-fit with minmax lets the project cards reflow automatically as the viewport changes.
Why should every <img> include descriptive alt text?
- It speeds up image loading
- It supports accessibility (screen readers) and SEO
- It is required for the image to display
- It changes the image size
Answer: It supports accessibility (screen readers) and SEO. alt text helps screen-reader users and search engines understand the image.
Which free hosting options does the lesson suggest for deploying a static portfolio?
- GitHub Pages, Netlify, or Vercel
- A paid dedicated server only
- Email attachments
- A local file with no hosting
Answer: GitHub Pages, Netlify, or Vercel. The lesson recommends free static hosting like GitHub Pages, Netlify, and Vercel.
Which development workflow tip does the lesson recommend?
- Write all CSS before any HTML
- Build the HTML structure first, then add CSS styling
- Skip testing on real devices
- Avoid using browser DevTools
Answer: Build the HTML structure first, then add CSS styling. The lesson advises building structure (HTML) first and then styling it with CSS.
Which pair of layout tools is recommended for a modern portfolio's layouts?
- Tables and frames
- Flexbox and CSS Grid
- Only absolute positioning
- Inline-block hacks only
Answer: Flexbox and CSS Grid. Flexbox (one-dimensional) and Grid (two-dimensional) are the modern layout tools to combine.
Continue this course
- Previous: Accessibility