Nested elements in HTML - Mini Project: Build & Apply

Building a Simple Profile Card with Nested Elements

📖 Scenario: You want to create a simple profile card on a webpage that shows a person's name, a short description, and a profile picture. To organize this information clearly, you will use nested HTML elements.

🎯 Goal: Build a profile card using nested HTML elements including a section as the container, a header for the name, a p for the description, and an img for the profile picture inside the section.

📋 What You'll Learn

Use a section element with the class profile-card as the main container.

Inside the section, add a header element containing the person's name.

Add a p element inside the section for the description text.

Include an img element inside the section for the profile picture with alt text for accessibility.

💡 Why This Matters

🌍 Real World

Profile cards are common on websites to show user or team member information in a clear, organized way.

💼 Career

Understanding how to nest HTML elements properly is essential for building accessible and well-structured web pages.

1

Create the main container section with class profile-card

Write a section element with the class attribute set to profile-card. This will be the main container for the profile card.

HTML

Need a hint?

Use the section tag and add class="profile-card" inside the opening tag.

2

Add a header element with the name inside the section

Inside the section with class profile-card, add a header element containing the text Jane Doe.

HTML

Need a hint?

Use the header tag inside the section and type the exact name Jane Doe inside it.

3

Add a p element with a description inside the section

Below the header inside the section, add a p element with the text Web developer and coffee lover.

HTML

  Jane Doe
  

Need a hint?

Use the p tag inside the section and write the exact description text.

4

Add an img element for the profile picture inside the section

Inside the section with class profile-card, add an img element with src="profile.jpg" and alt="Profile picture of Jane Doe" attributes.

HTML

  Jane Doe
  Web developer and coffee lover.
  

Need a hint?

Use the img tag with the exact src and alt attributes inside the section.