Codexpal - Learn Programming Interactively

Lesson Content

Build Your Personal Portfolio Site 🚀

Create a stunning personal portfolio website that showcases your skills and projects. This is a real-world project you can use to land your first job!

What You'll Build

Hero section with your name and tagline
About section
Skills showcase
Projects portfolio
Contact form

HTML Structure

<!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>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section id="home">
      <h1>Hi, I'm [Your Name]</h1>
      <p>Web Developer & Designer</p>
    </section>
    
    <section id="about">
      <h2>About Me</h2>
      <p>Your story here...</p>
    </section>
    
    <section id="projects">
      <h2>My Projects</h2>
      <article>
        <h3>Project 1</h3>
        <p>Description...</p>
      </article>
    </section>
    
    <section id="contact">
      <h2>Get In Touch</h2>
      <form>
        <input type="text" placeholder="Your Name" required>
        <input type="email" placeholder="Your Email" required>
        <textarea placeholder="Message" required></textarea>
        <button type="submit">Send Message</button>
      </form>
    </section>
  </main>
  
  <footer>
    <p>&copy; 2024 Your Name. All rights reserved.</p>
  </footer>
</body>
</html>

Key HTML Elements

<header> - Site header
<nav> - Navigation menu
<main> - Main content
<section> - Content sections
<article> - Project cards
<form> - Contact form
<footer> - Site footer

Example Code

Create the basic HTML structure for a portfolio site

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
</head>
<body>
  <header>
    <h1>Your Name</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  
  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>I'm a web developer passionate about creating amazing websites.</p>
    </section>
  </main>
</body>
</html>

Expected Output:

Portfolio structure created successfully

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code