Hệ thống học tập HTML và CSS toàn diện từ cơ bản đến nâng cao, được thiết kế đặc biệt cho người Việt Nam với giải thích song ngữ Việt-Anh.

Đây là một hệ thống học tập hoàn chỉnh về HTML và CSS, bao gồm:

• 50+ bài học từ cơ bản đến nâng cao
• 100+ ví dụ thực tế với code mẫu
• 20+ dự án thực hành để áp dụng kiến thức
• Giải thích song ngữ Việt-Anh cho tất cả thuật ngữ
• Bài tập và kiểm tra sau mỗi bài học
• Progress tracking để theo dõi tiến độ học tập

learn-html-css/
├── index.html                 # Trang chủ hệ thống học tập
├── assets/
│   ├── style.css             # CSS chính
│   └── navigation.css        # CSS cho navigation
├── lessons/
│   ├── html-basics/          # HTML cơ bản
│   │   ├── 01-html-structure/
│   │   ├── 02-heading-tags/
│   │   ├── 03-paragraph-text/
│   │   ├── 04-links-images/
│   │   ├── 05-lists-tables/
│   │   └── 06-forms-inputs/
│   ├── css-basics/           # CSS cơ bản
│   │   ├── 01-css-introduction/
│   │   ├── 02-selectors/
│   │   ├── 03-box-model/
│   │   ├── 04-layout-flexbox/
│   │   └── 05-responsive-design/
│   ├── html-advanced/        # HTML nâng cao
│   ├── css-advanced/         # CSS nâng cao
│   └── projects/             # Dự án thực hành
└── README.md

1. HTML Structure - Cấu trúc HTML cơ bản
2. Heading Tags - Thẻ tiêu đề (h1-h6)
3. Paragraph & Text - Thẻ đoạn văn và văn bản
4. Links & Images - Liên kết và hình ảnh
5. Lists & Tables - Danh sách và bảng
6. Forms & Inputs - Biểu mẫu và đầu vào

1. CSS Introduction - Giới thiệu CSS
2. CSS Selectors - Bộ chọn CSS
3. Box Model - Mô hình hộp
4. Flexbox Layout - Bố cục linh hoạt
5. Responsive Design - Thiết kế đáp ứng

• HTML5 APIs
• Semantic HTML
• Accessibility
• SEO Best Practices
• Performance Optimization

• CSS Grid
• CSS Animations
• CSS Variables
• Advanced Layouts
• CSS Preprocessors

# Mở file index.html trong trình duyệt
open index.html

• Mỗi bài học có quiz để kiểm tra kiến thức
• Progress được lưu trong localStorage
• Có thể quay lại bài học bất cứ lúc nào

• Mỗi bài học có bài tập thực hành
• Code mẫu có thể copy và chạy ngay
• Dự án thực hành ở cuối mỗi module

• Tất cả thuật ngữ có giải thích song ngữ
• Thuật ngữ tiếng Anh được highlight
• Giải thích chi tiết bằng tiếng Việt

• Code examples có thể chạy trực tiếp
• Quiz tương tác với feedback ngay lập tức
• Progress tracking tự động

• Tương thích với mọi thiết bị
• Mobile-first approach
• Touch-friendly interface

• Mục tiêu học tập rõ ràng
• Lý thuyết → Thực hành → Kiểm tra
• Bài tập từ dễ đến khó

• Mục tiêu: Hiểu cấu trúc cơ bản của HTML
• Nội dung: DOCTYPE, html, head, body, meta tags
• Thực hành: Tạo trang HTML đầu tiên
• Quiz: 2 câu hỏi kiểm tra kiến thức

• Mục tiêu: Sử dụng heading để tạo cấu trúc
• Nội dung: h1-h6, hierarchy, SEO
• Thực hành: Tạo trang web với heading
• Quiz: 3 câu hỏi về heading

• Sử dụng HTML structure và heading
• Responsive design với CSS
• Semantic HTML cho SEO

• Forms và input elements
• Image gallery
• Contact form

• Article layout
• Navigation menu
• Responsive design

Hệ thống theo dõi tiến độ học tập bao gồm:

• ✅ Bài học đã hoàn thành
• 📊 Tỷ lệ hoàn thành
• 🎯 Mục tiêu tiếp theo
• 📈 Thống kê học tập

Nếu bạn muốn đóng góp vào dự án này:

1. Fork repository
2. Tạo branch mới cho feature
3. Commit changes
4. Push to branch
5. Tạo Pull Request

Dự án này được tạo bởi ndyudev và được phát hành dưới MIT License.

• Tác giả: ndyudev
• Email: [your-email@example.com]
• GitHub: [your-github-profile]

🎉 Chúc bạn học tập hiệu quả và thành công trong việc làm chủ HTML & CSS!