Course: Web Front-end Fundamental

Session: Session 01 - HTML Basic

Lessons:

  • ID: 117 - Name: Thiết lập môi trường.
  • ID: 118 - Name: Sơ lược về Internet
    • Question: <p>Internet là gì ?</p>
      Correct Answer: B. Một mạng lưới kết nối các máy tính trên toàn thế giới
  • ID: 119 - Name: Web là gì ?
    • Question: Web là gì?
      Correct Answer: C. Một hệ thống thông tin được truy cập qua Internet
    • Question: HTML viết tắt của từ gì?
      Correct Answer: A. HyperText Markup Language
    • Question: Client là gì?
      Correct Answer: B. Một máy tính hoặc thiết bị yêu cầu dịch vụ từ máy chủ
    • Question: Server là gì?
      Correct Answer: B. Một máy chủ lưu trữ và cung cấp dịch vụ hoặc dữ liệu cho các máy khác
  • ID: 170 - Name: HTML, CSS và Javascript là gì ?
    • Question: HTML là gì?
      Correct Answer: B. Một ngôn ngữ đánh dấu để tạo cấu trúc trang web
    • Question: Tác dụng chính của HTML là gì?
      Correct Answer: A. Tạo cấu trúc và nội dung cho trang web
    • Question: Tác dụng chính của CSS là gì?
      Correct Answer: B. Định dạng và làm đẹp giao diện trang web
    • Question: Tác dụng chính của JavaScript là gì?
      Correct Answer: A. Tạo các hiệu ứng động và tương tác cho trang web
  • ID: 632 - Name: HTML là gì?
    • Question: HTML là gì?
      Correct Answer: B. Một ngôn ngữ đánh dấu để tạo cấu trúc trang web
    • Question: HTML viết tắt của từ gì?
      Correct Answer: C. HyperText Markup Language
    • Question: Cấu trúc của thẻ trong html nào sau đâu là đúng
      Correct Answer: A. <tên thẻ> Nội dung </tên thẻ>
    • Question: Tại sao HTML là một phần quan trọng trong phát triển web?
      Correct Answer: B. HTML tạo cấu trúc và nội dung cơ bản cho trang web
  • ID: 633 - Name: HTML boilerplate (Cấu trúc cơ bản của 1 trang HTML)
    • Question: HTML Boilerplate là gì?
      Correct Answer: B. Một mẫu HTML cơ bản giúp bắt đầu dự án nhanh hơn
    • Question: Thẻ nào được sử dụng để khai báo tài liệu HTML5 trong HTML Boilerplate?
      Correct Answer: B. <!DOCTYPE html>
    • Question: Thuộc tính nào của thẻ <html> dùng để xác định ngôn ngữ của tài liệu?
      Correct Answer: A. lang
    • Question: Thẻ nào trong HTML Boilerplate chứa thông tin không hiển thị trực tiếp trên trình duyệt?
      Correct Answer: B. <head>
  • ID: 634 - Name: Heading Elements (Thẻ heading)
    • Question: Thẻ nào được sử dụng để tạo tiêu đề lớn nhất trong HTML?
      Correct Answer: B. <h1>
    • Question: HTML có bao nhiêu cấp độ thẻ heading?
      Correct Answer: C. 6
    • Question: <p>Thẻ &lt;h6&gt; trong HTML thường được sử dụng để làm gì ?</p>
      Correct Answer: B. Tạo tiêu đề nhỏ nhất
    • Question: Thẻ heading nào là phù hợp nhất để sử dụng cho tiêu đề chính của trang web?
      Correct Answer: A. <h1>
    • Question: <p>Các thẻ heading từ &lt;h1&gt; đến &lt;h6&gt; được sử dụng để làm gì</p>
      Correct Answer: C. Định nghĩa các mức tiêu đề khác nhau trên trang web
  • ID: 635 - Name: Paragraph Element (Thẻ paragraph)
    • Question: Thẻ nào được sử dụng để tạo một đoạn văn bản trong HTML?
      Correct Answer: A. <p>
    • Question: <p>Mục đích của thẻ &lt;p&gt; là gì?</p>
      Correct Answer: B. Định nghĩa một đoạn văn bản
    • Question: Cách nào đúng để viết một đoạn văn trong HTML?
      Correct Answer: A. <p>Đây là một đoạn văn.</p>
    • Question: <p>Thẻ &lt;br&gt; có tác dụng gì trong HTML?</p>
      Correct Answer: C. Ngắt dòng trong văn bản
    • Question: <p>Thẻ &lt;pre&gt; có tác dụng gì trong HTML</p>
      Correct Answer: B. Hiển thị văn bản với định dạng và khoảng trắng nguyên gốc
  • ID: 636 - Name: List Element (Thẻ danh sách)
    • Question: Thẻ nào được sử dụng để tạo danh sách không có thứ tự trong HTML?
      Correct Answer: A. <ul>
    • Question: <p>Thẻ &lt;ol&gt; trong HTML có tác dụng gì ?</p>
      Correct Answer: B. Tạo danh sách có thứ tự
    • Question: Thẻ nào được sử dụng để định nghĩa một mục trong danh sách?
      Correct Answer: C. <li>
    • Question: <p>Thuộc tính nào của &lt;ol&gt; có thể được sử dụng để thay đổi kiểu đánh số?</p>
      Correct Answer: A. type
    • Question: Danh sách nào hiển thị các mục với dấu chấm (bullet points)?
      Correct Answer: A. <ul>
  • ID: 637 - Name: Image Element (Thẻ hình ảnh)
    • Question: Thẻ nào được sử dụng để chèn hình ảnh vào trang web trong HTML?
      Correct Answer: A. <img>
    • Question: <p>Thuộc tính nào của thẻ <img>&lt;img /&gt; được sử dụng để chỉ định đường dẫn đến tệp hình ảnh?</p>
      Correct Answer: B. src
    • Question: <p>Thuộc tính alt của thẻ &lt;img /&gt;<img> có tác dụng gì?</p>
      Correct Answer: A. Hiển thị mô tả thay thế khi hình ảnh không tải được
    • Question: Thuộc tính nào được sử dụng để điều chỉnh chiều rộng và chiều cao của hình ảnh?
      Correct Answer: C. width và height
    • Question: <p>Bạn có thể sử dụng thẻ <img>&lt;img /&gt; để hiển thị video không?</p>
      Correct Answer: B. Không
  • ID: 638 - Name: Anchor Element (Thẻ liên kết)
    • Question: Thẻ nào được sử dụng để tạo liên kết trong HTML?
      Correct Answer: B. <a>
    • Question: Thuộc tính nào của thẻ <a> được sử dụng để chỉ định đường dẫn liên kết?
      Correct Answer: C. href
    • Question: Thuộc tính target="_blank" trong thẻ <a> có tác dụng gì?
      Correct Answer: A. Mở liên kết trong cửa sổ hoặc tab mới
    • Question: Nếu thuộc tính href trong thẻ <a> để trống, điều gì sẽ xảy ra?
      Correct Answer: C. Liên kết sẽ dẫn đến chính trang hiện tại
    • Question: Điều gì xảy ra nếu thẻ <a> không có thuộc tính href?
      Correct Answer: A. Văn bản liên kết không thể nhấn được
  • ID: 639 - Name: Nhóm thẻ format text (b, u, i, strong, em, mark)
  • ID: 640 - Name: Inline Element vs Block Element
    • Question: Khác biệt chính giữa Inline Element và Block Element là gì?
      Correct Answer: A. Block Element chiếm toàn bộ chiều rộng, Inline Element chỉ chiếm nội dung cần thiết
    • Question: Thẻ nào sau đây là một Inline Element?
      Correct Answer: B. <span>
    • Question: Thẻ nào sau đây là một Block Element?
      Correct Answer: C. <div>
    • Question: <p>Thẻ &lt;p&gt; thuộc loại phần tử nào?</p>
      Correct Answer: A. Block Element
    • Question: <p>Thẻ &lt;img&gt;<img> thuộc loại phần tử nào?</p>
      Correct Answer: B. Inline Element

Session: Session 02 - Table

