Tài liệu - DangVu

🚀 Bắt đầu với Code

Cách sử dụng

Chọn ngôn ngữ: Click vào JavaScript, Python, HTML hoặc CSS
Gõ theo code: Nhập chính xác đoạn code hiển thị
Theo dõi tiến độ: Xem WPM, độ chính xác và thời gian
Hoàn thành: Gõ đúng toàn bộ để xem kết quả

⌨️ Phím tắt

`Tab`	Thụt lề 4 spaces
`Shift + Tab`	Giảm lề 4 spaces
`Enter`	Xuống dòng với auto-indent
`Ctrl + Enter`	Reset bài tập
`Esc`	Đóng menu

💡 Mẹo học tập

Bắt đầu với code đơn giản, từ từ nâng cao
Tập trung vào độ chính xác trước, sau đó đến tốc độ
Luyện tập đều đặn 15-30 phút mỗi ngày
Quan sát cú pháp và cấu trúc code
Bật âm thanh để có feedback ngay lập tức

📄 HTML - HyperText Markup Language

HTML là gì?

HTML là ngôn ngữ đánh dấu để tạo cấu trúc trang web. Mỗi trang web đều được viết bằng HTML.

Cấu trúc cơ bản

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Tiêu đề trang</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>Đây là đoạn văn bản.</p>
</body>
</html>

Các thẻ HTML thường dùng

`<h1> - <h6>`	Tiêu đề (h1 lớn nhất, h6 nhỏ nhất)
`<p>`	Đoạn văn bản
`<a href="">`	Liên kết
`<img src="">`	Hình ảnh
`<div>`	Container (khối)
`<span>`	Container (inline)
`<ul>, <li>`	Danh sách không thứ tự
`<button>`	Nút bấm

🎨 CSS - Cascading Style Sheets

CSS là gì?

CSS là ngôn ngữ để trang trí và định dạng giao diện web. CSS giúp website đẹp và chuyên nghiệp.

Cú pháp CSS

selector {
    property: value;
    property: value;
}

Ví dụ:

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Các Selector cơ bản

`element`	Chọn theo tên thẻ: `p { }`
`.class`	Chọn theo class: `.button { }`
`#id`	Chọn theo id: `#header { }`
`*`	Chọn tất cả elements
`element element`	Chọn con cháu: `div p { }`

Thuộc tính CSS quan trọng

color: Màu chữ
background-color: Màu nền
font-size: Cỡ chữ
font-weight: Độ đậm chữ
margin: Khoảng cách bên ngoài
padding: Khoảng cách bên trong
border: Viền
display: Cách hiển thị (block, flex, grid...)

⚡ JavaScript - Ngôn ngữ Lập trình Web

JavaScript là gì?

JavaScript là ngôn ngữ lập trình để tạo tính tương tác cho website. Mọi website hiện đại đều dùng JavaScript.

Biến (Variables)

// Khai báo biến
let name = "Alice";      // Có thể thay đổi
const age = 25;          // Không thể thay đổi
var city = "Hanoi";      // Cách cũ (tránh dùng)

// Kiểu dữ liệu
let number = 42;         // Number
let text = "Hello";      // String
let isTrue = true;       // Boolean
let nothing = null;      // Null
let notDefined;          // Undefined

Hàm (Functions)

// Khai báo function
function greet(name) {
    return "Hello, " + name;
}

// Arrow function (ES6)
const greet = (name) => {
    return `Hello, ${name}`;
};

// Gọi function
let message = greet("Alice");
console.log(message);  // "Hello, Alice"

Điều kiện (If/Else)

let age = 18;

if (age >= 18) {
    console.log("Đủ tuổi");
} else if (age >= 13) {
    console.log("Thiếu niên");
} else {
    console.log("Trẻ em");
}

Vòng lặp (Loops)

// For loop
for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

// While loop
let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}

// Array forEach
const fruits = ["apple", "banana", "orange"];
fruits.forEach(fruit => {
    console.log(fruit);
});

DOM Manipulation

// Lấy element
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.myClass');

// Thay đổi nội dung
element.textContent = "New text";
element.innerHTML = "<strong>Bold text</strong>";

// Thay đổi style
element.style.color = "red";
element.style.fontSize = "20px";

// Thêm/xóa class
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('open');

// Event listener
element.addEventListener('click', () => {
    console.log('Clicked!');
});

⌨️ Phím tắt & Tính năng

Phím tắt chính

Phím	Chức năng	Mô tả
`Tab`	Thụt lề	Thêm 4 spaces vào đầu dòng
`Shift + Tab`	Giảm lề	Xóa 4 spaces ở đầu dòng
`Enter`	Xuống dòng	Tự động thụt lề theo ngữ cảnh
`Backspace`	Xóa thông minh	Xóa 4 spaces cùng lúc nếu ở đầu dòng
`Ctrl + Enter`	Reset	Làm lại bài tập từ đầu
`Esc`	Thoát	Đóng menu/unfocus input

Auto-Indent thông minh

Khi nhấn Enter sau các ký tự sau, indent sẽ tự động tăng:

JavaScript: {, (, [, function, if, for...
Python: : (sau def, class, if, for...)
HTML: Sau mở thẻ <div>, <body>...
CSS: Sau {

Auto-Close Brackets

Khi gõ ký tự mở, ký tự đóng sẽ tự động thêm:

{ → {}
( → ()
[ → []
" → ""
' → ''

Hiệu ứng âm thanh

🔊 Gõ đúng: Tiếng "ting" cao
❌ Gõ sai: Tiếng "buzz" thấp
↩️ Enter/Space: Tiếng "blip"
⌫ Backspace: Tiếng "pop"
🎉 Hoàn thành: Giai điệu vui nhộn

Tài liệu Hướng dẫn