Frontend Trainning Log

frontend-trainning-log.md

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

1.1 HTML/CSS Cơ bản

• Học HTML/CSS từ zero tới Hero qua list Youtube này (tăng tốc xem lướt ko thực hành theo).
• 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.2 Tạo Landingpage

• Xong list trên thì tạo một trang Landingpage hoàn chỉnh cơ bản:

  Link hướng dẫn: https://www.youtube.com/@Bedimcode

  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 (style Châu Âu)
  • Hiển thị responsive mobile

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

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

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

1.4 Javascript

1.4.1 Syntax, basic structure

• Tạo một project kinh điển Todolist bằng JS thuần:

  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ừ JS -> JQ (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