Lessons:

  • ID: 120 - Name: HTML5 là gì? Các thẻ HTML5 cơ bản (sub, sup, hr, br)
    • Question: HTML5 là gì?
      Correct Answer: B. Phiên bản mới nhất của ngôn ngữ đánh dấu HTML
    • Question: Thẻ nào trong HTML5 dùng để định nghĩa nội dung chính của trang web?
      Correct Answer: A. <main>
    • Question: Thẻ HTML5 nào dùng để nhúng video vào trang web?
      Correct Answer: B. <video>
    • Question: Thẻ HTML5 nào giúp định nghĩa phần đầu của nội dung tài liệu?
      Correct Answer: A. <header>
  • ID: 641 - Name: Entity trong HTML
    • Question: HTML Entity được sử dụng để làm gì?
      Correct Answer: B. Đại diện cho các ký tự đặc biệt trong HTML
    • Question: Ký tự < trong HTML được biểu diễn bằng HTML Entity nào?
      Correct Answer: A. &lt;
    • Question: Entity nào dùng để biểu diễn ký tự " (dấu ngoặc kép)?
      Correct Answer: B. &quot;
    • Question: Ký tự bản quyền © được biểu diễn bằng HTML Entity nào?
      Correct Answer: D. Cả A và C đều đúng
    • Question: Entity nào được sử dụng để tạo dấu cách không ngắt dòng trong HTML?
      Correct Answer: B. &nbsp;
  • ID: 642 - Name: Semantic trong HTML
    • Question: Semantic trong HTML là gì?
      Correct Answer: B. Các thẻ HTML có ý nghĩa rõ ràng về nội dung mà chúng chứa
    • Question: Thẻ nào sau đây là thẻ semantic trong HTML5?
      Correct Answer: C. <article>
    • Question: <p>Thẻ &lt;header&gt; trong HTML5 được sử dụng để làm gì?</p>
      Correct Answer: A. Định nghĩa tiêu đề trang hoặc phần nội dung
    • Question: Thẻ semantic nào được sử dụng để định nghĩa nội dung chính của trang web?
      Correct Answer: A. <main>
    • Question: <p>Thẻ &lt;footer&gt; được sử dụng để làm gì trong HTML5?</p>
      Correct Answer: B. Định nghĩa phần cuối của một tài liệu hoặc phần nội dung
  • ID: 643 - Name: Tổng quan về table trong HTML
    • Question: Table trong HTML được sử dụng để làm gì?
      Correct Answer: B. Trình bày dữ liệu dưới dạng hàng và cột
    • Question: Lợi ích chính của việc sử dụng bảng (table) trong HTML là gì?
      Correct Answer: B. Hiển thị dữ liệu rõ ràng và có tổ chức
    • Question: Tại sao các bảng (table) trong HTML lại quan trọng đối với việc hiển thị dữ liệu?
      Correct Answer: B. Vì bảng làm cho dữ liệu dễ đọc và dễ hiểu hơn
    • Question: Bảng trong HTML có thể được sử dụng để làm gì?
      Correct Answer: B. Trình bày dữ liệu dạng báo cáo hoặc bảng biểu
  • ID: 644 - Name: tr, td, th Elements
    • Question: <p>Thẻ '&lt;tr&gt;' trong HTML được sử dụng để làm gì?</p>
      Correct Answer: A. Tạo một hàng trong bảng
    • Question: <p>Thẻ '&lt;td&gt;' trong HTML được sử dụng để làm gì?</p>
      Correct Answer: C. Định nghĩa một ô dữ liệu
    • Question: <p>Thẻ trong ‘&lt;th&gt;’ HTML được sử dụng để làm gì?</p>
      Correct Answer: A. Định nghĩa tiêu đề của một ô trong bảng
    • Question: <p>Nội dung trong thẻ ‘&lt;th&gt;’ thường có đặc điểm gì?</p>
      Correct Answer: C. Căn giữa và in đậm
  • ID: 645 - Name: thead, tbody, tfoot Elements
    • Question: <p>Thẻ ‘&lt;thead&gt;’ trong HTML được sử dụng để làm gì?</p>
      Correct Answer: A. Nhóm các hàng tiêu đề của bảng
    • Question: <p>Thẻ ‘&lt;tbody&gt;’ trong HTML thường chứa loại nội dung nào?</p>
      Correct Answer: B. Nội dung chính của bảng
    • Question: <p>Thẻ ‘&lt;tfoot&gt;’ trong HTML được sử dụng để làm gì?</p>
      Correct Answer: C. Nhóm phần chân bảng, thường chứa thông tin tổng hợp hoặc ghi chú
    • Question: <p>Lợi ích chính của việc sử dụng , ‘&lt;thead&gt;’ , ‘&lt;tbody&gt;’ và trong bảng là gì?</p>
      Correct Answer: B. Cải thiện khả năng tổ chức và quản lý bảng
  • ID: 702 - Name: Giãn dòng và cột với colspan và rowspan

Session: Session 03 - Form

Lessons:

  • ID: 121 - Name: Tổng quan về form trong HTML
    • Question: Thuộc tính colspan trong HTML được sử dụng để làm gì?
      Correct Answer: B. Gộp nhiều cột thành một ô
    • Question: Thuộc tính rowspan trong HTML được sử dụng để làm gì?
      Correct Answer: B. Gộp nhiều hàng thành một ô
    • Question: Thuộc tính nào trong HTML được dùng để gộp ô theo chiều dọc?
      Correct Answer: B. rowspan
    • Question: Thuộc tính colspan="3" có nghĩa là gì?
      Correct Answer: B. Ô sẽ kéo dài qua 3 cột
  • ID: 122 - Name: Cơ chế hoạt động của form (GET & POST request)
    • Question: Thẻ nào được sử dụng để tạo biểu mẫu (form) trong HTML?
      Correct Answer: A. <form>
    • Question: Phương thức nào thường được sử dụng trong thuộc tính method của thẻ <form>?
      Correct Answer: A. POST và GET
    • Question: Form HTML chủ yếu được sử dụng để làm gì?
      Correct Answer: A. Thu thập dữ liệu từ người dùng
  • ID: 123 - Name: Input type cơ bản của form (dạng text, number và button)
    • Question: Phương thức nào được sử dụng để gửi dữ liệu form qua URL?
      Correct Answer: A. GET
    • Question: Thuộc tính nào trong thẻ <form> xác định phương thức gửi dữ liệu?
      Correct Answer: B. method
    • Question: Phương thức nào an toàn hơn để gửi dữ liệu nhạy cảm, như mật khẩu?
      Correct Answer: B. POST
    • Question: Ưu điểm lớn nhất của phương thức POST so với GET là gì?
      Correct Answer: B. Không hiển thị dữ liệu trên URL
  • ID: 124 - Name: Radio button
    • Question: Thuộc tính nào của radio button đảm bảo rằng chỉ một tùy chọn được chọn trong một nhóm?
      Correct Answer: B. name
    • Question: Cú pháp nào là đúng để tạo một radio button?
      Correct Answer: B. <input type="radio" name="option" value="1">
    • Question: Thuộc tính checked trong radio button có chức năng gì?
      Correct Answer: C. Đặt radio button được chọn mặc định
    • Question: Nếu không sử dụng thuộc tính name trong các radio button, điều gì sẽ xảy ra?
      Correct Answer: C. Người dùng có thể chọn nhiều radio button cùng lúc
  • ID: 646 - Name: Checkbox
    • Question: Thuộc tính nào được sử dụng để tạo checkbox trong HTML?
      Correct Answer: C. type="checkbox"
    • Question: Thuộc tính nào cho phép checkbox được chọn mặc định khi trang được tải?
      Correct Answer: C. checked
    • Question: Checkbox được sử dụng để làm gì?
      Correct Answer: B. Chọn một hoặc nhiều tùy chọn từ một danh sách
    • Question: Thuộc tính disabled trong checkbox có ý nghĩa gì?
      Correct Answer: C. Vô hiệu hóa checkbox, không cho phép người dùng chọn
  • ID: 647 - Name: Select, option

Session: Session 04 - Luyện tập tổng hợp về HTML

Lessons:

  • ID: 703 - Name: Luyện tập tổng hợp về HTML
    • Question: Web là:
      Correct Answer: B. Một hệ thống các tài liệu và dịch vụ được truy cập qua Internet.
    • Question: HTML là:
      Correct Answer: B. Ngôn ngữ đánh dấu dùng để tạo nội dung trang web.
    • Question: Thẻ nào trong HTML dùng để tạo tiêu đề lớn nhất?
      Correct Answer: A. <h1>
    • Question: Semantic HTML là:
      Correct Answer: A. Các thẻ HTML có ý nghĩa rõ ràng về mặt cấu trúc và nội dung.
    • Question: Thẻ nào dưới đây không phải là thẻ Semantic HTML?
      Correct Answer: C. <div>
    • Question: HTML entity là gì?
      Correct Answer: A. Một cách mã hóa các ký tự đặc biệt trong HTML.
    • Question: <p>Thẻ ‘&lt;form&gt;’ trong HTML dùng để làm gì?</p>
      Correct Answer: C. Thu thập và gửi dữ liệu từ người dùng đến máy chủ.
    • Question: Thẻ nào trong HTML được dùng để tạo bảng?
      Correct Answer: A. <table>
    • Question: Thuộc tính colspan của thẻ <td> dùng để làm gì?
      Correct Answer: B. Kết hợp các cột.
    • Question: Thẻ nào dùng để nhóm các phần đầu bảng trong HTML?
      Correct Answer: A. <thead>

Session: Session 05 - CSS (01) - CSS Selector

