A profile card – JavaScript Exercise with Solution

Build the page that a script could later bring to life.

What to build

A profile card made with real elements and simple CSS.

Requirements

An element with the class card holds everything.
Inside it: an h1 with a name, a p with the class role, and a ul of at least two skills.
The card has padding, a max-width, and automatic side margins to centre it.

Constraints

Use only HTML and CSS here. No script is needed.

Example

<p class="role">Web developer</p>

Why it works

Using a real heading and a real list gives the page a structure that browsers, screen readers and later your own scripts can all understand.

Hints

Hint 1

Group the card in a div with class="card".

Hint 2

Use h1 for the name, p class="role" for the job, and a ul for the skills.

Hint 3

margin: 16px auto centres a box with a limited width.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Profile</title>
  <style>
    .card { max-width: 320px; margin: 16px auto; padding: 16px; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Mitu Akter</h1>
    <p class="role">Web developer</p>
    <ul>
      <li>HTML and CSS</li>
      <li>JavaScript</li>
    </ul>
  </div>
</body>
</html>

Lesson: HTML and CSS →