Final Project

Build your capstone portfolio website, explore front-end career paths, and discover real earning potential with HTML & CSS.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

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.

Congratulations! You've reached the end of the LearnCodingFast HTML & CSS course. You now understand:

🪙 Business Opportunities You Can Build

Many successful web agencies started with just HTML & CSS skills — you have everything you need to begin.

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.

Required Pages & Sections

Technical Checklist

Copy this starter code into a file called index.html and start customizing it:

🟢 Beginner Level

🔵 Intermediate Level

🟣 Expert Level

🎨 Design Resources

🚀 Where to Deploy

You've completed the entire HTML & CSS course! You now have the skills to build beautiful, responsive, and accessible websites from scratch.

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.