Lessons:

  • ID: 169 - Name: Tổng quan về CSS, CSS là gì?
    • Question: CSS giúp điều chỉnh những gì trong một trang web?
      Correct Answer: B. Hình thức và giao diện của trang web
    • Question: Cú pháp của CSS có thể bao gồm ba phần nào?
      Correct Answer: B. Selector, Property, Value
    • Question: Lệnh CSS nào được sử dụng để thay đổi màu nền của một phần tử?
      Correct Answer: A. background-color
    • Question: Thuộc tính CSS nào được dùng để thay đổi màu chữ của một phần tử?
      Correct Answer: C. color
  • ID: 171 - Name: Liên kết CSS
    • Question: Câu hỏi 1: Cách nào dưới đây là cách nhúng CSS nội tuyến (inline)?
      Correct Answer: A. Sử dụng thuộc tính style trong thẻ HTML
    • Question: Câu hỏi 2: Cách nào dưới đây là cách nhúng CSS nội bộ (internal)?
      Correct Answer: A. Sử dụng thẻ <style> trong phần <head>
    • Question: Câu hỏi 3: Cách nào dưới đây là cách nhúng CSS ngoài (external)?
      Correct Answer: A. Sử dụng thẻ <link> để liên kết file CSS
    • Question: Câu hỏi 4: Thuộc tính href trong thẻ <link> có tác dụng gì?
      Correct Answer: A. Chỉ định đường dẫn tới file CSS ngoài
    • Question: Câu hỏi 5: Cách nào dưới đây giúp thay đổi màu nền của một thẻ HTML cụ thể bằng CSS nội tuyến?
      Correct Answer: A. <div style="background-color: blue;"></div>
  • ID: 172 - Name: Color & Background-color
    • Question: Cú pháp CSS nào sẽ thay đổi màu nền của một phần tử thành màu đỏ?
      Correct Answer: A. background-color: red;
    • Question: Thuộc tính nào trong CSS được sử dụng để thay đổi màu nền của một trang web?
      Correct Answer: B. background-color
    • Question: Bạn muốn thay đổi màu văn bản thành màu trắng và màu nền thành màu đen, cú pháp CSS nào sẽ được sử dụng?
      Correct Answer: B. color: white; background-color: black;
    • Question: Mã màu nào đại diện cho màu đen trong CSS?
      Correct Answer: B. #000000
  • ID: 173 - Name: Hệ thống màu (Color System) trong CSS
    • Question: CSS hỗ trợ những hệ thống màu sắc nào để định nghĩa màu sắc?
      Correct Answer: A. Hex, RGB, HSL
    • Question: Cú pháp nào trong CSS dùng để định nghĩa màu sắc với alpha (độ trong suốt)?
      Correct Answer: B. rgba()
    • Question: Giá trị trong hệ màu HSL biểu thị cho gì?
      Correct Answer: A. Hue (Màu sắc), Saturation (Độ bão hòa), Lightness (Độ sáng)
    • Question: Trong hệ RGB, giá trị màu đỏ tối đa là gì?
      Correct Answer: A. 255
  • ID: 648 - Name: Bộ thuộc tính về text (Text properties) trong CSS
    • Question: Thuộc tính CSS nào dùng để thay đổi kiểu chữ trong một phần tử?
      Correct Answer: B. font-family
    • Question: Cú pháp nào sau đây được dùng để thay đổi kích thước chữ trong CSS?
      Correct Answer: A. font-size: 20px;
    • Question: Thuộc tính CSS nào dùng để thay đổi độ đậm của văn bản?
      Correct Answer: A. font-weight
    • Question: Cú pháp nào trong CSS thay đổi văn bản thành chữ in hoa?
      Correct Answer: A. text-transform: uppercase;
    • Question: Thuộc tính CSS nào được sử dụng để thêm gạch chân vào văn bản?
      Correct Answer: A. text-decoration: underline;
  • ID: 649 - Name: Bộ thuộc tính về font (Font properties) trong CSS
    • Question: Câu hỏi 1: Thuộc tính nào trong CSS được sử dụng để thay đổi màu chữ của văn bản?
      Correct Answer: A. color
    • Question: Câu hỏi 2: Thuộc tính nào trong CSS được sử dụng để thay đổi kích thước chữ?
      Correct Answer: A. font-size
    • Question: Câu hỏi 3: Thuộc tính nào trong CSS được sử dụng để định dạng kiểu chữ (font)?
      Correct Answer: A. font-family
    • Question: Câu hỏi 4: Thuộc tính nào trong CSS được sử dụng để thay đổi độ đậm của chữ?
      Correct Answer: A. font-weight
    • Question: Câu hỏi 5: Thuộc tính nào trong CSS được sử dụng để thay đổi khoảng cách giữa các ký tự trong văn bản?
      Correct Answer: A. letter-spacing
  • ID: 650 - Name: CSS Selector - Các Selector cơ bản (Universal Selector)
    • Question: Selector nào trong CSS chọn tất cả các phần tử trong trang?
      Correct Answer: A. *
    • Question: Universal Selector (*) được sử dụng để làm gì?
      Correct Answer: A. Chọn tất cả các phần tử trên trang
    • Question: Universal Selector (*) sẽ không áp dụng style cho trường hợp nào sau đây?
      Correct Answer: A. Nó luôn áp dụng cho tất cả các phần tử
    • Question: Universal Selector có thể được sử dụng để áp dụng CSS cho phần tử nào?
      Correct Answer: C. Áp dụng cho tất cả các phần tử HTML trên trang
    • Question: <p>Cú pháp nào sau đây chọn tất cả các thẻ ‘&lt;p&gt;’ trong trang?</p>
      Correct Answer: A. p { color: blue; }
  • ID: 651 - Name: Id Selector & Class Selector
    • Question: Selector nào được sử dụng để chọn một phần tử HTML với một ID cụ thể?
      Correct Answer: A. #id
    • Question: Selector nào trong CSS được sử dụng để chọn các phần tử có cùng một class?
      Correct Answer: B. .class
    • Question: Cú pháp nào sau đây chọn phần tử có ID là "header"?
      Correct Answer: B. #header { color: blue; }
    • Question: Cú pháp nào sau đây chọn tất cả các phần tử có class là "box"?
      Correct Answer: A. .box { border: 1px solid black; }
    • Question: Có thể sử dụng cùng một ID cho nhiều phần tử HTML trên một trang không?
      Correct Answer: B. Không
  • ID: 652 - Name: Adjacent Selector & Descendant Selector
    • Question: Adjacent Selector trong CSS được biểu diễn bằng cú pháp nào?
      Correct Answer: B. A + B
    • Question: Descendant Selector trong CSS được biểu diễn bằng cú pháp nào?
      Correct Answer: A. A B
    • Question: Cú pháp div + p {} trong CSS sẽ chọn phần tử nào?
      Correct Answer: B. Phần tử <p> đứng ngay sau một phần tử <div>
    • Question: <p>Câu lệnh CSS nào chọn tất cả các phần tử <span>nằm bên trong một phần tử ?</span></p>
      Correct Answer: B. div span {}
  • ID: 653 - Name: Attribute Selector
    • Question: Cú pháp [attribute="value"] trong CSS chọn các phần tử nào?
      Correct Answer: A. Các phần tử có giá trị thuộc tính khớp hoàn toàn với "value"
    • Question: Cú pháp [attribute^="value"] trong CSS chọn các phần tử như thế nào?
      Correct Answer: A. Các phần tử có giá trị thuộc tính bắt đầu bằng "value"
    • Question: Cú pháp [attribute$="value"] trong CSS sẽ chọn phần tử nào?
      Correct Answer: C. Phần tử có giá trị thuộc tính kết thúc bằng "value"
    • Question: Cú pháp [attribute*="value"] trong CSS dùng để làm gì?
      Correct Answer: A. Chọn các phần tử có giá trị thuộc tính chứa "value" ở bất kỳ vị trí nào
  • ID: 654 - Name: Pseudo class & pseudo elements
    • Question: Cú pháp nào sau đây đại diện cho một pseudo-class?
      Correct Answer: B. :hover
    • Question: Pseudo-class :nth-child(odd) sẽ chọn các phần tử nào?
      Correct Answer: A. Các phần tử con có vị trí lẻ (1, 3, 5, ...)
    • Question: Pseudo-class :first-child áp dụng cho phần tử nào?
      Correct Answer: A. Phần tử đầu tiên bên trong một phần tử cha
    • Question: Pseudo-element ::before được sử dụng để làm gì?
      Correct Answer: A. Thêm nội dung ngay trước phần tử HTML
  • ID: 655 - Name: Thứ tự ưu tiên trong CSS (CSS specificity)
    • Question: Thứ tự ưu tiên trong CSS được xác định bởi yếu tố nào?
      Correct Answer: C. Specificity và thứ tự của các quy tắc trong tệp CSS
    • Question: Công thức tính specificity trong CSS là gì?
      Correct Answer: A. Inline styles > ID selectors > Class selectors > Element selectors
    • Question: Quy tắc nào trong CSS có độ ưu tiên cao nhất?
      Correct Answer: A. Inline styles
    • Question: Câu lệnh CSS nào có specificity thấp nhất?
      Correct Answer: A. body {}

