🚀 30 Ngày Học HTML, CSS & JavaScript

Dự án học tập theo series video tutorial từ kênh Nodemy

📖 Giới thiệu

Đây là dự án học tập theo series video tutorial "30 Ngày Học HTML, CSS & JavaScript" từ kênh Nodemy.

Dự án này được thiết kế để giúp bạn từ một người mới bắt đầu trở thành một Frontend Developer có khả năng xây dựng các trang web hoàn chỉnh chỉ trong 30 ngày. Mỗi ngày sẽ có một bài học mới với các kỹ năng và dự án thực tế.

🎯 Mục tiêu dự án

✅ Học HTML, CSS, JavaScript từ cơ bản đến nâng cao
✅ Thực hành xây dựng 30+ mini projects
✅ Tạo portfolio cá nhân với các dự án thực tế
✅ Phát triển kỹ năng responsive design
✅ Làm quen với modern web development tools

📊 Tiến độ học tập

Tuần	Ngày	Trạng thái	Project
Tuần 1	Day 1-5	✅ Hoàn thành	5/5 projects
Tuần 2	Day 6-10	🔄 Đang học	4/5 projects
Tuần 3	Day 11-15	⏳ Chưa bắt đầu	0/5 projects
Tuần 4	Day 16-20	⏳ Chưa bắt đầu	0/5 projects
Tuần 5	Day 21-25	⏳ Chưa bắt đầu	0/5 projects
Tuần 6	Day 26-30	⏳ Chưa bắt đầu	0/5 projects

Tổng tiến độ: 5/30 (16.7%)

📁 Cấu trúc dự án

30-day-html-css-js/
├── 📁 Day1/ ✅
│   ├── 📁 assets/
│   │   ├── 📁 image/
│   │   │   └── NikeZoomKD12.png
│   │   └── style.css
│   └── day1.html
├── 📁 Day2/ ✅
│   ├── 📁 assets/
│   │   ├── 📁 icon/
│   │   │   └── fontawesome-free-6.7.2-web/
│   │   ├── 📁 images/
│   │   │   └── dyudev_selfie_1.jpg
│   │   └── style.css
│   └── day2.html
├── 📁 Day3/ ✅
│   ├── 📁 assets/
│   ├── 📁 js/
│   └── day3.html
├── 📁 Day4/ ✅
│   ├── 📁 assets/
│   │   ├── style.css
│   │   └── 📁 image/
│   │       └── 1.jpeg, 2.jpeg, ...
│   ├── 📁 js/
│   │   └── main.js
│   └── day4.html
├── 📁 Day5/ ✅
│   ├── 📁 assets/
│   │   └── 📁 css/
│   │       └── style.css
│   ├── 📁 js/
│   │   └── main.js
│   └── day5.html
├── 📁 Day6/ ✅
├── 📁 Day7/ ✅
├── 📁 Day8/ ✅
├── 📁 Day9/ ✅
├── 📁 Day10/ ✅
├── 📁 Day11/ ⏳
├── 📁 Day12/ ⏳
├── 📁 Day13/ ⏳
├── 📁 Day14/ ⏳
├── 📁 Day15/ ⏳
├── 📁 Day16/ ⏳
├── 📁 Day17/ ⏳
├── 📁 Day18/ ⏳
├── 📁 Day19/ ⏳
├── 📁 Day20/ ⏳
├── 📁 Day21/ ⏳
├── 📁 Day22/ ⏳
├── 📁 Day23/ ⏳
├── 📁 Day24/ ⏳
├── 📁 Day25/ ⏳
├── 📁 Day26/ ⏳
├── 📁 Day27/ ⏳
├── 📁 Day28/ ⏳
├── 📁 Day29/ ⏳
├── 📁 Day30/ ⏳
├── 📁 resources/
│   ├── 📁 cheatsheets/
│   ├── 📁 templates/
│   └── 📁 tools/
├── 📁 projects/
│   ├── 📁 portfolio/
│   ├── 📁 e-commerce/
│   └── 📁 blog/
└── README.md

