Mini-project: a profile card

English

Your mini-project

Time to put it all together and build a profile card.
Here is what you are aiming for:

Tiếng Việt

Dự án mini của bạn

Đã đến lúc kết hợp tất cả lại và xây dựng một thẻ hồ sơ cá nhân (profile card).
Dưới đây là những gì bạn đang hướng tới:

<style>
  .card { width: 280px; margin: 0 auto; padding: 20px; text-align: center;
          background-color: #f8fafc; border: 1px solid #cbd5e1; border-radius: 12px; }
  h2 { color: teal; margin: 8px 0; }
</style>
<div class="card">
  <img src="/static/code/web-basics/cat.svg" alt="My avatar" width="120">
  <h2>Sam Lee</h2>
  <p>I love drawing and football.</p>
</div>

English

What you've learned

HTML: headings, paragraphs, lists, links, images, tables, forms, page structure.
CSS: colours, text, the box model, spacing, sizing, and rows with Flexbox.
That is the real foundation of every web page. You can build things now. 🎉

Tiếng Việt

Những gì bạn đã học

HTML: tiêu đề, đoạn văn, danh sách, liên kết, hình ảnh, bảng, biểu mẫu, cấu trúc trang.
CSS: màu sắc, chữ viết, mô hình box, khoảng cách, kích thước, và các hàng với Flexbox.
Đó chính là nền tảng thực sự của mọi trang web. Bây giờ bạn có thể xây dựng các thứ. 🎉

English

Common mistakes

Build and check one piece at a time.
Keep the HTML structure and the CSS styling separate.

Tiếng Việt

Lỗi thường gặp

Xây dựng và kiểm tra từng phần một.
Giữ cấu trúc HTML và kiểu dáng CSS tách biệt.

English

Build your card

The card's layout is already styled, so you can focus on filling it in.
Each task adds one piece — content, a picture, then colour. Press ▶ often!

Tiếng Việt

Xây dựng thẻ của bạn

Bố cục của thẻ đã được định dạng sẵn, nên bạn có thể tập trung điền nội dung vào.
Mỗi nhiệm vụ thêm một mảnh — nội dung, hình ảnh, rồi đến màu sắc. Nhấn ▶ thường xuyên!

Start your card. Inside the .card, add an <h2> with a name and a <p> with one line about you.

<style>
  .card { width: 280px; margin: 0 auto; padding: 20px; text-align: center;
          background-color: #f8fafc; border: 1px solid #cbd5e1; border-radius: 12px; }
  h2 { margin: 8px 0; }
</style>
<div class="card">
  <!-- add an <h2> name and a <p> about you -->
</div>

Add a picture above the name. Add an <img src="/static/code/web-basics/cat.svg"> with alt text, just inside the card.

<style>
  .card { width: 280px; margin: 0 auto; padding: 20px; text-align: center;
          background-color: #f8fafc; border: 1px solid #cbd5e1; border-radius: 12px; }
  h2 { margin: 8px 0; }
</style>
<div class="card">
  <!-- add an <img> here -->
  <h2>Sam Lee</h2>
  <p>I love drawing and football.</p>
</div>

Finish it with a splash of colour. Give the h2 a colour you like, e.g. h2 { color: teal; }.

<style>
  .card { width: 280px; margin: 0 auto; padding: 20px; text-align: center;
          background-color: #f8fafc; border: 1px solid #cbd5e1; border-radius: 12px; }
  h2 { margin: 8px 0; }
</style>
<div class="card">
  <img src="/static/code/web-basics/cat.svg" alt="My avatar" width="120">
  <h2>Sam Lee</h2>
  <p>I love drawing and football.</p>
</div>