• 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 Actions

Project 1: Visiting Card (Links and Actions)

Mission

Riya’s card already shows her portrait and contact list from the previous lesson. Now make those details actionable. The contributor card is useful only if a visitor can act on it. Add direct ways to email, call, and view the contributor's work, plus one clear next step. In the preview, each action should look like a link a visitor can use.

What you'll build

A visiting card with four usable action links: email (mailto:), phone (tel:), external portfolio (opens in new tab), and a clear call-to-action.

Link to an action

An anchor can open an email app or phone app when its href starts with mailto: or tel:.

html
<a href="mailto:[email protected]">Email Samira</a>
<a href="tel:555-0100">Call Samira</a>

For a portfolio on another site, use its complete URL. target="_blank" opens it in a new tab.

html
<a href="https://example.com" target="_blank">View portfolio</a>

Use words that describe the destination or action. A call-to-action can still be an ordinary anchor; its label should tell the visitor what happens next.

html
<a href="mailto:[email protected]">Ask about a map project</a>

Checkpoint

Run the page and inspect the links. The email link should begin with mailto:, the phone link with tel:, and the external portfolio link should open in a new tab. If a link is plain text, make sure it is inside <a> and has an href.

Your Task

  1. In the supplied card’s <nav>, add an email link whose mailto: address matches the contact list.
  2. Add a phone link whose tel: number matches the contact list (digits, optionally starting with +).
  3. Add an external portfolio link that opens in a new tab with target="_blank" and rel="noopener noreferrer".
  4. Add a distinct call-to-action link with a descriptive invitation and a real href, such as an email inquiry.

Payoff

The visiting card now turns a quick introduction into useful, visible actions.

Hint 1
1 / 2
HINT 1

Use anchor links for email (mailto:) and phone (tel:).

HINT 2

External links should open in new tab with target="_blank".

Take the Quiz →
Loading editor…
READY
intercourses
html