Phase 5 — Tooling & Production

#20 Final project

Build a complete responsive website

Final project: portfolio website

Put everything together by building a complete, responsive portfolio website. This project uses all the HTML & CSS skills from the course.

Project structure

File structure

portfolio/
  index.html
  about.html
  projects.html
  src/
    scss/
      _variables.scss
      _mixins.scss
      _reset.scss
      _base.scss
      _header.scss
      _hero.scss
      _projects.scss
      _footer.scss
      main.scss
  dist/
    css/
      main.css
  images/
    hero.jpg
    project-1.jpg
  package.json

HTML structure

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="dist/css/main.css">
</head>
<body>
  <header class="header">
    <nav class="nav">
      <a href="/" class="nav__logo">Portfolio</a>
      <ul class="nav__links">
        <li><a href="#projects">Projects</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero">...</section>
    <section class="projects" id="projects">...</section>
    <section class="about" id="about">...</section>
    <section class="contact" id="contact">...</section>
  </main>

  <footer class="footer">...</footer>
</body>
</html>

Sass setup

main.scss

@use "variables" as *;
@use "mixins" as *;
@use "reset";
@use "base";
@use "header";
@use "hero";
@use "projects";
@use "footer";

_variables.scss

$color-primary: #3b82f6;
$color-text: #1a1a2e;
$color-muted: #6b6b85;
$color-bg: #f8f7f4;
$font-sans: "Inter", system-ui, sans-serif;
$radius: 12px;
$shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

Responsive grid

_projects.scss

.projects {
  padding: 64px 24px;
  max-width: 1200px;
  margin: 0 auto;

  &__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }

  &__card {
    border-radius: $radius;
    overflow: hidden;
    box-shadow: $shadow;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-4px);
    }
  }
}

Build and deploy

Build steps

# Install dependencies
npm install sass autoprefixer postcss postcss-cli cssnano

# Development with watch
npm run dev

# Production build
npm run build

# Deploy the dist/ folder to your hosting provider

Your turn

Try the project commands below to set up and build your portfolio:

terminal — npm

Lesson 19Performance