Hero & About Sections

Duration: 60–90 minutes

🎯 What You’ll Build

• A responsive hero section with your name, role, short intro, and call‑to‑action button.[web:548][web:552][web:553]
• A clean About section describing who you are, what you do, and what technologies you use.[web:541][web:552]

📺 Lesson Video (Embedded)

Watch this tutorial to see how to design and style a modern hero section for a portfolio homepage:

5.2.1 Hero Section HTML

<section id="home" class="hero">
  <div class="hero-text">
    <p class="hero-greeting">Hi, I am</p>
    <h1 class="hero-name">Your Name</h1>
    <p class="hero-role">Frontend Developer</p>
    <p class="hero-description">
      I build fast, responsive, and user‑friendly web experiences using
      HTML, CSS, and JavaScript.
    </p>
    <div class="hero-actions">
      <a href="#projects" class="btn primary-btn">View Projects</a>
      <a href="#contact" class="btn secondary-btn">Contact Me</a>
    </div>
  </div>

  <div class="hero-image-wrapper">
    <img src="images/profile.jpg" alt="Photo of Your Name" class="hero-image" />
  </div>
</section>

You can replace the image path and text with your real photo and description.[web:552][web:535]

5.2.2 Hero Section CSS

.hero {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 24px;
  padding-top: 80px;
}

.hero-text {
  text-align: center;
}

.hero-greeting {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
}

.hero-name {
  font-size: 2.5rem;
  margin: 8px 0;
}

.hero-role {
  font-size: 1.2rem;
  font-weight: 500;
  color: #2563eb;
  margin-bottom: 12px;
}

.hero-description {
  max-width: 520px;
  margin: 0 auto 16px;
  color: #4b5563;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.primary-btn {
  background-color: #2563eb;
  color: #ffffff;
}

.secondary-btn {
  background-color: #ffffff;
  color: #2563eb;
  border-color: #2563eb;
}

.hero-image-wrapper {
  display: flex;
  justify-content: center;
}

.hero-image {
  width: 180px;
  height: 180px;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid #2563eb;
}

/* Larger screens: hero split in two columns */
@media (min-width: 900px) {
  .hero {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 80vh;
  }

  .hero-text {
    text-align: left;
    max-width: 520px;
  }

  .hero-actions {
    justify-content: flex-start;
  }
}

This layout stacks content on mobile and switches to a two‑column hero with image on larger screens.[web:553][web:552]

5.2.3 About Section HTML

<section id="about" class="about">
  <h2 class="section-title">About Me</h2>
  <div class="about-content">
    <div class="about-text">
      <p>
        I am a frontend developer focused on building clean, accessible, and
        performant web applications. I enjoy turning designs into real
        products and improving user experience with small details.
      </p>
      <p>
        Currently I am learning modern JavaScript, responsive design, and
        frontend tools to become a professional frontend engineer.
      </p>
    </div>
    <div class="about-highlights">
      <h3>Technologies</h3>
      <ul>
        <li>HTML5 & Semantic markup</li>
        <li>CSS3, Flexbox, Grid, Responsive design</li>
        <li>JavaScript (DOM, events, arrays, basic projects)</li>
      </ul>
    </div>
  </div>
</section>

5.2.4 About Section CSS

.section-title {
  font-size: 1.8rem;
  margin-bottom: 24px;
  text-align: center;
}

.about-content {
  display: grid;
  gap: 24px;
}

.about-text p {
  margin-bottom: 12px;
  color: #4b5563;
}

.about-highlights h3 {
  margin-bottom: 8px;
}

.about-highlights ul {
  margin: 0;
  padding-left: 20px;
  color: #4b5563;
}

/* Larger screens: two columns */
@media (min-width: 900px) {
  .about-content {
    grid-template-columns: 2fr 1fr;
    align-items: flex-start;
  }

  .section-title {
    text-align: left;
  }
}

The About section uses CSS Grid so text and highlights sit side by side on desktop and stack on mobile.[web:552][web:553]

🧪 Practice Task

1. Replace “Your Name”, role, description, and image with your real details.
2. Customize button texts to match your goals (for example, “Download CV”, “Hire Me”).
3. Update About text to describe your background, current learning, and target roles.