Menu
CoddyTech
Bắt đầu học

Hoàn thiện HTML

Bài học 3 trên 11 trong khóa học Thanh tiến trình hình tròn | Dự án front-end của Coddy.

Ở đây, chúng ta sẽ hoàn thành phần HTML.

Hình minh họa các lớp:

challenge icon

Thử thách

Dễ

Bên trong lớp container:

  1. Tạo một div có tên lớp là circular-progress
  2. Bên trong circular-progress, tạo thẻ span có tên lớp là progress-value và thêm văn bản 0%
  3. Bên dưới circular-progress, tạo thẻ span có tên lớp là text và thêm văn bản tùy chọn của bạn.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Thanh tiến trình hình tròn | Dự án front-end

1Giới thiệu

Bạn sẽ tạo ra gì?

4JavaScript

Làm cho nó chạy!Bài học dự án

2HTML

Thiết lậpHoàn thiện HTMLBài học dự án

3CSS

Bộ chọn toàn cụcBài học dự ánBodyBài học dự ánLớp containerBài học dự ánLớp circular progressBài học dự ánCircular progress ::beforeBài học dự ánLớp giá trị tiến trìnhBài học dự ánLớp văn bảnBài học dự án

Tự luyện tập: Playground Web