Session: Session 06 - Hệ thống kiến thức CSS cơ bản, CSS selector

Lessons:

  • ID: 704 - Name: Hệ thống kiến thức CSS cơ bản, CSS selector
    • Question: CSS được viết tắt từ cụm từ nào?
      Correct Answer: B. Cascading Style Sheets
    • Question: Cách nào sau đây được sử dụng để thêm CSS vào tài liệu HTML?
      Correct Answer: D. Tất cả các cách trên
    • Question: Thuộc tính CSS nào được sử dụng để thay đổi màu nền của một phần tử?
      Correct Answer: B. background-color
    • Question: Làm thế nào để liên kết một tệp CSS bên ngoài vào tệp HTML?
      Correct Answer: A. <link rel="stylesheet" href="style.css">
    • Question: Đâu là selector CSS cơ bản?
      Correct Answer: D. Tất cả các lựa chọn trên
    • Question: Cú pháp đúng để áp dụng CSS inline là gì?
      Correct Answer: A. <p style="color: red;">Nội dung</p>
    • Question: Thuộc tính nào được sử dụng để tạo đường viền quanh một phần tử?
      Correct Answer: A. border
    • Question: Cách nào sau đây để chọn tất cả các phần tử <p> trong CSS?
      Correct Answer: B. p {}
    • Question: Thuộc tính nào kiểm soát khoảng cách giữa các dòng văn bản?
      Correct Answer: A. line-height
    • Question: CSS hỗ trợ định dạng màu sắc nào?
      Correct Answer: D. Tất cả các định dạng trên

Session: Session 07 - CSS (02) - CSS Basic Properties, CSS3

Lessons:

  • ID: 174 - Name: Box model - Width & Height
    • Question: Trong Box Model, đâu là thứ tự các thành phần từ trong ra ngoài?
      Correct Answer: B. Content → Padding → Border → Margin
    • Question: Thuộc tính width: 100% có nghĩa là gì?
      Correct Answer: C. Chiều rộng bằng chiều rộng của phần tử cha.
    • Question: Đơn vị nào KHÔNG được sử dụng để định nghĩa width và height?
      Correct Answer: D. color
    • Question: Nếu đặt height: auto, chiều cao của phần tử được tính như thế nào?
      Correct Answer: B. Tự động điều chỉnh theo nội dung bên trong.
    • Question: Đơn vị vh được sử dụng để đo chiều cao theo:
      Correct Answer: B. Tỉ lệ phần trăm chiều cao của cửa sổ trình duyệt.
  • ID: 175 - Name: Box model - Border
  • ID: 176 - Name: Box model - Margin & Padding
  • ID: 177 - Name: Box model - Display
  • ID: 178 - Name: Opacity & Alpha channel
  • ID: 656 - Name: Position properties
    • Question: Thuộc tính position trong CSS được sử dụng để làm gì?
      Correct Answer: B. Định vị trí của phần tử trên trang web.
    • Question: Giá trị mặc định của thuộc tính position là gì?
      Correct Answer: D. static
    • Question: Giá trị relative của thuộc tính position có tác dụng gì?
      Correct Answer: B. Phần tử được định vị dựa trên vị trí gốc của chính nó.
    • Question: Khi sử dụng position: fixed; phần tử sẽ được định vị như thế nào?
      Correct Answer: B. Dựa trên toàn bộ viewport và không thay đổi khi cuộn trang.
    • Question: Khi sử dụng position: absolute; phần tử sẽ được định vị như thế nào?
      Correct Answer: B. Dựa trên phần tử cha gần nhất có thuộc tính position khác static.
  • ID: 657 - Name: Transition
    • Question: Câu hỏi 1: Thuộc tính transition trong CSS có tác dụng gì?
      Correct Answer: A. Tạo hiệu ứng chuyển đổi giữa các trạng thái CSS khác nhau
    • Question: Câu hỏi 2: Thuộc tính transition-duration có tác dụng gì?
      Correct Answer: B. Chỉ định thời gian kéo dài của hiệu ứng chuyển đổi
    • Question: Câu hỏi 3: Giá trị ease-in-out của thuộc tính transition-timing-function có tác dụng gì?
      Correct Answer: C. Hiệu ứng chuyển đổi bắt đầu và kết thúc đều chậm
    • Question: Câu hỏi 4: Thuộc tính transition-property có tác dụng gì?
      Correct Answer: B. Chỉ định thuộc tính CSS nào sẽ có hiệu ứng chuyển đổi
    • Question: Câu hỏi 5: Thuộc tính transition-delay có tác dụng gì?
      Correct Answer: C. Chỉ định độ trễ trước khi bắt đầu hiệu ứng chuyển đổi
  • ID: 658 - Name: Transform
    • Question: Câu hỏi 1: Thuộc tính transform trong CSS có tác dụng gì?
      Correct Answer: C. Thay đổi hình dạng và vị trí của phần tử
    • Question: Câu hỏi 2: Giá trị rotate(45deg) của thuộc tính transform có tác dụng gì?
      Correct Answer: A. Xoay phần tử 45 độ theo chiều kim đồng hồ
    • Question: Câu hỏi 3: Giá trị scale(2) của thuộc tính transform có tác dụng gì?
      Correct Answer: B. Tăng kích thước phần tử lên gấp đôi
    • Question: Câu hỏi 4: Thuộc tính transform: translateX(50px) có tác dụng gì?
      Correct Answer: A. Di chuyển phần tử 50px theo trục X
    • Question: Câu hỏi 5: Giá trị skew(30deg, 20deg) của thuộc tính transform có tác dụng gì?
      Correct Answer: B. Nghiêng phần tử 30 độ theo trục X và 20 độ theo trục Y
  • ID: 660 - Name: Google fonts
    • Question: Google Fonts là gì?
      Correct Answer: B. Một thư viện font chữ miễn phí được sử dụng để hiển thị văn bản trên web.
    • Question: Đâu là cú pháp đúng để sử dụng Google Fonts trong CSS?
      Correct Answer: C. font-family: 'Roboto', sans-serif;
    • Question: Tại sao nên sử dụng Google Fonts thay vì các font cục bộ?
      Correct Answer: D. Tất cả các đáp án trên.
    • Question: Nếu muốn sử dụng nhiều trọng lượng (weights) của một font từ Google Fonts, bạn cần làm gì?
      Correct Answer: B. Sử dụng tham số weights trong URL của Google Fonts.

Session: Session 08 - Hệ thống kiến thức CSS3

Lessons:

  • ID: 705 - Name: Hệ thống kiến thức CSS3
    • Question: CSS Box Model bao gồm những thành phần nào?
      Correct Answer: A. Content, Border, Margin, Padding
    • Question: Thuộc tính nào điều chỉnh khoảng cách giữa các phần tử với nhau?
      Correct Answer: A. margin
    • Question: Thuộc tính padding trong CSS được sử dụng để làm gì?
      Correct Answer: A. Tạo khoảng cách giữa nội dung và đường viền (border)
    • Question: Giá trị nào của position sẽ cố định phần tử tại một vị trí ngay cả khi cuộn trang?
      Correct Answer: D. fixed
    • Question: Giá trị display: inline; có đặc điểm gì?
      Correct Answer: B. Phần tử chỉ chiếm chiều rộng tương ứng với nội dung của nó.
    • Question: Giá trị display: block; có đặc điểm gì?
      Correct Answer: B. Phần tử tự động bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng của dòng.
    • Question: Khi sử dụng position: absolute; phần tử sẽ được định vị như thế nào?
      Correct Answer: B. Dựa trên phần tử cha gần nhất có thuộc tính position khác static.
    • Question: Nếu muốn sử dụng nhiều trọng lượng (weights) của một font từ Google Fonts, bạn cần làm gì?
      Correct Answer: B. Sử dụng tham số weights trong URL của Google Fonts.
    • Question: Đâu là cú pháp đúng để sử dụng Google Fonts trong CSS?
      Correct Answer: C. font-family: 'Roboto', sans-serif;
    • Question: Thuộc tính opacity trong CSS dùng để làm gì?
      Correct Answer: B. Điều chỉnh mức độ trong suốt của phần tử.

Session: Session 09 - CSS Layout (01)

