• in
InterCourses
CoursesBlogs
0
← Introduction to HTML
○What Is HTML? See Tags in Action○Exercise: Build the Meridian Signal○Complete HTML5 Page Structure: See It in Action○Exercise: Build a Complete HTML5 Page✦Module Quiz
○Heading Hierarchy Demo: H1 and H2○Exercise: Extend the Signal Brief○Paragraphs and Inline Tags Demo○Exercise: Write Meridian's Survey Notes○List Types Demo: Steps, Items, and Terms○Exercise: Build a Crew member Loadout○Challenge: Transmit a Rescue Signal✦Module Quiz
○Hyperlinks○Images○Applying Styles to HTML✦Module Quiz
○Div and Span○HTML Tables○Classes and IDs○Review: Structured Profile✦Module Quiz
●Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions✦Module Quiz
○The Head Element and Page Title○Meta Tags○HTML Entities✦Module Quiz
○Form Basics Demo: Join the Meridian Relay○Exercise: Build a Night-Shift Check-In○Input Types Demo: Build a Mission Profile○Exercise: Record Beacon Maintenance○Choice Controls Demo: Select Training Modes○Exercise: Plan a Supply Pickup○Response Controls Demo: Send a Mission Reply○Exercise: Build a Rescue Dispatch Report○Challenge: Send an Emergency Beacon✦Module Quiz
○Project 2 - Contact Us Form Structure○Project 2 - Contact Us Form Actions✦Module Quiz
○Embedding Video○Embedding Audio○Iframes✦Module Quiz
○Semantic HTML Tags○Details, Figure, and Figcaption✦Module Quiz
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions✦Module Quiz

Project 1 - Visiting Card Structure

Project 1: Create a Visiting Card (Structure)

Mission

The neighborhood skills map is collecting profiles for people who can help at community events. Build a visiting card for one contributor so someone can see their name, role, portrait, and contact details at a glance.

What you'll build

A single card with a name, a role, an accessible profile image, and a contact list that uses inline labels and values.

Build the card in layers

Start with one outer <div class="card">. That wrapper keeps the card's pieces together. Place the person's name in an <h1> and their role in a paragraph.

html
<div class="card">
    <h1>Samira Holt</h1>
    <p>Community map illustrator</p>
</div>

Add a profile image with text that describes the image, not just the filename. Then use a second <div> for a contact list. Inside each list item, <span> can keep a short label separate from its value.

html
<div class="contact">
    <ul>
        <li><span>Email:</span> <span>[email protected]</span></li>
        <li><span>Area:</span> <span>River district</span></li>
    </ul>
</div>

Checkpoint

Run the page. You should see one card containing a name, a role, an image, and a short contact list. If contact details appear outside the card, check that the contact <div> closes before the outer card closes.

Your Task

  1. Create an outer <div class="card"> for the contributor.
  2. Add the contributor’s name in an <h1> inside the card.
  3. Add their role in a paragraph inside the card.
  4. Add a profile <img> with a working src and descriptive alt inside the card.
  5. Inside the card, add a nested <div class="contact"> with a <ul> containing at least two contact items.
  6. In two contact items, use separate <span> elements for a non-empty label and value.

Payoff

The map now has a clear contributor card that is ready for real contact links.

Hint 1
1 / 4
HINT 1

Use <div> containers to group card blocks (profile, role, contact).

HINT 2

Use <span> for small inline details like labels and values.

HINT 3

Add profile image with meaningful alt text.

HINT 4

A visiting card should include name, role, and at least one contact method.

Loading editor…
READY
intercourses
html