frontend-trainning-2025.md

1.Học HTML/CSS/JQuery thông qua video 2025

#️⃣ 1.1 HTML/CSS Cơ bản

• Học HTML/CSS từ zero tới Hero qua list Youtube VN (tăng tốc độ xem lướt ko thực hành theo).
• Thực hành HTML theo list này

#️⃣ 1.2 Thực hành CSS bằng cách tạo Landingpage

• Tạo một Landingpage hoàn chỉnh cơ bản:

  • Link hướng dẫn: https://www.youtube.com/@Bedimcode
  • Cách học:
    • Dừng video & code theo, tải resource ở description của video, nếu không có thì tìm ảnh/font thay thế khác.
    • Thêm fonts tiếng Việt từ google font, thay đổi nội dung thành tiếng Việt

• Làm xong video này sẽ học được thêm cách:

  • Sử dụng JS cơ bản
  • Cách tạo cấu trúc project/tổ chức trình bày code, đặt tên class
  • Hiển thị layout responsive trên mobile

• Tải cấu trúc source mẫu tại link này

⭕ Sau khi hoàn thành list trên sẽ học được cách:

• Phân tích, xây dựng giao diện web
• Đặt tên class theo chuẩn BEM
• Xây dựng layout với Flexbox
• Làm hiệu ứng Animations
• Xây dựng giao diện Responsive
• Các kỹ thuật nâng cao khác ...

#️⃣ 1.3 Upload source lên Github (Version Control System)

• Code xong Landingpage thì xem hướng dẫn sau đó tạo repo để lưu trữ source code trên Github để share mọi người cùng xem.

#️⃣ 1.4 Javascript

1.4.1 Syntax, basic structure

• Tạo một app Todolist bằng Javascript thuần không framework:

• Chức năng:

  • Thêm xoá sửa update (CRUD)
  • Task nào hoàn thành thì dùng gạch ngang (text-decoration: line-through) để đánh dấu.

• Yêu cầu:

  • Sử dụng thêm library font-awesome để mô tả các nút
  • Sử dụng localStorage để lưu trạng thái

  => Xong thì push code lên Github

1.4.2 Nâng cao

• Convert source trên từ Javascript -> Jquery

• Sử dụng Ajax để fetch data từ database

• Tham khảo thêm:

  • Coding conventions: cách đặt tên, trình bày class/tag chuẩn google: https://google.github.io/styleguide/htmlcssguide.html
  • JS conventions: https://github.com/airbnb/javascript

2. Cắt giao diện (convert file PSD to HTML/CSS)

• comming soon