Lessons:

  • ID: 180 - Name: Tổng quan bộ thuộc tính flexbox
  • ID: 181 - Name: Flex-direction
    • Question: Thuộc tính flex-direction được sử dụng để làm gì?
      Correct Answer: B. Xác định hướng sắp xếp của các phần tử trong Flex Container.
    • Question: Giá trị mặc định của flex-direction là gì?
      Correct Answer: C. row
    • Question: Khi flex-direction được thiết lập là row, các phần tử con sẽ sắp xếp như thế nào?
      Correct Answer: A. Theo chiều ngang, từ trái sang phải.
    • Question: Giá trị row-reverse của flex-direction có tác dụng gì?
      Correct Answer: B. Các phần tử được xếp theo hàng ngang từ phải sang trái.
    • Question: Khi sử dụng flex-direction: column, trục chính sẽ là gì?
      Correct Answer: B. Trục dọc (Y-axis).
  • ID: 182 - Name: Flex-wrap
  • ID: 183 - Name: Justify-content
  • ID: 184 - Name: Align-item
  • ID: 185 - Name: Align-content & align-self
  • ID: 186 - Name: Grid system trong CSS
  • ID: 661 - Name: Grid column

Session: Session 10 - Hệ thống kiến thức Flexbox + Grid system - CSS Layout

Lessons:

  • ID: 706 - Name: Hệ thống kiến thức Flexbox + Grid system + CSS layout
    • Question: CSS Box Model bao gồm những thành phần nào?
      Correct Answer: A. Content, Border, Margin, Padding
    • Question: Thuộc tính nào điều chỉnh khoảng cách giữa các phần tử với nhau?
      Correct Answer: A. margin
    • Question: Thuộc tính padding trong CSS được sử dụng để làm gì?
      Correct Answer: A. Tạo khoảng cách giữa nội dung và đường viền (border)
    • Question: Thuộc tính CSS nào được sử dụng để làm cho phần tử nằm ngang chính giữa trong bố cục flexbox?
      Correct Answer: B. justify-content: center;
    • Question: Giá trị nào của thuộc tính display được sử dụng để tạo flexbox?
      Correct Answer: C. flex
    • Question: Thuộc tính nào được sử dụng để kiểm soát trục chính (main axis) trong flexbox?
      Correct Answer: C. justify-content
    • Question: Trong CSS Grid, thuộc tính nào được sử dụng để chia bố cục thành các cột?
      Correct Answer: B. grid-template-columns
    • Question: Cách nào sau đây để tạo khoảng cách giữa các ô trong CSS Grid?
      Correct Answer: D. Cả A và C
    • Question: Thuộc tính nào được sử dụng để điều chỉnh hướng của phần tử trong CSS Flexbox?
      Correct Answer: B. flex-direction
    • Question: Giá trị nào của position sẽ cố định phần tử tại một vị trí ngay cả khi cuộn trang?
      Correct Answer: D. fixed

Session: Session 11 - CSS Layout (02) - Responsive design

Lessons:

  • ID: 187 - Name: Tổng quan về responsive trên nhiều thiết bị
  • ID: 188 - Name: Media query
  • ID: 189 - Name: Desktop first
    • Question: Câu hỏi 1: Desktop first design là gì?
      Correct Answer: B. Thiết kế web bắt đầu từ kích thước màn hình lớn và thu nhỏ dần
    • Question: Câu hỏi 2: Thuộc tính CSS nào thường được sử dụng để tạo breakpoint trong thiết kế desktop first?
      Correct Answer: A. max-width
    • Question: Câu hỏi 3: Lợi ích của phương pháp desktop first là gì?
      Correct Answer: B. Dễ dàng thêm các tính năng phức tạp cho phiên bản desktop trước khi điều chỉnh cho mobile
    • Question: Câu hỏi 4: Tại sao cần sử dụng thiết kế desktop first?
      Correct Answer: B. Để đảm bảo trang web hiển thị tốt trên các thiết bị có màn hình lớn trước, sau đó điều chỉnh cho màn hình nhỏ hơn
    • Question: Câu hỏi 5: Khi sử dụng phương pháp desktop first, bạn sẽ áp dụng breakpoint như thế nào?
      Correct Answer: B. Bắt đầu với thiết kế desktop và thêm các breakpoint cho màn hình nhỏ hơn
  • ID: 662 - Name: Mobile first
    • Question: Câu hỏi 1: Mobile first design là gì?
      Correct Answer: B. Thiết kế web bắt đầu từ kích thước màn hình nhỏ và mở rộng dần
    • Question: Câu hỏi 2: Thuộc tính CSS nào thường được sử dụng để tạo breakpoint trong thiết kế mobile first?
      Correct Answer: A. min-width
    • Question: Câu hỏi 3: Lợi ích của phương pháp mobile first là gì?
      Correct Answer: B. Tối ưu hóa tốt hơn cho các thiết bị di động
    • Question: Câu hỏi 4: Tại sao cần sử dụng thiết kế mobile first?
      Correct Answer: B. Để trang web hiển thị tốt trên các thiết bị có màn hình nhỏ trước, sau đó điều chỉnh cho màn hình lớn hơn
    • Question: Câu hỏi 5: Khi sử dụng phương pháp mobile first, bạn sẽ áp dụng breakpoint như thế nào?
      Correct Answer: B. Bắt đầu với thiết kế di động và thêm các breakpoint cho màn hình lớn hơn

Session: Session 12 - CSS Layout (03) - Figma + Bootstrap

Lessons:

  • ID: 190 - Name: Bootstrap cơ bản
  • ID: 191 - Name: Các component cơ bản trong Bootstrap
    • Question: Để tạo một nút màu xanh dương (primary) trong Bootstrap, bạn sử dụng lớp CSS nào?
      Correct Answer: A. btn-primary
    • Question: Thành phần nào trong Bootstrap được sử dụng để hiển thị một cửa sổ bật lên?
      Correct Answer: B. Modal
    • Question: Để tạo thanh điều hướng trong Bootstrap, bạn sử dụng lớp nào?
      Correct Answer: B. navbar
    • Question: Lớp nào được sử dụng để thêm bóng đổ vào thẻ trong Bootstrap?
      Correct Answer: B. shadow-lg
  • ID: 192 - Name: Hệ thống grid-system trong bootstrap
  • ID: 663 - Name: Giới thiệu về figma
  • ID: 664 - Name: Các thành phần cơ bản trong figma
  • ID: 665 - Name: Luyện tập chuyển đổi giao diện từ figma thành HTML + CSS

Session: Session 13 - Hệ thống kiến thức Responsive design - CSS Layout (02)

Lessons:

  • ID: 707 - Name: Hệ thống kiến thức Responsive design + CSS Layout (02)
    • Question: Responsive web design là gì?
      Correct Answer: B. Thiết kế web thay đổi dựa trên kích thước và khả năng của thiết bị người dùng
    • Question: Thuộc tính nào trong CSS được sử dụng để tạo responsive layout?
      Correct Answer: A. @media
    • Question: Tại sao responsive design lại quan trọng?
      Correct Answer: B. Để trang web hiển thị tốt trên mọi thiết bị và kích thước màn hình
    • Question: Bootstrap là gì?
      Correct Answer: B. Một framework CSS dùng để xây dựng giao diện web đáp ứng.
    • Question: Để tích hợp Bootstrap vào dự án, bạn cần:
      Correct Answer: A. Nhúng đường dẫn CSS và JS từ CDN hoặc tải về Bootstrap.
    • Question: Để tạo một nút màu xanh dương (primary) trong Bootstrap, bạn sử dụng lớp CSS nào?
      Correct Answer: A. btn-primary
    • Question: Để tạo thanh điều hướng trong Bootstrap, bạn sử dụng lớp nào?
      Correct Answer: B. navbar
    • Question: Hệ thống lưới của Bootstrap mặc định chia bố cục thành bao nhiêu cột?
      Correct Answer: C. 12
    • Question: Trong Bootstrap, col-md-4 có nghĩa là gì?
      Correct Answer: C. Cột chiếm 4 cột trên màn hình trung bình (≥768px).
    • Question: Breakpoint sm trong Bootstrap tương ứng với kích thước màn hình nào?
      Correct Answer: B. ≥576px

Session: Session 14+15 - Hackathon 01 Cắt giao diện

Lessons:

  • ID: 708 - Name: Hackathon cắt giao diện
    • Question: Responsive web design là gì?
      Correct Answer: B. Thiết kế web thay đổi dựa trên kích thước và khả năng của thiết bị người dùng
    • Question: Thuộc tính nào trong CSS được sử dụng để tạo responsive layout?
      Correct Answer: A. @media
    • Question: Tại sao responsive design lại quan trọng?
      Correct Answer: B. Để trang web hiển thị tốt trên mọi thiết bị và kích thước màn hình
    • Question: Bootstrap là gì?
      Correct Answer: B. Một framework CSS dùng để xây dựng giao diện web đáp ứng.
    • Question: Để tích hợp Bootstrap vào dự án, bạn cần:
      Correct Answer: A. Nhúng đường dẫn CSS và JS từ CDN hoặc tải về Bootstrap.
    • Question: Để tạo một nút màu xanh dương (primary) trong Bootstrap, bạn sử dụng lớp CSS nào?
      Correct Answer: A. btn-primary
    • Question: Để tạo thanh điều hướng trong Bootstrap, bạn sử dụng lớp nào?
      Correct Answer: B. navbar
    • Question: Hệ thống lưới của Bootstrap mặc định chia bố cục thành bao nhiêu cột?
      Correct Answer: C. 12
    • Question: Trong Bootstrap, col-md-4 có nghĩa là gì?
      Correct Answer: C. Cột chiếm 4 cột trên màn hình trung bình (≥768px).
    • Question: Breakpoint sm trong Bootstrap tương ứng với kích thước màn hình nào?
      Correct Answer: B. ≥576px

