Trải nghiệm: Hãy chạy thử mã
Mã đã được nhập sẵn. Hãy nhấn nút 'Chạy' (Execute) và xác nhận rằng 'Hello World' hiển thị ở phần xem trước. Đây là bài tập để bạn làm quen với luồng học.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Bài tập thực hành
Viết mã và xem kết quả ngay lập tức. Có sẵn gợi ý và lời giải.
Cách tiến hành: ① Đọc hướng dẫn → ② Làm bài tập. Bỏ qua hướng dẫn có thể dẫn đến việc bị tắc. Hãy đọc hướng dẫn của từng bước trước khi làm bài tập thuộc danh mục đó.
📋 Cheat Sheet (Tham khảo HTML / CSS / JS)
Thẻ HTML cơ bản
- <h1> 〜 <h6>
- Tiêu đề. h1 lớn nhất, h6 nhỏ nhất. Mỗi trang nên có 1 thẻ h1. VD:
<h1>Tiêu đề</h1> - <p>
- Đoạn văn. Đại diện cho 1 khối văn bản. VD:
<p>Đây là đoạn văn.</p> - <ul> và <li>
- Danh sách không thứ tự. VD:
<ul><li>Mục 1</li><li>Mục 2</li></ul> - <a href="...">
- Liên kết. VD:
<a href="https://example.com">Link</a> - <img src="..." alt="...">
- Hình ảnh. src là URL, alt là mô tả. VD:
<img src="url" alt="mô tả">
CSS cơ bản
color: blue; Màu chữbackground-color: #f5f5f5; Màu nềnmargin: 16px; Khoảng cách bên ngoàipadding: 16px; Khoảng cách bên trongfont-size: 1.2rem; Kích thước chữHTML đầu tiên
Hãy viết mã HTML để hiển thị dòng chữ 'Hello World'. Sử dụng thẻ h1 mà bạn đã học ở trên.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Thêm đoạn văn
Hãy thêm một đoạn văn bản 'Đây là trang web đầu tiên của tôi.' bên dưới tiêu đề. Sử dụng thẻ p để bao quanh.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Tạo danh sách
Hãy tạo một danh sách 3 loại trái cây bạn yêu thích bằng thẻ ul và li. Hãy thay thế phần ___ trong mã mẫu.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Chèn liên kết
Hãy tạo một liên kết đến địa chỉ https://google.com với văn bản hiển thị là 'Google'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Hiển thị hình ảnh
Hãy hiển thị hình ảnh từ địa chỉ https://placehold.co/200x100. Đặt thuộc tính alt là 'Ảnh mẫu'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Phân cấp tiêu đề
Hãy tạo 3 tiêu đề h1, h2, h3 theo đúng thứ tự phân cấp với chủ đề bất kỳ (ví dụ: Trang của tôi, Phim yêu thích, v.v.).
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Danh sách có thứ tự
Sử dụng thẻ ol và li để viết 3 bước thực hiện một công việc hoặc bảng xếp hạng (ví dụ: Các bước nấu ăn, Top phim hay, v.v.).
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Thẻ strong và em
Bao quanh từ 'Quan trọng' bằng thẻ strong và từ 'Nhấn mạnh' bằng thẻ em.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
HTML ngữ nghĩa (Semantic)
Hãy tạo cấu trúc cơ bản sử dụng các thẻ header, main, footer. Nội dung bên trong main bạn có thể viết tùy ý.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Điều hướng (Navigation)
Hãy tạo 3 liên kết (Trang chủ, Giới thiệu, Liên hệ) bên trong thẻ nav.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nhóm lại bằng thẻ div
Hãy bao quanh hai phần tử bất kỳ bằng thẻ div riêng biệt. Nội dung bên trong có thể viết tùy ý.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Trang trí bằng thẻ span
Hãy bao quanh cụm từ 'Chữ màu đỏ' bằng thẻ span.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Bảng dữ liệu (Table)
Hãy tạo một bảng gồm 2 hàng và 2 cột. Nội dung trong các ô có thể viết tùy ý.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Ngắt dòng (br)
Hãy ngắt dòng giữa 'Dòng 1' và 'Dòng 2' bằng thẻ br.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Mở trong tab mới
Hãy thiết lập để liên kết mở trong một tab mới bằng thuộc tính target="_blank".
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Thay đổi màu chữ
Hãy đổi màu chữ của thẻ h1 thành màu xanh (blue).
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Màu nền (Background Color)
Hãy đổi màu nền của body thành màu xám nhạt (#f5f5f5).
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Thêm khoảng trống nội bộ (Padding)
Hãy thêm khoảng trống nội bộ (padding) là 16px cho thẻ p.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Khai báo biến
Hãy khai báo một biến có tên name, gán cho nó một giá trị bất kỳ và xuất ra console.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Định nghĩa hàm
Hãy định nghĩa một hàm tên là greet trả về chuỗi 'Xin chào'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Tạo mảng
Hãy tạo một mảng tên là fruits chứa 3 tên loại trái cây và xuất ra console.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Đối tượng (Object)
Hãy tạo một đối tượng user có name và age, sau đó xuất ra console.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Cơ bản về Form
Hãy tạo một form có ô nhập tên và nút gửi. Thuộc tính name của input phải là 'name'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Liên kết label và input
Hãy liên kết label 'Email' với input có id='email' bằng thuộc tính for.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
article và section
Hãy tạo 2 thẻ section bên trong một thẻ article.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Thuộc tính data
Hãy thêm thuộc tính data-id="123" và data-name="test" vào thẻ div.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Ô tích (Checkbox)
Hãy tạo một ô tích kèm theo nhãn 'Tôi đồng ý'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Đường viền (Border)
Hãy thêm đường viền nét liền, dày 1px, màu #ccc cho thẻ div.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Sử dụng Class
Tạo class .highlight với nền vàng và áp dụng nó cho thẻ p.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Hiệu ứng Hover
Khi di chuột vào thẻ a, hãy làm cho chữ chuyển sang màu đỏ.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Căn giữa màn hình
Sử dụng Flexbox để đưa thẻ div vào chính giữa màn hình (ngang và dọc).
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Chia 3 cột bằng Grid
Sử dụng Grid để chia các phần tử con thành 3 cột bằng nhau.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Khoảng cách gap
Tạo khoảng cách 16px giữa các phần tử con trong Flexbox.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Thiết kế Responsive
Thiết lập 2 cột khi màn hình rộng từ 768px trở lên, và 1 cột khi nhỏ hơn.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Tự động xuống dòng (flex-wrap)
Thiết lập để các phần tử con tự động xuống dòng nếu bị tràn khung chứa.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Căn lề hai đầu (space-between)
Sử dụng Flexbox để đẩy hai phần tử con về hai phía xa nhất.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Bố cục dạng thẻ (Card Layout)
Tạo 3 thẻ bài nằm ngang bằng Grid, mỗi thẻ có padding và border.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Câu lệnh if
Nếu age từ 18 trở lên xuất 'Người lớn', ngược lại xuất 'Trẻ em'. Cho age = 20.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Template Literal
Sử dụng biến name ('An') để xuất chuỗi 'Chào bạn, An' dùng template literal.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Độ dài của mảng
Hãy xuất số lượng phần tử của mảng arr ra console. Cho arr = [1,2,3,4,5].
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Phần tử đầu tiên
Hãy xuất phần tử đầu tiên của mảng fruits ra console.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Hàm mũi tên (Arrow Function)
Định nghĩa hàm mũi tên double nhận vào một số và trả về giá trị gấp đôi.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Thuộc tính đối tượng
Hãy xuất giá trị thuộc tính name của đối tượng user ra console.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Hàm map
Tạo mảng mới với các giá trị gấp đôi từ mảng numbers = [1,2,3] dùng map.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Toán tử ba ngôi
Dùng toán tử ba ngôi để gán 'Đậu' nếu score >= 60, ngược lại gán 'Rớt'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nối chuỗi
Nối firstName và lastName để tạo ra tên đầy đủ 'Nguyễn Văn An'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Lấy phần tử DOM
Lấy phần tử có id='msg' và đổi nội dung văn bản của nó thành 'Xin chào'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Sự kiện Click
Khi nhấn vào nút có id='btn', hãy xuất 'Đã nhấn!' ra console.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Tạo phần tử mới
Tạo thẻ p mới, gán văn bản và thêm nó vào trong thẻ có id='container'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Sử dụng querySelector
Lấy thẻ li đầu tiên trong ul có id='list' và xuất nội dung của nó.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Lấy tất cả phần tử
Lấy tất cả thẻ li trong danh sách và xuất nội dung từng cái ra console.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Lấy giá trị Input
Lấy và xuất giá trị hiện tại của ô nhập liệu có id='name'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Xóa phần tử
Xóa hoàn toàn phần tử có id='remove-me' khỏi trang web.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Event Delegation
Lắng nghe sự kiện click trên ul và xuất nội dung của thẻ li được nhấp.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Thay đổi Style
Đổi màu nền của phần tử id='box' thành 'lightblue' bằng JavaScript.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Lấy dữ liệu API
Dùng fetch để lấy dữ liệu từ API và xuất tiêu đề (title) ra console.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Xử lý lỗi API
Nếu phản hồi fetch không thành công (res.ok là false), hãy xuất 'Lỗi'.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Sử dụng try-catch
Bao quanh fetch bằng try-catch để bắt và xuất lỗi nếu có.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Hiển thị danh sách dữ liệu
Lấy danh sách bài viết từ API và xuất tiêu đề của 3 bài đầu tiên.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Trạng thái đang tải (Loading)
Xuất 'Đang tải' trước khi gọi API và 'Hoàn tất' sau khi nhận dữ liệu.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Ứng dụng TODO
Khi nhấn nút, hãy thêm nội dung từ ô input vào danh sách ul.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Lưu trữ Local Storage
Lưu tên vào localStorage và sau đó đọc ra để xuất vào console.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Bộ hẹn giờ (Timer)
Hãy xuất câu 'Hết giờ' ra console sau đúng 3 giây.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Bộ đếm (Counter)
Tăng giá trị bộ đếm lên 1 mỗi khi nhấn nút và hiển thị ra màn hình.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.
Bộ lọc dữ liệu (Filter)
Lọc lấy các số lớn hơn hoặc bằng 3 từ mảng [1,2,3,4,5] và xuất ra.
Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.