| PHẦN 1: GIỚI THIỆU VÀ ĐỊNH HƯỚNG | |
Buổi 1. Giới thiệu và định hướng:
Giới thiệu khóa học và lộ trình học
Giới thiệu công việc Frontend trong thực tế
Giới thiệu UI – UX
Hướng dẫn cài đặt các phần mềm cần thiết
Học HTML: Khái niệm, cấu trúc file HTML và ý nghĩa các thẻ | |
Buổi 2. Học HTML, HTML5 (Tiết 1):
Tạo Elements, Attributes
Tạo Headings, Paragraphs, Formatting
Tạo Links, Image, Video, Audio, Table, List | |
Buổi 3. Học HTML, HTML5 (Tiết 2):
Phân loại thẻ block và inline
Class và Id
Nhúng Iframe
Một số thẻ Semantic
Forms: Form Attributes, Form Elements, Input Types, Input Attributes
Bài test trắc nghiệm | |
| PHẦN 2: HỌC CSS, CSS3, PROJECT MINI 1 | |
Buổi 4: Học CSS, CSS3 cơ bản (Tiết 1):
Khái niệm, cú pháp, selectors
3 kiểu insert CSS: External CSS, Internal CSS, Inline CSS
Colors, Backgrounds
Box Model, Borders, Outline, Margins, Padding
Height, Width
Text, Fonts, Icons
Lists, Tables, Display, Position, Z-index
Overflow, Float, Align | |
Buổi 5. Học CSS, CSS3 cơ bản (Tiết 2):
Combinators
Pseudo-classes
Pseudo-element
Opacity
Attribute Selectors
Units, Specificity, Math Functions
Web Fonts | |
Buổi 6. Học CSS, CSS3 nâng cao (Tiết 1):
Variables
Box Sizing
Media Queries
Flexbox
Responsive | |
Buổi 7. Học CSS, CSS3 nâng cao (Tiết 2):
Tập cắt giao diện có responsive
Giao bài project mini 1 | |
| Buổi 8. Tổng kết kiến thức đã học và ôn tập lại | |
| PHẦN 3: HỌC BOOTSTRAP 4,5 | |
Buổi 9. Học Bootstrap 4 (Tiết 1):
Giới thiệu và hướng dẫn tích hợp vào web
Dựng layout và sử dụng Grid
Responsive layout | |
Buổi 10. Học Bootstrap 4 (Tiết 2):
Components: Alerts, Badge, Breadcrumb, Buttons, Carousel, Collapse, Dropdowns, Forms, Modal | |
| Buổi 11. Chữa bài project mini 1 | |
Buổi 12. Học Bootstrap 4 (Tiết 3):
Components: Navs, Navbar, Pagination, Toasts, Tooltips. | |
Buổi 13. Học Bootstrap 4 (Tiết 4) và hướng dẫn học Bootstrap 5:
Một số Utilities phổ biến (của Bootstrap 4): Borders, Colors, Display, Flex, Float, Position, Spacing, Text, Vertical alignment
Hướng dẫn học Bootstrap 5: So sánh sự khác biệt với Bootstrap 4, hướng dẫn cài đặt, hướng dẫn học những phần khác biệt so với Bootstrap 4
Giao bài project mini 2 | |
| PHẦN 4: HỌC GIT, GITHUB | |
Buổi 14. Học GIT, GITHUB:
Học GIT: Khái niệm, các câu lệnh GIT sử dụng phổ biến
Sử dụng GITHUB: Tạo tài khoản và tạo Repository, đẩy code của project mini 2 lên Repository đã tạo, deploy code lên Vercel và Cloudflare | |
| Buổi 15. Chữa bài project mini 2 | |
| PHẦN 5: JAVASCRIPT CƠ BẢN VÀ NÂNG CAO (ES5, ES6+) | |
Buổi 16. Javascript cơ bản (Tiết 1):
Khái niệm
Variables, Operators
Data Types
Comparisons, Logic Operators | |
Buổi 17. Javascript cơ bản (Tiết 2):
If Else
Switch Case
Loop For
Loop For In
Loop For Of
Loop While
Break, Continue
Typeof | |
Buổi 18. Javascript cơ bản (Tiết 3):
Functions
Từ khóa “this”
Try Catch | |
Buổi 19. Javascript cơ bản (Tiết 4):
BOM: Window, Screen, Location, Popup Alert, Timing | |
Buổi 20. Javascript cơ bản (Tiết 5):
Khái niệm DOM
DOM Document
DOM Elements
DOM CSS | |
Buổi 21. Javascript cơ bản (Tiết 6):
Events
DOM Events
DOM Events Listener | |
Buổi 22. Javascript nâng cao (Tiết 1):
DOM Nodes
Scope
Hoisting, Strict Mode
Modules
JSON, JSON server | |
Buổi 23. Javascript nâng cao (Tiết 2):
Callbacks
Promises
Fetch API
Async/Await | |
Buổi 24. Javascript nâng cao (Tiết 3):
Storage API: localStorage, sessionStorage
Cookies
Closures
Giao bài project mini 3 | |
| PHẦN 6: PACKAGE MANAGERS, BEM, SASS/SCSS | |
Buổi 25. Package Managers, BEM, SASS/SCSS:
NPM, YARN
BEM
SASS/SCSS
Giao bài project mini 4 | |
| Buổi 26. Chữa bài project mini 3 | |
| Buổi 27. Chữa bài project mini 4 | |
| PHẦN 7: REACTJS, REDUX, REACT ROUTER (PROJECT MINI 5) | |
Buổi 28. Học ReactJS (Tiết 1):
Khái niệm, giới thiệu một số dự án thực tế
Hướng dẫn cài đặt
Giải thích cấu trúc thư mục và ý nghĩa các file
Ôn lại Javascript | |
Buổi 29. Học ReactJS (Tiết 2):
JSX
Components
Props
Events | |
Buổi 30. Học ReactJS (Tiết 3):
Conditional Rendering
Lists
Sử dụng CSS/SCSS trong ReactJS | |
Buổi 31. Học ReactJS (Tiết 4):
Hooks: useState, useEffect | |
Buổi 32. Học ReactJS (Tiết 5):
Hooks: useContext, useRef, useCallback | |
Buổi 33. Học ReactJS (Tiết 6):
Hooks: useMemo, useReducer | |
Buổi 34. Học ReactJS (Tiết 7):
Làm bài tập về Hooks | |
Buổi 35. Học Redux trong ReactJS (Tiết 1):
Khái niệm, cách hoạt động của Redux
Tìm hiểu Actions, Reducers, Store | |
Buổi 36. Học Redux trong ReactJS (Tiết 2):
Làm bài tập về Redux | |
Buổi 37. Học React Router:
Giới thiệu, hướng dẫn cài đặt
Cách sử dụng components và hooks trong React Router
Giao bài project mini 5 | |
| PHẦN 8: ANT DESIGN VÀ ANT DESIGN CHARTS | |
Buổi 38. Ant Design (Tiết 1):
Giới thiệu và hướng dẫn cài đặt
Components: Button, Icon, Typography, Grid, Layout, Dropdown, Menu | |
Buổi 39. Ant Design (Tiết 2):
Components: Checkbox, DatePicker, Form, Input, Radio, Select, Slider | |
Buổi 40. Ant Design (Tiết 3):
Components: Switch, Badge, Carousel, Collapse, Image, Table, Tabs | |
Buổi 41. Ant Design (Tiết 4):
Components: Tag, Tooltip, Message, Modal, Notification, Skeleton, Spin | |
Buổi 42. Ant Design Charts:
Charts: Basic Line, Multi Line, Pie
Hướng dẫn sử dụng một số chart khác | |
| PHẦN 9: PROJECT CUỐI KHÓA | |
| Buổi 43. Giao bài project cuối khóa và chữa bài project mini 5 | |
| Buổi 44. Chữa bài project cuối khóa | |