Session: Session 16 - Javascript Basic

Lessons:

  • ID: 193 - Name: Tổng quan về Javascript
    • Question: Câu hỏi 1: JavaScript là gì?
      Correct Answer: B. Một ngôn ngữ lập trình phía khách hàng
    • Question: Câu hỏi 2: JavaScript có thể được nhúng vào trang HTML như thế nào?
      Correct Answer: A. Bằng cách sử dụng thẻ <script>
    • Question: Câu hỏi 3: JavaScript có thể được sử dụng để làm gì?
      Correct Answer: A. Thay đổi nội dung HTML
    • Question: Câu hỏi 4: Câu lệnh alert('Hello World!'); trong JavaScript có tác dụng gì?
      Correct Answer: A. Hiển thị một thông báo trên màn hình với nội dung "Hello World!"
    • Question: Câu hỏi 5: Biến trong JavaScript được khai báo bằng từ khóa nào?
      Correct Answer: A. var
  • ID: 194 - Name: Cách nhúng JS vào HTMLBiến trong Javascript
    • Question: Câu hỏi 1: Biến nào trong số các biến sau đây được khai báo đúng trong JavaScript?
      Correct Answer: B. var bien;
    • Question: Câu hỏi 2: Câu lệnh nào sau đây được sử dụng để khai báo một biến trong JavaScript?
      Correct Answer: C. var x;
    • Question: Câu hỏi 3:Trong JavaScript, từ khóa nào được sử dụng để khai báo một biến có thể thay đổi giá trị?
      Correct Answer: A. let
    • Question: Câu hỏi 4: Điều gì sẽ xảy ra khi khai báo biến var x = 5;?
      Correct Answer: A. Khai báo biến x với giá trị ban đầu là 5
    • Question: Câu hỏi 5: Câu lệnh nào dưới đây là đúng khi khai báo một biến hằng số trong JavaScript?
      Correct Answer: C. const pi = 3.14;
  • ID: 195 - Name: Input và output trong Javascript
  • ID: 666 - Name: Type conversion trong Javascript
  • ID: 667 - Name: Kiểu dữ liệu number trong Javascript
  • ID: 668 - Name: Quy tắc đặt tên biến trong Javascript
  • ID: 669 - Name: Kiểu dữ liệu string trong Javascript (String cơ bản + template string)
  • ID: 670 - Name: Phương thức làm việc với string (String methods)
  • ID: 671 - Name: Null & Undefined trong Javascript
  • ID: 672 - Name: Math Object trong Javascript

Session: Session 17 - Hệ thống kiến thức JS Basic

Lessons:

  • ID: 709 - Name: Hệ thống kiến thức JS Basic
    • Question: JavaScript là gì?
      Correct Answer: B. Một ngôn ngữ lập trình phía khách hàng
    • Question: JavaScript có thể được nhúng vào trang HTML như thế nào?
      Correct Answer: A. Bằng cách sử dụng thẻ <script>
    • Question: Câu lệnh alert('Hello World!'); trong JavaScript có tác dụng gì?
      Correct Answer: A. Hiển thị một thông báo trên màn hình với nội dung "Hello World!"
    • Question: Hàm nào được sử dụng để hiển thị dữ liệu lên bảng điều khiển (console) trên trình duyệt?
      Correct Answer: B. console.log()
    • Question: Để chuyển dữ liệu từ prompt() thành số, bạn nên sử dụng hàm nào?
      Correct Answer: D. A và C đều đúng.
    • Question: Khi nào giá trị NaN được trả về trong JavaScript?
      Correct Answer: D. Cả B và C
    • Question: Phương thức nào được sử dụng để lấy giá trị tuyệt đối của một số?
      Correct Answer: A. Math.abs()
    • Question: Phương thức nào sau đây trả về một số ngẫu nhiên từ 0 đến nhỏ hơn 1?
      Correct Answer: A. Math.random()
    • Question: Đâu là cách khai báo chuỗi hợp lệ trong JavaScript?
      Correct Answer: D. Tất cả các đáp án trên
    • Question: Hàm nào được sử dụng để chuyển đổi một chuỗi thành số nguyên?
      Correct Answer: B. parseInt()

Session: Session 18 - Control statement

Lessons:

  • ID: 198 - Name: Kiểu dữ liệu Boolean trong Javascript
  • ID: 199 - Name: Comparison operator trong Javascript (Toán tử so sánh)
    • Question: Toán tử nào sau đây kiểm tra bằng nghiêm ngặt?
      Correct Answer: C. ===
    • Question: Biểu thức nào sau đây trả về false?
      Correct Answer: C. null == 0
    • Question: Toán tử !== trong JavaScript được sử dụng để làm gì?
      Correct Answer: B. Kiểm tra không bằng nghiêm ngặt
    • Question: Biểu thức nào sau đây trả về true?
      Correct Answer: B. "0" == false
  • ID: 200 - Name: Conditional statement
  • ID: 673 - Name: Logical Operator trong Javascript
  • ID: 674 - Name: Switch/case
  • ID: 675 - Name: Truethy & falsy trong Javascript

Session: Session 19 - Hệ thống kiến thức Control Statement