📋 Mô tả thư mục:

📁 DayX/: Mỗi thư mục chứa bài học của một ngày
- dayX.html: File HTML chính của ngày X
- 📁 assets/: Tài nguyên (CSS, JS, hình ảnh, icons)
- 📁 js/: Thư mục chứa file JavaScript (nếu có)
- README.md: Hướng dẫn chi tiết cho ngày đó (nếu có)
📁 resources/: Tài liệu tham khảo và công cụ hỗ trợ
📁 projects/: Các dự án tổng hợp sau khi hoàn thành

🛠️ Công nghệ và công cụ

🎨 Frontend Technologies

Technology	Version	Mục đích
	HTML5	Cấu trúc và semantic markup
	CSS3	Styling, layout và animations
	ES6+	Logic và tương tác
	SCSS	CSS preprocessor

🛠️ Development Tools

Tool	Mục đích
	Code editor chính
	Development server
	Version control
	Debugging

📚 Libraries & Frameworks

Library	Mục đích
	Icon library
	Typography
	Icon library

📚 Lộ trình học tập chi tiết

🗓️ Tuần 1: Nền tảng HTML & CSS

Ngày	Project	Trạng thái	Mô tả
Day 1	✅ Product Card	Hoàn thành	Card sản phẩm Nike với hover effects
Day 2	✅ Profile Card	Hoàn thành	Profile card với social icons
Day 3	✅ Modal Popup	Hoàn thành	Modal popup với JavaScript
Day 4	✅ Image Gallery	Hoàn thành	Gallery ảnh với navigation
Day 5	✅ Search Box	Hoàn thành	Search box với animation

🗓️ Tuần 2: JavaScript cơ bản

Ngày	Project	Trạng thái	Mô tả
Day 6	✅ Key Down Event	Hoàn thành	Hiển thị thông tin phím vừa nhấn (key, location, which, code) với giao diện đẹp, cập nhật realtime khi nhấn phím
Day 7	✅ Search Tag	Hoàn thành	Tạo và quản lý tags với giao diện đẹp, thêm/xóa tags, tránh duplicate, responsive design
Day 8	✅ Register & Login Form	Hoàn thành	Form đăng ký/đăng nhập hiện đại, validate JS, chuyển đổi mượt mà, responsive, UI/UX đẹp
Day 9	✅ Weather App (API + 4 mùa)	Hoàn thành	App thời tiết sử dụng Open-Meteo API, đổi background theo mùa (xuân, hạ, thu, đông), có nút test chuyển mùa trực tiếp
Day 10	✅ To Do List	Hoàn thành	Ứng dụng quản lý công việc: thêm, xóa, hoàn thành, lưu LocalStorage, responsive, giao diện đẹp

🗓️ Tuần 3: JavaScript nâng cao

Ngày	Project	Trạng thái	Mô tả
Day 11	⏳ ES6+ Features	Chưa bắt đầu	Arrow functions, destructuring
Day 12	⏳ Async JavaScript	Chưa bắt đầu	Promises, async/await
Day 13	⏳ Local Storage	Chưa bắt đầu	Data persistence
Day 14	⏳ API Calls	Chưa bắt đầu	Fetch API
Day 15	⏳ Project Tổng hợp	Chưa bắt đầu	Web app với API

🗓️ Tuần 4-6: Dự án thực tế

Tuần	Project	Trạng thái	Mô tả
Tuần 4	⏳ Portfolio Website	Chưa bắt đầu	Personal portfolio
Tuần 5	⏳ E-commerce Landing	Chưa bắt đầu	Product landing page
Tuần 6	⏳ Blog Website	Chưa bắt đầu	Blog với admin panel

🎨 Chi tiết các dự án đã hoàn thành

✅ Day 1: Product Card với Hover Effects

File: Day1/day1.html
Tính năng:
- Card sản phẩm Nike Zoom KD12
- CSS hover animations và transitions
- Responsive design với flexbox
- CSS variables và Google Fonts
- Box Icons integration
Kỹ năng học được: HTML structure, CSS flexbox, hover effects, responsive design

