Bài viết giải thích

Giải thích theo từ khóa kèm bài tập (74 bài)

Học các kiến thức cơ bản về HTML, CSS, JavaScript thông qua bài viết giải thích và bài tập thực hành ngay tại chỗ.

• 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.

  Môi trường

• 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.

  Môi trường

• 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.

  Môi trường

• 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.

  Môi trường

• 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'.

  Môi trường

• 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'.

  Môi trường

• 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.).

  HTML Cơ bản

• 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.).

  HTML Cơ bản

• Thẻ strong và em

  Bao quanh từ 'Quan trọng' bằng thẻ strong và từ 'Nhấn mạnh' bằng thẻ em.

  HTML Cơ bản

• 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 ý.

  HTML Cơ bản

• Đ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.

  HTML Cơ bản

• 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 ý.

  HTML Cơ bản

• Trang trí bằng thẻ span

  Hãy bao quanh cụm từ 'Chữ màu đỏ' bằng thẻ span.

  HTML Cơ bản

• 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 ý.

  HTML Cơ bản

• Ngắt dòng (br)

  Hãy ngắt dòng giữa 'Dòng 1' và 'Dòng 2' bằng thẻ br.

  HTML Cơ bản

• 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".

  HTML Cơ bản

• Thay đổi màu chữ

  Hãy đổi màu chữ của thẻ h1 thành màu xanh (blue).

  CSS Cơ bản

• 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).

  CSS Cơ bản

• 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.

  CSS Cơ bản

• Căn giữa văn bản

  Hãy căn giữa cho thẻ tiêu đề h1.

  CSS Cơ bản

• Cỡ chữ (Font Size)

  Hãy đổi cỡ chữ của thẻ p thành 1.2rem.

  CSS Cơ bản

• In ra console

  Sử dụng console.log để in ra chuỗi 'Xin chào'

  JavaScript Cơ bản

• 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.

  JavaScript Cơ bản

• Đị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'.

  JavaScript Cơ bản

• 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.

  JavaScript Cơ bản

• Đối tượng (Object)

  Hãy tạo một đối tượng user có name và age, sau đó xuất ra console.

  JavaScript Cơ bản

• 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'.

  HTML Nâng cao

• 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.

  HTML Nâng cao

• article và section

  Hãy tạo 2 thẻ section bên trong một thẻ article.

  HTML Nâng cao

• Thuộc tính data

  Hãy thêm thuộc tính data-id="123" và data-name="test" vào thẻ div.

  HTML Nâng cao

• Ô tích (Checkbox)

  Hãy tạo một ô tích kèm theo nhãn 'Tôi đồng ý'.

  HTML Nâng cao

• Đường viền (Border)

  Hãy thêm đường viền nét liền, dày 1px, màu #ccc cho thẻ div.

  CSS Cơ bản

• Bo góc (Border Radius)

  Hãy bo góc thẻ div với bán kính 8px.

  CSS Cơ bản

• Sử dụng Class

  Tạo class .highlight với nền vàng và áp dụng nó cho thẻ p.

  CSS Cơ bản

• Chiều rộng (Width)

  Hãy đặt chiều rộng của thẻ div là 300px.

  CSS Cơ bản

• Hiệu ứng Hover

  Khi di chuột vào thẻ a, hãy làm cho chữ chuyển sang màu đỏ.

  CSS Cơ bản

• Dàn hàng bằng Flexbox

  Hãy xếp 3 thẻ div nằm ngang bằng Flexbox.

  Layout CSS

• 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).

  Layout CSS

• 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.

  Layout CSS

• Khoảng cách gap

  Tạo khoảng cách 16px giữa các phần tử con trong Flexbox.

  Layout CSS

• 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.

  Layout CSS

• 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.

  Layout CSS

• Căn lề hai đầu (space-between)

  Sử dụng Flexbox để đẩy hai phần tử con về hai phía xa nhất.

  Layout CSS

• 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.

  Layout CSS

• 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.

  JavaScript Cơ bản

• Vòng lặp for

  Hãy xuất các số từ 1 đến 5 ra console.

  JavaScript Cơ bản

• Template Literal

  Sử dụng biến name ('An') để xuất chuỗi 'Chào bạn, An' dùng template literal.

  JavaScript Cơ bản

• Độ 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].

  JavaScript Cơ bản

• Phần tử đầu tiên

  Hãy xuất phần tử đầu tiên của mảng fruits ra console.

  JavaScript Cơ bản

• 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.

  JavaScript Cơ bản

• 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.

  JavaScript Cơ bản

• 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.

  JavaScript Cơ bản

• 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'.

  JavaScript Cơ bản

• Nối chuỗi

  Nối firstName và lastName để tạo ra tên đầy đủ 'Nguyễn Văn An'.

  JavaScript Cơ bản

• 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'.

  Thao tác DOM

• Sự kiện Click

  Khi nhấn vào nút có id='btn', hãy xuất 'Đã nhấn!' ra console.

  Thao tác DOM

• Thêm Class

  Thêm class 'active' vào phần tử có id='box'.

  Thao tác DOM

• 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'.

  Thao tác DOM

• 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ó.

  Thao tác DOM

• 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.

  Thao tác DOM

• 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'.

  Thao tác DOM

• Xóa phần tử

  Xóa hoàn toàn phần tử có id='remove-me' khỏi trang web.

  Thao tác DOM

• 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.

  Thao tác DOM

• Thay đổi Style

  Đổi màu nền của phần tử id='box' thành 'lightblue' bằng JavaScript.

  Thao tác DOM

• Lấy dữ liệu API

  Dùng fetch để lấy dữ liệu từ API và xuất tiêu đề (title) ra console.

  Kết nối API

• 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'.

  Kết nối API

• Sử dụng try-catch

  Bao quanh fetch bằng try-catch để bắt và xuất lỗi nếu có.

  Kết nối API

• 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.

  Kết nối API

• 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.

  Kết nối API

• Ứng dụng TODO

  Khi nhấn nút, hãy thêm nội dung từ ô input vào danh sách ul.

  Dự án thực tế

• Lưu trữ Local Storage

  Lưu tên vào localStorage và sau đó đọc ra để xuất vào console.

  Dự án thực tế

• Bộ hẹn giờ (Timer)

  Hãy xuất câu 'Hết giờ' ra console sau đúng 3 giây.

  Dự án thực tế

• 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.

  Dự án thực tế

• 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.

  Dự án thực tế