Project: Your Portfolio
Time to put everything into practice! Let's create a professional portfolio from scratch.
What We'll Build
A personal website with:
- Header with navigation
- Hero section (introduction)
- About section
- Skills section
- Projects section
- Contact form
- Footer
File Structure
portfolio/
├── index.html
├── style.css
└── script.js
Complete HTML
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Your Name | Developer</title> <link rel="stylesheet" href="style.css"></head><body> <!-- Header --> <header id="header"> <nav class="nav"> <a href="#" class="logo">YourName</a> <ul class="nav-list"> <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 id="btn-theme">🌙</button> </nav> </header> <!-- Hero --> <section class="hero"> <div class="hero-content"> <p class="hero-subtitle">Hi, I'm</p> <h1 class="hero-title">Your Name</h1> <p class="hero-description"> Developer in training, passionate about creating solutions with code. </p> <div class="hero-buttons"> <a href="#projects" class="btn btn-primary">View Projects</a> <a href="#contact" class="btn btn-outline">Contact</a> </div> </div> </section> <!-- About --> <section id="about" class="section"> <div class="container"> <h2 class="section-title">About Me</h2> <div class="about-content"> <div class="about-text"> <p> Hi! My name is [Your Name] and I'm transitioning into the tech industry. I discovered my passion for programming in 2026 and have been studying daily ever since. </p> <p> My goal is to become a complete developer, creating solutions that positively impact people's lives. </p> <p> When I'm not programming, I enjoy [your hobbies]. </p> </div> </div> </div> </section> <!-- Skills --> <section id="skills" class="section section-alt"> <div class="container"> <h2 class="section-title">Skills</h2> <div class="skills-grid"> <div class="skill-card"> <span class="skill-icon">📄</span> <h3>HTML</h3> <p>Semantic web page structuring</p> </div> <div class="skill-card"> <span class="skill-icon">🎨</span> <h3>CSS</h3> <p>Styling and responsive layouts</p> </div> <div class="skill-card"> <span class="skill-icon">⚡</span> <h3>JavaScript</h3> <p>Interactivity and programming logic</p> </div> <div class="skill-card"> <span class="skill-icon">🔧</span> <h3>Git</h3> <p>Version control and collaboration</p> </div> </div> </div> </section> <!-- Projects --> <section id="projects" class="section"> <div class="container"> <h2 class="section-title">Projects</h2> <div class="projects-grid"> <article class="project-card"> <div class="project-image"> <img src="https://via.placeholder.com/400x250" alt="Project 1"> </div> <div class="project-info"> <h3>Todo List</h3> <p>App to manage daily tasks with localStorage.</p> <div class="project-tags"> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> </div> <div class="project-links"> <a href="#" class="btn btn-small">View Project</a> <a href="#" class="btn btn-small btn-outline">GitHub</a> </div> </div> </article> <article class="project-card"> <div class="project-image"> <img src="https://via.placeholder.com/400x250" alt="Project 2"> </div> <div class="project-info"> <h3>Calculator</h3> <p>Functional calculator with modern design.</p> <div class="project-tags"> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> </div> <div class="project-links"> <a href="#" class="btn btn-small">View Project</a> <a href="#" class="btn btn-small btn-outline">GitHub</a> </div> </div> </article> </div> </div> </section> <!-- Contact --> <section id="contact" class="section section-alt"> <div class="container"> <h2 class="section-title">Contact</h2> <p class="section-subtitle"> Want to work together or have a question? Get in touch! </p> <form id="contact-form" class="contact-form"> <div class="form-group"> <input type="text" id="name" placeholder="Your name" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="Your email" required> </div> <div class="form-group"> <textarea id="message" placeholder="Your message" rows="5" required></textarea> </div> <button type="submit" class="btn btn-primary btn-full">Send Message</button> </form> <div id="form-success" class="form-success" hidden> ✅ Message sent successfully! </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-social"> <a href="https://github.com/youruser" target="_blank">GitHub</a> <a href="https://linkedin.com/in/youruser" target="_blank">LinkedIn</a> </div> <p>© 2026 Your Name. All rights reserved.</p> </div> </footer> <script src="script.js"></script></body></html>Complete CSS
css
/* Reset and variables */* { margin: 0; padding: 0; box-sizing: border-box;} :root { --color-primary: #6366f1; --color-primary-hover: #4f46e5; --color-text: #1f2937; --color-text-light: #6b7280; --color-bg: #ffffff; --color-bg-alt: #f3f4f6; --color-border: #e5e7eb;} body.dark-mode { --color-text: #f3f4f6; --color-text-light: #9ca3af; --color-bg: #111827; --color-bg-alt: #1f2937; --color-border: #374151;} body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--color-bg); color: var(--color-text); line-height: 1.6;} /* Container */.container { max-width: 1100px; margin: 0 auto; padding: 0 20px;} /* Header */#header { position: fixed; top: 0; left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); z-index: 1000;} .nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; max-width: 1100px; margin: 0 auto;} .logo { font-size: 1.5rem; font-weight: bold; color: var(--color-primary); text-decoration: none;} .nav-list { display: flex; list-style: none; gap: 30px;} .nav-list a { color: var(--color-text); text-decoration: none; transition: color 0.3s;} .nav-list a:hover { color: var(--color-primary);} #btn-theme { background: none; border: none; font-size: 1.5rem; cursor: pointer;} /* Hero */.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 20px 40px;} .hero-subtitle { color: var(--color-primary); font-size: 1.1rem; margin-bottom: 10px;} .hero-title { font-size: 3.5rem; margin-bottom: 20px;} .hero-description { font-size: 1.2rem; color: var(--color-text-light); max-width: 500px; margin: 0 auto 30px;} .hero-buttons { display: flex; gap: 15px; justify-content: center;} /* Buttons */.btn { display: inline-block; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s; cursor: pointer; border: none; font-size: 1rem;} .btn-primary { background: var(--color-primary); color: white;} .btn-primary:hover { background: var(--color-primary-hover);} .btn-outline { border: 2px solid var(--color-primary); color: var(--color-primary); background: transparent;} .btn-outline:hover { background: var(--color-primary); color: white;} .btn-small { padding: 8px 16px; font-size: 0.9rem;} .btn-full { width: 100%;} /* Sections */.section { padding: 80px 0;} .section-alt { background: var(--color-bg-alt);} .section-title { font-size: 2rem; text-align: center; margin-bottom: 50px;} .section-subtitle { text-align: center; color: var(--color-text-light); margin-bottom: 30px;} /* About */.about-text p { margin-bottom: 15px; color: var(--color-text-light);} /* Skills */.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px;} .skill-card { background: var(--color-bg); padding: 30px; border-radius: 12px; text-align: center; border: 1px solid var(--color-border); transition: transform 0.3s;} .skill-card:hover { transform: translateY(-5px);} .skill-icon { font-size: 2.5rem; display: block; margin-bottom: 15px;} .skill-card h3 { margin-bottom: 10px;} .skill-card p { color: var(--color-text-light); font-size: 0.9rem;} /* Projects */.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px;} .project-card { background: var(--color-bg); border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border);} .project-image img { width: 100%; height: 200px; object-fit: cover;} .project-info { padding: 20px;} .project-info h3 { margin-bottom: 10px;} .project-info p { color: var(--color-text-light); margin-bottom: 15px;} .project-tags { display: flex; gap: 10px; margin-bottom: 15px;} .project-tags span { background: var(--color-bg-alt); padding: 4px 12px; border-radius: 20px; font-size: 0.8rem;} .project-links { display: flex; gap: 10px;} /* Form */.contact-form { max-width: 500px; margin: 0 auto;} .form-group { margin-bottom: 20px;} .contact-form input,.contact-form textarea { width: 100%; padding: 15px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 1rem; background: var(--color-bg); color: var(--color-text);} .contact-form input:focus,.contact-form textarea:focus { outline: none; border-color: var(--color-primary);} .form-success { text-align: center; padding: 20px; background: #d1fae5; color: #065f46; border-radius: 8px; margin-top: 20px;} /* Footer */.footer { text-align: center; padding: 30px; border-top: 1px solid var(--color-border);} .footer-social { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px;} .footer-social a { color: var(--color-text); text-decoration: none;} .footer-social a:hover { color: var(--color-primary);} /* Responsive */@media (max-width: 768px) { .nav-list { display: none; } .hero-title { font-size: 2.5rem; } .hero-buttons { flex-direction: column; }}JavaScript
javascript
// Dark/Light themeconst btnTheme = document.querySelector('#btn-theme'); btnTheme.addEventListener('click', () => { document.body.classList.toggle('dark-mode'); btnTheme.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';}); // Contact formconst form = document.querySelector('#contact-form');const formSuccess = document.querySelector('#form-success'); form.addEventListener('submit', (e) => { e.preventDefault(); // Simulate sending form.style.display = 'none'; formSuccess.hidden = false; // Clear after 3 seconds setTimeout(() => { form.reset(); form.style.display = 'block'; formSuccess.hidden = true; }, 3000);}); // Smooth scroll for linksdocument.querySelectorAll('a[href^="#"]').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const id = link.getAttribute('href'); document.querySelector(id)?.scrollIntoView({ behavior: 'smooth' }); });});Next Steps
- Personalize with your information
- Add real projects as you create them
- Host for free on GitHub Pages or Vercel
- Continuously improve as you learn more
Congratulations! You created your first complete project! 🎉
In the next lesson, we'll talk about next steps in your career! 🚀