✅ Day 2: Profile Card với Hover Effects

File: Day2/day2.html
Tính năng:
- Profile card với avatar và thông tin cá nhân
- CSS hover animations cho avatar và social icons
- Responsive design với flexbox layout
- CSS variables và Google Fonts
- FontAwesome icons integration
- Multiple cards layout
Kỹ năng học được: CSS positioning, multiple layouts, icon integration

✅ Day 3: Modal Popup Material

File: Day3/day3.html
Tính năng:
- Modal popup với hiệu ứng mở/đóng
- Xử lý sự kiện với JavaScript
- Responsive design
Kỹ năng học được: JavaScript DOM manipulation, event handling

✅ Day 4: Image Gallery với Flexbox

File: Day4/day4.html
Tính năng:
- Gallery ảnh sử dụng Flexbox
- Click vào ảnh để mở gallery lớn
- Chuyển ảnh qua lại bằng nút Prev/Next
- Đóng gallery bằng nút Close
- FontAwesome cho icon
Kỹ năng học được: JavaScript navigation, image handling, modal functionality

✅ Day 5: Search Box với Animation

File: Day5/day5.html
Tính năng:
- Search box với animation từ tròn sang chữ nhật
- Background gradient (#25d6b3 to #27d76e)
- Auto focus vào input khi mở
- Click outside hoặc nhấn Escape để đóng
- Hover effects cho button với scale animation
Kỹ năng học được: Advanced CSS animations, JavaScript event handling, UX design

✅ Day 6: Key Down Event

File: Day6/day6.html
Tính năng:
- Giao diện hiện đại, responsive
- Khi chưa nhấn phím: hiện nút "Press any key"
- Khi nhấn phím bất kỳ: ẩn alert, hiện thông tin phím
- Hiển thị: ký tự phím (key), vị trí (location), mã phím (which), tên mã (code)
- Cập nhật realtime mỗi lần nhấn phím
Kỹ năng học được: JavaScript event handling, DOM manipulation, UI feedback

✅ Day 7: Search Tag

File: Day7/day7.html
Tính năng:
- Giao diện hiện đại với gradient background và card layout
- Thêm tag mới bằng cách gõ và nhấn Enter
- Xóa từng tag bằng cách click icon X
- Xóa tất cả tags bằng nút "Remove All"
- Tránh duplicate tags tự động
- Smooth animations và hover effects
- Responsive design cho mobile
Kỹ năng học được: JavaScript array manipulation, DOM manipulation, event handling, CSS animations, responsive design

✅ Day 8: Register & Login Form

File: Day8/day8.html, style.css, main.js
Tính năng:
- Giao diện form đăng ký/đăng nhập hiện đại, bo góc lớn, bóng đổ nhẹ, spacing hợp lý
- Nền gradient tím-hồng (#a18cd1 → #fbc2eb)
- Chuyển đổi mượt mà giữa form Đăng ký và Đăng nhập
- Validate email, password, confirm password (đúng định dạng, không để trống, password >= 6 ký tự, xác nhận trùng khớp)
- Hiển thị lỗi rõ ràng, UX thân thiện
- Nút gradient nổi bật, hover đổi màu, bo tròn lớn
- Responsive trên mobile, input và button luôn căn đều, không bị tràn
- Chữ "Login"/"Signup" nổi bật, hover đổi màu
Kỹ năng học được: JavaScript form validation, DOM manipulation, event handling, CSS gradient, responsive UI, UX best practices
Hướng dẫn sử dụng:
1. Mở day8.html trên trình duyệt
2. Nhập email, password, confirm password để đăng ký
3. Chuyển sang Login bằng link "Already have an account? Login"
4. Validate sẽ báo lỗi nếu nhập sai hoặc thiếu
5. Giao diện đẹp, dễ dùng trên cả desktop và mobile

📦 Day 9: Weather App (API + 4 mùa)

Sử dụng Open-Meteo API miễn phí, không cần API key
Tìm kiếm thời tiết theo tên thành phố toàn cầu
Hiển thị: nhiệt độ, mô tả thời tiết, độ ẩm, gió
Background tự động đổi theo mùa (xuân, hạ, thu, đông)
Có 4 nút test mùa: bấm để xem ngay hiệu ứng chuyển ảnh nền
Ảnh mùa: assets/img/hot.png, warm.jpg, cool.jpg, cold.png
Responsive đẹp trên mọi thiết bị

Cách test 4 mùa:

Mở Day9/index.html, bấm các nút Xuân/Hạ/Thu/Đông ở góc trái dưới để xem ảnh nền từng mùa

📦 Day 10: To Do List

Thêm/xóa/đánh dấu hoàn thành công việc
Lưu danh sách vào LocalStorage (không mất khi reload)
Giao diện hiện đại, responsive
Sử dụng HTML, CSS, JavaScript thuần
Tập trung vào thao tác DOM, sự kiện, lưu trữ trình duyệt

Cách sử dụng:

Mở Day10/day10.html
Nhập công việc, nhấn "Thêm" hoặc Enter để thêm
Click vào công việc để đánh dấu hoàn thành
Nhấn icon ��️ để xóa công việc

🚀 Hướng dẫn bắt đầu

1. Chuẩn bị môi trường

# Clone dự án (nếu có trên GitHub)
git clone https://github.com/your-username/30-day-html-css-js.git

# Hoặc tạo thư mục mới
mkdir 30-day-html-css-js
cd 30-day-html-css-js

2. Cài đặt công cụ

VS Code: Download
Live Server Extension: Cài đặt trong VS Code
Git: Download

3. Cấu trúc thư mục cơ bản

mkdir Day1
cd Day1
mkdir assets
mkdir assets/css
mkdir assets/js
mkdir assets/images
touch day1.html
touch assets/css/style.css
touch assets/js/script.js

4. Template HTML cơ bản

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day X - Tên dự án</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <!-- Nội dung trang web -->
    
    <script src="assets/js/script.js"></script>
</body>
</html>

🎨 Các dự án sẽ xây dựng

🏠 1. Portfolio Website

Tính năng:
- Responsive design
- Smooth scrolling navigation
- Contact form với validation
- Project showcase gallery
- Dark/Light theme toggle
- Animated sections
Kỹ năng: Advanced CSS, JavaScript animations, Form handling

🛒 2. E-commerce Landing Page

Tính năng:
- Hero section với call-to-action
- Product showcase với carousel
- Customer testimonials
- Newsletter signup
- Mobile-first design
- Shopping cart preview
Kỹ năng: CSS Grid, JavaScript carousel, Local storage

📝 3. Blog Website

Tính năng:
- Article layout với typography
- Search functionality
- Categories và tags system
- Comment system
- Admin panel cơ bản
- RSS feed
Kỹ năng: API integration, Database concepts, User authentication

📖 Tài liệu tham khảo

📚 HTML Resources

Resource	Link	Mô tả
	MDN HTML Guide	Tài liệu chính thức Mozilla
	W3Schools HTML	Tutorial tương tác
	HTML5 Semantic	Semantic elements

🎨 CSS Resources

Resource	Link	Mô tả
	MDN CSS Guide	CSS fundamentals
	CSS-Tricks	Tips và tricks
	Flexbox Guide	Complete flexbox guide
	Grid Guide	Complete grid guide

⚡ JavaScript Resources

Resource	Link	Mô tả
	MDN JavaScript	JavaScript fundamentals
	Eloquent JavaScript	Free online book
	You Don't Know JS	Advanced concepts
	JavaScript.info	Modern JavaScript

🛠️ Công cụ và tài nguyên hữu ích

💻 Code Editors

Editor	Download	Mô tả
	Download	Editor chính, nhiều extensions
	Download	Fast và lightweight
	Download	GitHub's editor

🔧 Browser DevTools

Browser	Shortcut	Mô tả
	`F12` hoặc `Ctrl+Shift+I`	Most popular
	`F12`	Developer friendly
	`Develop > Show Web Inspector`	Mac only

🌐 Online Tools

Tool	Link	Mô tả
	CodePen	Code playground
	JSFiddle	JavaScript testing
	GitHub Gist	Code sharing

🎨 Design Resources

Resource	Link	Mô tả
	Unsplash	Hình ảnh miễn phí
	Pexels	Stock photos
	Font Awesome	Icon library
	Google Fonts	Typography

📝 Tips học tập hiệu quả

🎯 1. Thực hành hàng ngày

Thời gian: Dành ít nhất 1-2 giờ mỗi ngày
Phương pháp: Code theo video và tự sửa đổi
Cải tiến: Tạo thêm các tính năng mới

📝 2. Ghi chép và tài liệu

Notes: Viết notes cho mỗi bài học
Cheatsheet: Tạo cheatsheet cá nhân
Comments: Comment code để hiểu rõ

🐛 3. Debugging và troubleshooting

Console: Sử dụng console.log() thường xuyên
DevTools: Kiểm tra Chrome DevTools
Errors: Tìm hiểu error messages

✨ 4. Tối ưu hóa code

Clean code: Viết code clean và readable
Naming: Sử dụng meaningful names
Refactor: Refactor code thường xuyên

🤝 Cộng đồng và hỗ trợ

📺 Kênh YouTube

Channel	Link	Nội dung
	Nodemy	30-day tutorial series
	F8 Official	Web development tutorials
	Thạch Phạm	WordPress và web development

💬 Diễn đàn và cộng đồng

Platform	Link	Mô tả
	Stack Overflow	Q&A platform
	r/webdev	Web development community
	Facebook Groups	Các group học lập trình Việt Nam

🎮 Discord Servers

Server	Link	Mô tả
	Web Dev Community	Tìm kiếm trên Discord
	CodePen Community	CodePen official server

📊 Theo dõi tiến độ

✅ Checklist hàng ngày

📈 Đánh giá cuối tuần

Review lại kiến thức
Hoàn thành project tổng hợp
Ghi chép những gì đã học
Lên kế hoạch tuần tiếp theo

🎉 Kết quả mong đợi

Sau 30 ngày, bạn sẽ có thể:

🎨 Frontend Skills

✅ Xây dựng website responsive hoàn chỉnh
✅ Sử dụng HTML, CSS, JavaScript thành thạo
✅ Tạo các hiệu ứng và animations đẹp mắt
✅ Tương tác với APIs và external data
✅ Deploy website lên hosting platforms

💼 Portfolio Projects

✅ Có 30+ mini projects để showcase
✅ Portfolio website chuyên nghiệp
✅ E-commerce landing page
✅ Blog website với admin panel

🚀 Career Ready

✅ Hiểu rõ frontend development workflow
✅ Có kinh nghiệm với modern tools
✅ Sẵn sàng apply cho frontend jobs
✅ Có thể học tiếp React/Vue/Angular

📄 Giấy phép

Dự án này được tạo ra cho mục đích học tập. Bạn có thể tự do sử dụng, chia sẻ và đóng góp cải tiến.

🙏 Lời cảm ơn

Cảm ơn kênh Nodemy đã tạo ra series video tutorial tuyệt vời này. Cảm ơn cộng đồng web development đã chia sẻ kiến thức và hỗ trợ lẫn nhau.

Chúc bạn học tập hiệu quả và thành công trên con đường trở thành Frontend Developer! 🚀

"Practice makes perfect" - Thực hành tạo nên sự hoàn hảo! 💪

Name		Name	Last commit message	Last commit date
Latest commit History 25 Commits
Day1		Day1
Day10		Day10
Day2		Day2
Day3		Day3
Day4		Day4
Day5		Day5
Day6		Day6
Day7		Day7
Day8		Day8
Day9		Day9
LICENSE.txt		LICENSE.txt
README.md		README.md

License

ndyudev/30-day-html-css-js

Folders and files

Latest commit

History

Repository files navigation