Lesson 16 of 18
Portfolio Project — Part 1 🏠
What You'll Learn
- Plan and design a personal portfolio website
- Build the HTML structure
- Style with CSS to match your design
What You Are Building
A portfolio site is a personal website that shows off your skills and projects. Developers use them to get jobs and internships. Yours will include:
- 🏠 Hero section — your name, title, and call to action
- 👔 About section — who you are and what you want to build
- 📊 Skills section — technologies you know
- 📅 Projects section — things you have built
- 📧 Contact section — email or form
HTML Structure
HTML
<body>
<nav class="navbar">...</nav>
<section class="hero" id="home">
<h1>Hi, I'm <span class="highlight">Your Name</span></h1>
<p>I build things for the web.</p>
<a href="#projects" class="btn">See My Work</a>
</section>
<section class="about" id="about">...</section>
<section class="skills" id="skills">...</section>
<section class="projects" id="projects">...</section>
<section class="contact" id="contact">...</section>
<footer>...</footer>
</body>CSS Foundation
CSS
:root {
--primary: #00C853;
--dark: #0A1628;
--text: #F8FAFC;
--gray: #94A3B8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: var(--dark); color: var(--text); }
section { padding: 6rem 3rem; }
.section-inner { max-width: 1200px; margin: 0 auto; }Build the Foundation
By the end of today: a complete HTML structure with all sections, a CSS file with variables and base styles, a styled navbar with your name and navigation links, and a hero section that looks great. Save frequently and preview in the browser!
Quick Check
What is a portfolio website used for?
What CSS unit stores a reusable value (like a brand color)?
What does max-width: 1200px on a section-inner div do?