Lộ trình Front-End

# Website là gì ?
- domain
- hosting
# HTML
- Khái niệm
- Tags
- inline tags
- block tags
- BEM Convention: block\_\_element--modifier
- SEO
# CSS
- Khái niệm
- flexbox
- position
- reset css
- css grid
- box-sizing
- font
- text
- image
- display
- header header-content header-modal
- .....
# CSS Preprocessor
- Sass: sass styles & `scss styles`
- Less
# CSS Library & CSS Frameworks
- Bootstrap
- Bulma CSS
- Tailwinds CSS
# Javascript
- variable
- scope
- closure
- function
- object
- array
- this, prototype, class, api, async
- es6, modules
- events, dom...
# Javascript Library Framework
- React
- Vue
- Angular
# Photoshop Figma
# UI UX
- UI: User Interface
- UX: User Experience
# English
# Git Github
- Git: commands, git add, git commit, git push, git rebase, branch
- Github: Nơi lưu trữ source code
# Soft skills
- Giao tiếp
- Deal lương
- Gửi mail:
- Ko nên: Em gửi CV -> bị từ chối
- Nên: Dear Anh/Chị HR của công ty ABC, em có đọc thông tin tuyển dụng của công ty và nay
em muốn ứng tuyển, em có gửi CV đính kèm. Em xin cám ơn
  Thanks and regards,
# Code editor
- `VSCode`: Extensions: Prettier, live server, auto rename tag...
- Webstorm
- Brackets
- Notepad++
- Vim
# Browser
- Chrome: Page Ruler Redux, Visbug, EyeDropper Color
- Safari
- FireFox
- Microsoft Edge
- Coccoc
# Convert PSD to HTML CSS
## Cách bình thường
- index.html
- CSS Thuần: reset.css app.css
## Cách tốt hơn
- index.html
- CSS Preprocessor: Sass -> app.scss
## Cách tốt hơn nữa
- Task runner: Gulp, Grunt
- index.html about.html contact.html blog.html service.html n.html....
- Template engine: Pug, handlebars, EJS
# Gulp template by evondev
- Template engine: Pug -> html
- Tạo Header thành 1 component riêng biệt
- Styles: Sass -> SCSS Styles way -> Sử dụng 7-1 pattnern
- SASS -> CSS
# Làm việc với React Vue Angular
- Styles: Sass, styled-components, modules, tailwinds, materialUI, antDesign
# Nguồn tài nguyên
- Màu sắc: colorhunt, uigradients, coolors, grabient, gradienthunt, flat color....
- Hình ảnh: Unsplash, freepik, picsum
- Icons: Fontawesome, ionic icons, flaticon, boxicon
- Tools: https://bennettfeely.com/clippy/, https://cssgradient.io/
- Blog: https://evondev.com/, https://ishadeed.com/articles/,
- Youtube channel: evondev, OnlineTutorials, Dark Code, Brad Traversy, Design Course,
Kevin Powell, Fireship, Red Stappler, Ben Award, Freecodecamp, The Net Ninja, Wesbos,
Funfun function...
- Học Photoshop: Thuỳ Uyên Training
- Học Figma: Mr.Đại.GraphicDesigner
- Học HTML: W3schools, internetingishard,
- Luyện CSS: flexboxfroggy, cssgridgarden.com,
- Javascript: W3schools, MDN(Mozilla Development Network)
- React: `Advanced React and GraphQL(wesbos.com)`, học React cơ bản ở Udemy (Khoá của
Hậu Nguyễn)
- Khoá học mà mình tự học: The complete Javascript course (Udemy - Jonas), Understanding
the weird part(Udemy)
- Học tiếng Anh: https://www.youtube.com/watch?
v=I2DJOj4ChkI&list=PLyKAwYW3XgMM5sqSDCGrOrRgu-l5wDHs1, VOA Special
English, English conversation, Khanh Vy Official
- Phần mềm quản lý công việc: Notion
- Công cụ lấy mã màu trên Macbook: ColorSlurp
From Trần Nghĩa
HTML / BEM/ SEO
1. Giới thiệu HTML
2. Các thẻ HTML thông dụng
3. Đặt tên chuẩn BEM
4. Viết HTML chuẩn SEO
5. Thực hành
CSS & CSS3
1. Nhóm các thuộc tính thông dụng
2. Flexbox, Grid.
3. Thực hành
SCSS
1. SASS/SCSS là gì?
2. So sánh CSS và SCSS
3. Tại sao nên viết SCSS?
4. Các tính năng của SCSS
5. Thực hành
Thực hành
Viết giao diện một website sử dụng
HTML & SCSS
Responsive Website
1. Tổng quan
2. Media queries
3. Boostrap 4
4. Thực hành
Grunt
1. Grunt là gì?
2. Cài đặt Grunt
3. Xây dựng cấu trúc thư mục project
Javascript
1. Javascript cơ bản
Biến, hằng, kiểu dữ liệu, toán tử, mảng, chuỗi, a.
đối tượng, function (callback, scope), loop
b. Cú pháp if..else, white.do, for, switch..case, v.v
2. Javascript nâng cao
a. Async, await, promise, destructuring.
b. Javascript version ES6
3. DOM HTML
4. Thực hành các tình huống thường gặp
DOM HTML
a. Selector
b. Event
С. Attribute
d. Style
e. Các hàm thông dụng
f. Thực hành những tình huống thường gặp.
Jquery căn bản
Syntax
Selector
HTML/CSS
Events
Jquery nâng cao
Animation
Effect
Traversing
References.
Thực hành Jquery
Toggle menu
Selectbox
Tags
Accordion
Animate
Autocomplete
Back to top
Video modal
Validate form
Position
Todo list
Framework / Library JS
1. React JS (Redux, Next JS.) (nhiều)
2. Angular JS
3. Vue JS
Animation
1. GreenSock
2. Three JS
3. Các thư viện xử lý animation khác.
Phân tích & triển khai dự án
1. Phân tích dự án
2. Triển khai dự án
Tối ưu website
1. Các kỹ thuật tối ưu tốc độ website phía front-end
2. Google analytics
3. Bàn giao và hỗ trợ back-end hoàn thành website
4. Kinh nghiệm thực tiễn.