Portfolio Project Overview & Setup

Duration: 60–90 minutes

🎯 What You’ll Do

Understand the structure and goals of your personal portfolio website.[web:528][web:530]
Plan sections: Hero, About, Skills, Projects, Contact.[web:528][web:535]
Set up the project folder with HTML, CSS, and JS files.[web:531]

📺 Lesson Video (Embedded)

Watch this tutorial to see what a complete responsive portfolio looks like and how all the pieces fit together:

<br />

5.1 Project Goals

Your portfolio will be a single‑page site with smooth navigation to sections: Home, About, Skills, Projects, and Contact.[web:528][web:533] It should be responsive (mobile, tablet, desktop) and showcase your best work, skills, and a way to contact you.[web:530][web:535]

Use semantic HTML for structure.
Use CSS Flexbox/Grid and media queries for layout.[web:533][web:535]
Use JavaScript for mobile menu toggle and smooth scroll.

5.2 Folder & File Setup

portfolio/
  index.html
  /css
    style.css
  /js
    main.js
  /images
    (your photos, project screenshots)

Create this structure in VS Code (or your editor) so HTML, CSS, and JavaScript stay organized like a real project.[web:531][web:534]

5.3 Base HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Your Name | Portfolio</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <header>
    <nav class="nav">
      <div class="logo">YourName</div>
      <ul class="nav-links">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <button class="nav-toggle" aria-label="Toggle navigation">☰</button>
    </nav>
  </header>

  <main>
    <section id="home">Hero section here</section>
    <section id="about">About section here</section>
    <section id="skills">Skills section here</section>
    <section id="projects">Projects section here</section>
    <section id="contact">Contact section here</section>
  </main>

  <footer>
    <p>© <span id="year"></span> Your Name. All rights reserved.</p>
  </footer>

  <script src="js/main.js"></script>
</body>
</html>

5.4 Minimal Starter CSS

/* css/style.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: #0f172a;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

section {
  padding: 60px 0;
}

This gives a clean base so later lessons can focus on nav, hero layout, skills grid, and responsive design.[web:533][web:535]

5.5 Basic JS Setup (Footer Year)

// js/main.js
const yearSpan = document.getElementById("year");
yearSpan.textContent = new Date().getFullYear();

This tiny script confirms your JS is correctly connected and keeps the footer year updated automatically.[web:531]

🧪 Practice Task

Create the portfolio/ folder structure and base files exactly as shown.
Fill in your real name in the logo, title, and footer.
Add placeholder text in each section so you can see the structure in the browser.

Frontend Beginner

Curriculum

Portfolio Project Overview & Setup