• in
InterCourses
CoursesBlogs
0
← Introduction to HTML
○What is HTML?○Elements, Tags, and Attributes○Your First Complete Page
○Headings and Comments○Paragraphs, Emphasis, and Line Breaks○HTML Lists
○Hyperlinks○Images○Applying Styles to HTML
○Div and Span○HTML Tables○Classes and IDs
●Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions
○The Head Element and Page Title○Meta Tags○HTML Entities
○HTML Forms○Input Types○Checkboxes and Radio Buttons○Textarea and Select
○Embedding Video○Embedding Audio○Iframes
○Semantic HTML Tags○Details, Figure, and Figcaption
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions

Project 1 - Visiting Card Structure

Project 1: Create a Visiting Card (Structure)

In this project, you will build a professional visiting card page using core HTML tags.

Goal

Create a clean visiting card with identity, short bio, and contact details.

Requirements

  1. Add one outer card container using <div class="card">.
  2. Add an <h1> with your name and a <p> with your role/title.
  3. Add an <img> profile image with non-empty alt text.
  4. Add a contact block using another <div> containing a <ul> with at least 2 <li> items.
  5. In at least 2 list items, use <span> to separate label and value (example: Email: and the email address).

Example idea

You can include phone, email, website, and location.

Hint 1
1 / 4
HINT 1

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

Loading editor…
READY
intercourses
html