Lessons:

  • ID: 710 - Name: Hệ thống kiến thức control statement
    • Question: Giá trị nào sau đây được coi là falsy trong JavaScript?
      Correct Answer: C. undefined
    • Question: Toán tử ! được sử dụng để làm gì trong JavaScript?
      Correct Answer: B. Đảo ngược giá trị Boolean.
    • Question: Biểu thức nào sau đây trả về true?
      Correct Answer: B. " " || false
    • Question: Toán tử !== trong JavaScript được sử dụng để làm gì?
      Correct Answer: B. Kiểm tra không bằng nghiêm ngặt
    • Question: Cấu trúc câu lệnh if-else trong JavaScript là gì?
      Correct Answer: A. if (condition) { // code } else { // code }
    • Question: Điều gì xảy ra khi điều kiện trong câu lệnh if là true?
      Correct Answer: B. Khối mã trong phần if được thực thi
    • Question: Điều gì xảy ra khi điều kiện trong câu lệnh if là false và có khối else?
      Correct Answer: B. Khối mã trong phần else được thực thi
    • Question: Kết quả của biểu thức sau là gì? (!true)
      Correct Answer: B. false
    • Question: Cấu trúc cơ bản của câu lệnh switch-case trong JavaScript là gì?
      Correct Answer: A. switch(expression) { case value1: // code break; case value2: // code break; default: // code }
    • Question: Điều gì xảy ra nếu không có từ khóa break trong một case của câu lệnh switch?
      Correct Answer: C. Các case tiếp theo sẽ được thực thi

Session: Session 20 - Loop

Lessons:

  • ID: 201 - Name: For...loop trong Javascript
    • Question: Câu hỏi 1: Cấu trúc cơ bản của vòng lặp for trong JavaScript là gì?
      Correct Answer: A. for (initialization; condition; increment/decrement) { // code }
    • Question: Câu hỏi 2: Vòng lặp for được sử dụng để làm gì trong JavaScript?
      Correct Answer: A. Lặp qua một khối mã nhiều lần
    • Question: Câu hỏi 3: Điều kiện trong vòng lặp for được kiểm tra khi nào?
      Correct Answer: A. Trước khi vòng lặp bắt đầu và sau mỗi lần lặp
    • Question: Câu hỏi 4: Điều gì xảy ra nếu điều kiện trong vòng lặp for luôn đúng?
      Correct Answer: A. Vòng lặp sẽ thực hiện mãi mãi
    • Question: Câu hỏi 5: Câu lệnh nào có thể được sử dụng để thoát khỏi vòng lặp for trước khi điều kiện trở thành false?
      Correct Answer: B. break
  • ID: 202 - Name: Infinite loop & Nested loop trong Javascript
  • ID: 203 - Name: Break & continue
  • ID: 204 - Name: While...loop
  • ID: 676 - Name: Do-while...loop

Session: Session 21 - Hệ thống kiến thức Loop (Vòng lặp)

Lessons:

  • ID: 711 - Name: Hệ thống kiến thức loop
    • Question: Cấu trúc cơ bản của vòng lặp for trong JavaScript là gì?
      Correct Answer: A. for (initialization; condition; increment/decrement) { // code }
    • Question: Điều gì xảy ra nếu điều kiện trong vòng lặp for luôn đúng?
      Correct Answer: A. Vòng lặp sẽ thực hiện mãi mãi
    • Question: Câu lệnh nào có thể được sử dụng để thoát khỏi vòng lặp for trước khi điều kiện trở thành false?
      Correct Answer: B. break
    • Question: Giá trị nào có thể thoát khỏi vòng lặp vô hạn?
      Correct Answer: D. Tất cả các đáp án trên
    • Question: Từ khóa break được sử dụng trong vòng lặp để làm gì?
      Correct Answer: B. Để dừng vòng lặp hiện tại và thoát khỏi vòng lặp.
    • Question: Từ khóa continue có tác dụng gì trong vòng lặp?
      Correct Answer: B. Bỏ qua phần còn lại của vòng lặp hiện tại và tiếp tục với vòng lặp tiếp theo.
    • Question: Cấu trúc cơ bản của vòng lặp while trong JavaScript là gì?
      Correct Answer: A. while (condition) { // code }
    • Question: Câu lệnh nào có thể được sử dụng để thoát khỏi vòng lặp while trước khi điều kiện trở thành false?
      Correct Answer: B. break
    • Question: Cấu trúc cơ bản của vòng lặp do-while trong JavaScript là gì?
      Correct Answer: A. do { // code } while (condition);
    • Question: Vòng lặp do-while được sử dụng để làm gì trong JavaScript?
      Correct Answer: B. Lặp qua một khối mã ít nhất một lần và tiếp tục khi điều kiện đúng

Session: Session 22 - Array

Lessons:

  • ID: 205 - Name: Tổng quan về array trong Javascript
    • Question: Cú pháp nào sau đây đúng để khai báo một mảng rỗng trong JavaScript?
      Correct Answer: D. Cả B và C đều đúng
    • Question: Kiểu dữ liệu của mảng trong JavaScript là gì?
      Correct Answer: A. Object
    • Question: Bạn có thể lưu trữ những kiểu dữ liệu nào trong một mảng JavaScript?
      Correct Answer: C. Bất kỳ kiểu dữ liệu nào
    • Question: Câu nào đúng về mảng trong JavaScript?
      Correct Answer: C. Mảng trong JavaScript là một đối tượng đặc biệt.
    • Question: Đoạn mã nào dưới đây sẽ tạo một mảng gồm 3 phần tử?
      Correct Answer: D. A và C
  • ID: 206 - Name: Thuật ngữ cơ bản trong array (element, index và length)
  • ID: 207 - Name: Truy cập vào phần tử trong mảng
  • ID: 677 - Name: Cập nhật phần tử trong array
  • ID: 678 - Name: Thêm mới phần tử vào trong array
  • ID: 679 - Name: Xoá phần tử trong array
  • ID: 680 - Name: Cách sử dụng phương thức splice trong array
  • ID: 681 - Name: Array methods cơ bản
  • ID: 682 - Name: Vòng lặp nâng cao duyệt qua mảng

Session: Session 23 - Hệ thống kiến thức, luyện tập về Mảng 01 (array)

Lessons:

  • ID: 712 - Name: Hệ thống kiến thức, luyện tập về mảng (01)
    • Question: Làm thế nào để khai báo một mảng trong JavaScript?
      Correct Answer: B. let arr = [];
    • Question: Phương thức nào dùng để thêm phần tử vào cuối mảng?
      Correct Answer: A. push()
    • Question: Phương thức nào dùng để chuyển đổi mảng thành chuỗi?
      Correct Answer: B. toString()
    • Question: Làm thế nào để kiểm tra xem một biến có phải là mảng không?
      Correct Answer: D. Cả A và C
    • Question: Phương thức nào dùng để xóa phần tử đầu tiên trong mảng?
      Correct Answer: B. shift()
    • Question: <p>Kết quả của đoạn code sau là gì?&nbsp;</p><p>let arr = [5, 10, 15];&nbsp;</p><p>console.log(arr.length);</p>
      Correct Answer: B. 3
    • Question: <p>Kết quả của đoạn code sau là gì?&nbsp;</p><p>let arr = [1, 2, 3];&nbsp;</p><p>arr.pop();&nbsp;</p><p>console.log(arr);</p>
      Correct Answer: B. [1, 2]
    • Question: <p>Cách nào để truy cập phần tử thứ hai trong mảng sau?&nbsp;</p><p>let numbers = [10, 20, 30, 40];</p>
      Correct Answer: B. numbers[1];
    • Question: Phương thức nào dùng để nối hai mảng trong JavaScript?
      Correct Answer: A. .concat()
    • Question: <p>Kết quả của đoạn mã sau là gì?&nbsp;</p><p>let numbers = [1, 2, 3];&nbsp;</p><p>numbers.unshift(0);&nbsp;</p><p>console.log(numbers);</p>
      Correct Answer: B. [0, 1, 2, 3]

Session: Session 24 - Hệ thống kiến thức, luyện tập về Mảng 02 (array)

Lessons:

  • ID: 713 - Name: Hệ thống kiến thức, luyện tập về mảng (02)
    • Question: Trong mảng let numbers = [5, 10, 15, 20]; phần tử ở vị trí thứ 3 là gì?
      Correct Answer: C. 15
    • Question: <p>Cách nào để thay đổi giá trị của phần tử thứ 2 trong mảng sau?&nbsp;</p><p>let fruits = ["apple", "banana", "cherry"];</p>
      Correct Answer: C. fruits[1] = "orange";
    • Question: Mảng trong JavaScript có thể chứa các kiểu dữ liệu nào?
      Correct Answer: C. Bất kỳ kiểu dữ liệu nào
    • Question: Để lấy độ dài của một mảng, ta sử dụng thuộc tính nào?
      Correct Answer: B. arr.length
    • Question: Chỉ số (index) của phần tử đầu tiên trong mảng là bao nhiêu?
      Correct Answer: A. 0
    • Question: <p>Kết quả của đoạn mã sau là gì?&nbsp;</p><p>let colors = ["red", "green", "blue"];&nbsp;</p><p>console.log(colors[3]);</p>
      Correct Answer: B. undefined
    • Question: <p>Đoạn mã sau sẽ hiển thị gì?&nbsp;</p><p>let numbers = [3, 6, 9, 12];&nbsp;</p><p>console.log(numbers[1] + numbers[2]);</p>
      Correct Answer: C. 15
    • Question: Nếu một mảng có 5 phần tử, chỉ số (index) lớn nhất của mảng là bao nhiêu?
      Correct Answer: B. 4
    • Question: Mảng trong JavaScript là kiểu dữ liệu gì?
      Correct Answer: B. Object
    • Question: Cách nào dưới đây KHÔNG phải là cách khai báo một mảng hợp lệ trong JavaScript?
      Correct Answer: C. let arr = {1, 2, 3};

Session: Session 25 - Function (01)

Lessons:

  • ID: 208 - Name: Giới thiệu về hàm trong Javascript
    • Question: Câu hỏi 1: Cú pháp nào đúng để khai báo một hàm trong JavaScript?
      Correct Answer: A. function myFunction() { // code }
    • Question: Câu hỏi 2: Hàm trong JavaScript được sử dụng để làm gì?
      Correct Answer: B. Thực hiện một khối mã lệnh nhiều lần
    • Question: Câu hỏi 3: Cú pháp nào đúng để gọi một hàm myFunction đã được khai báo?
      Correct Answer: A. myFunction()
    • Question: Câu hỏi 4: Hàm có thể trả về giá trị nào trong JavaScript?
      Correct Answer: C. Có thể trả về bất kỳ giá trị nào
    • Question: Câu hỏi 5: Điều gì xảy ra nếu không có giá trị trả về trong hàm?
      Correct Answer: A. Hàm sẽ trả về giá trị undefined
  • ID: 209 - Name: Tham số và đối số
  • ID: 210 - Name: Từ khóa return
  • ID: 211 - Name: Function expression

Session: Session 26 - Function (02), Array methods

Lessons:

  • ID: 683 - Name: Higher order function (HOF) trong Javascript
    • Question: Câu hỏi 1: Callback function là gì trong JavaScript?
      Correct Answer: B. Một hàm được truyền vào hàm khác như một đối số và được gọi lại bên trong hàm đó
    • Question: Câu hỏi 2: Cú pháp nào đúng để sử dụng callback function?
      Correct Answer: A. function myFunction(callback) { callback(); }
    • Question: Câu hỏi 3: Callback function thường được sử dụng trong tình huống nào?
      Correct Answer: A. Khi cần thực hiện một hành động sau khi một hành động khác đã hoàn thành
    • Question: Câu hỏi 4: Điều gì xảy ra nếu callback function không được truyền vào hàm?
      Correct Answer: D. Hàm sẽ báo lỗi
    • Question: Câu hỏi 5: Callback function có thể được sử dụng với các loại hàm nào trong JavaScript?
      Correct Answer: C. Với cả hàm đồng bộ và hàm bất đồng bộ
  • ID: 684 - Name: For...each method
    • Question: Phương thức forEach thuộc kiểu dữ liệu nào trong JavaScript?
      Correct Answer: C. Object
    • Question: forEach trả về giá trị gì?
      Correct Answer: C. undefined.
    • Question: Phương thức forEach có thể được sử dụng để dừng vòng lặp bằng cách nào?
      Correct Answer: C. Không thể dừng vòng lặp.
    • Question: Phương thức forEach có trả về mảng mới không?
      Correct Answer: C. Không, nó không trả về gì (undefined).
  • ID: 685 - Name: Find
  • ID: 686 - Name: FindIndex
  • ID: 687 - Name: Includes
  • ID: 688 - Name: Map
  • ID: 689 - Name: Filter
  • ID: 690 - Name: Reduce
  • ID: 691 - Name: Some & Every

Session: Session 27 - Hệ thống kiến thức Function

Lessons:

  • ID: 714 - Name: Hệ thống kiến thức function
    • Question: Làm thế nào để lặp qua tất cả các phần tử trong mảng?
      Correct Answer: D. Tất cả các đáp án trên
    • Question: Phương thức nào trả về một mảng mới chứa các phần tử thỏa mãn điều kiện của hàm kiểm tra?
      Correct Answer: A. filter()
    • Question: Làm thế nào để gọi một hàm trong JavaScript?
      Correct Answer: B. myFunction()
    • Question: Đâu là cú pháp đúng để định nghĩa một hàm trong JavaScript?
      Correct Answer: B. function myFunction() {}
    • Question: Một hàm nhận biết được có trả về giá trị không, từ khóa nào được sử dụng?
      Correct Answer: B. Từ khóa return
    • Question: <p>Kết quả của đoạn mã sau là gì?&nbsp;</p><p>const arr = ["a", "b", "c"];&nbsp;</p><p>console.log(arr.reverse());</p>
      Correct Answer: B. ["c", "b", "a"]
    • Question: <p>Kết quả của đoạn mã sau là gì?&nbsp;</p><p>const numbers = [1, 2, 3, 4];&nbsp;</p><p>const doubled = numbers.map(num =&gt; num * 2);&nbsp;</p><p>console.log(doubled);</p>
      Correct Answer: B. [2, 4, 6, 8]
    • Question: <p>Hàm dưới đây trả về kết quả gì?&nbsp;</p><p>function add(a, b) { return a + b; }&nbsp;</p><p>console.log(add(2, "3"));</p>
      Correct Answer: B. "23"
    • Question: Phương thức nào trả về chỉ số của phần tử đầu tiên thỏa mãn điều kiện trong mảng?
      Correct Answer: C. .findIndex()
    • Question: <p>Kết quả của đoạn mã sau là gì?&nbsp;</p><p>const arr = [1, 2, 3, 4];&nbsp;</p><p>console.log(arr.slice(1, 3));</p>
      Correct Answer: B. [2, 3]

Session: Session 28 - Object

Lessons:

  • ID: 212 - Name: Tổng quan về object trong Javascript
    • Question: Câu hỏi 1: Đối tượng (object) trong JavaScript là gì?
      Correct Answer: B. Một tập hợp các cặp key-value
    • Question: Câu hỏi 2: Đối tượng trong JavaScript có thể chứa gì?
      Correct Answer: D. Chứa các thuộc tính và phương thức
    • Question: Câu hỏi 3: Đối tượng trong JavaScript được sử dụng để làm gì?
      Correct Answer: A. Lưu trữ các giá trị khác nhau dưới dạng cặp key-value
    • Question: Câu hỏi 4: Cú pháp nào đúng để khai báo một đối tượng rỗng?
      Correct Answer: A. var obj = {};
    • Question: Câu hỏi 5: Đối tượng trong JavaScript có thể chứa các phương thức không?
      Correct Answer: A. Có
  • ID: 213 - Name: Truy cập vào thuộc tính trong đối tượng
  • ID: 214 - Name: Duyệt qua đối tượng
  • ID: 215 - Name: Các thao tác thêm, sửa, xoá thuộc tính trong đối tượng
  • ID: 216 - Name: Mảng đối tượng
  • ID: 217 - Name: Luyệt tập sử dụng mảng đối tượng

Session: Session 29 - Hệ thống kiến thức Object, luyện tập (01)

Lessons:

  • ID: 724 - Name: Hệ thống kiến thức object, luyện tập 01
    • Question: Cách nào dưới đây khai báo một object hợp lệ trong JavaScript?
      Correct Answer: D. Tất cả các đáp án trên
    • Question: Làm sao để truy cập giá trị "John" trong object sau? let person = { name: "John", age: 25 };
      Correct Answer: D. A và B đúng
    • Question: Cách nào dưới đây để thêm một thuộc tính mới vào object? let car = { brand: "Toyota" };
      Correct Answer: D. Tất cả các đáp án trên
    • Question: Kết quả của đoạn mã sau là gì? let obj1 = { name: "Alice" }; let obj2 = obj1; obj2.name = "Bob"; console.log(obj1.name);
      Correct Answer: B. "Bob"
    • Question: Cách nào dưới đây để xóa thuộc tính "age" khỏi object? let user = { name: "John", age: 30 };
      Correct Answer: A. delete user.age;

Session: Session 30 - Hệ thống kiến thức Object, luyện tập (02)

Lessons:

  • ID: 726 - Name: Hệ thống kiến thức object, luyện tập 02
    • Question: Object trong JavaScript được khai báo bằng ký hiệu nào?
      Correct Answer: B. {}
    • Question: Kết quả của đoạn mã sau là gì? let obj = {}; console.log(obj.age);
      Correct Answer: A. undefined
    • Question: Kết quả của đoạn mã sau là gì? let car = { brand: "Toyota", color: "red" }; console.log(Object.keys(car));
      Correct Answer: B. ["brand", "color"]
    • Question: Kết quả của đoạn mã sau là gì? let obj = { a: 10, b: 20 }; console.log(obj["b"]);
      Correct Answer: B. 20
    • Question: Kết quả của đoạn mã sau là gì? let obj = { x: 5 }; obj.y = obj.x; console.log(obj);
      Correct Answer: A. { x: 5, y: 5 }

Session: Session 31 - DOM & Event

Lessons:

  • ID: 218 - Name: Tổng quan về DOM
    • Question: Câu hỏi 1: DOM là viết tắt của từ gì?
      Correct Answer: A. Document Object Model
    • Question: Câu hỏi 2: DOM là gì?
      Correct Answer: C. Một mô hình hướng đối tượng để đại diện cho cấu trúc của tài liệu HTML hoặc XML
    • Question: Câu hỏi 3: DOM cho phép bạn làm gì?
      Correct Answer: A. Thay đổi cấu trúc, kiểu dáng và nội dung của trang web
    • Question: Câu hỏi 4: Trong DOM, tài liệu được biểu diễn dưới dạng gì?
      Correct Answer: A. Cây (tree)
    • Question: Câu hỏi 5: DOM là một phần của tiêu chuẩn nào?
      Correct Answer: D. W3C
  • ID: 219 - Name: Truy xuất phần tử HTML trong DOM (id, class và tagname)
  • ID: 220 - Name: innerText vs textContent vs innerHTML
  • ID: 221 - Name: setAttribute & getAttribute
  • ID: 692 - Name: Điều chỉnh style của các phần tử HTML
  • ID: 693 - Name: Sử dụng danh sách class của HTML
  • ID: 694 - Name: DOM traversal
  • ID: 695 - Name: Append child & remove
  • ID: 696 - Name: Tổng quan về event
  • ID: 697 - Name: Gắn sự kiện cho các phần tử HTML (Inline, on và addEventListener)
  • ID: 698 - Name: Mouse & Keyboard event
  • ID: 699 - Name: Form submit event

Session: Session32 - Hệ thống kiến thức DOM & Event, luyện tập (01)

Lessons:

Session: Session 33 - Hệ thống kiến thức DOM & Event, luyện tập (02)

Lessons:

Session: Session 34 - Browser Storage

Lessons:

  • ID: 222 - Name: Tổng quan về browser storage
  • ID: 223 - Name: Local storage
  • ID: 700 - Name: Session storage
  • ID: 701 - Name: Luyện tập tổng hợp lưu trữ dữ liệu với local storage

Session: Session 35 - Hệ thống kiến thức DOM, Event + Browser Storage (01)

Lessons:

Session: Session 36 - Hệ thống kiến thức DOM, Event + Browser Storage (02)

Lessons:

Session: Session 37 - Hướng dẫn project cuối module

Lessons:

  • ID: 224 - Name: Giới thiệu Bootstrap và cách cài đặt
  • ID: 225 - Name: Hệ thống Grid trong Bootstrap