Project - 1

Project 1: Personal Portfolio Page

Build a personal portfolio that introduces you, shows your skills and projects, and gives visitors a way to contact you.

Your challenge: Create four sections: About, Skills, Projects, and Contact. Use HTML for structure, CSS for styling, and a small amount of JavaScript for interaction.

✦ HTML + CSS + JS Editor

▶ Live Output

1. Build the sections

Use headings and paragraphs to create your About section, a list for Skills, and separate blocks for your Projects.

Your Contact section can include an email link such as: <a href="mailto:[email protected]">Email Me</a>

2. Style the portfolio

Use CSS to control spacing, colors, typography, and project cards. Keep the design readable on both large and small screens.

3. Add a little JavaScript

Add a button that changes some text, shows a message, or performs another simple interaction using addEventListener().

Project checklist: Your finished page should include About, Skills, Projects, Contact, your own CSS styling, and at least one small JavaScript interaction.

Good project habit: Build the HTML structure first, style it second, and add JavaScript after the page already works without it.

👀 Show Full Working Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jordan Lee - Portfolio</title>

  <style>
    body {
      background: #000;
      color: #8A8A8A;
      font-family: 'Courier New', monospace;
      margin: 0;
      line-height: 1.6;
    }

    header {
      background: #111;
      padding: 60px 20px;
      text-align: center;
    }

    h1 {
      color: #fff;
      font-size: 3rem;
      margin: 0;
    }

    h2,
    h3 {
      color: #fff;
    }

    .section {
      max-width: 900px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .project {
      background: #111;
      padding: 18px;
      margin: 15px 0;
      border-radius: 8px;
    }

    a {
      color: #fff;
    }

    button {
      padding: 10px 16px;
      margin-top: 10px;
      cursor: pointer;
    }

    button:focus-visible,
    a:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }
  </style>
</head>

<body>

  <header>
    <h1>Jordan Lee</h1>
    <p>Beginner Web Developer</p>
  </header>

  <main>

    <section class="section">
      <h2>About Me</h2>

      <p>
        I enjoy building simple websites and practicing
        HTML, CSS, and JavaScript.
      </p>

      <button id="messageBtn" type="button">
        Show Message
      </button>

      <p id="message"></p>
    </section>

    <section class="section">
      <h2>Skills</h2>

      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>

    <section class="section">
      <h2>Projects</h2>

      <article class="project">
        <h3>To-Do List</h3>
        <p>
          A small app for adding and removing tasks.
        </p>
      </article>

      <article class="project">
        <h3>Image Slider</h3>
        <p>
          A simple slider with Previous and Next buttons.
        </p>
      </article>
    </section>

    <section class="section">
      <h2>Contact</h2>

      <p>
        <a href="mailto:[email protected]">
          [email protected]
        </a>
      </p>
    </section>

  </main>

  <script>
    const messageBtn =
      document.getElementById("messageBtn");

    const message =
      document.getElementById("message");

    messageBtn.addEventListener("click", function() {
      message.textContent =
        "Thanks for visiting my portfolio!";
    });
  </script>

</body>
</html>