June 19, 2021 · 13 min read
Bạn mới bắt đầu học Frontend nhưng không biết phải bắt đầu từ đâu và học những gì? Hãy cùng mình đi qua bài blog này để có thể hình dung ra mình sẽ cần học những gì nhé 😉
Source: //www.geeksforgeeks.org/how-to-become-a-front-end-developer/
Mục tiêu của bài chia sẻ là định hướng được cho những bạn đang không biết bắt đầu tư đâu và học cái gì để trở thành một Frontend Developer.
Agenda
30-45p
Chia sẻ về lộ trình học cho người mới bắt đầu05-10p
Một số cập nhật từ kênh Easy Frontend15-30p
Giao lưu hỏi đáp
- Bài chia sẻ này chỉ mang tính liệt kê, không đi vào chi tiết của từng mục nội dung.
- Bài chia sẻ dựa trên kinh nghiệm thực tế của cá nhân. Bạn có thể tham khảo thêm tại //roadmap.sh/
Chia sẻ về lộ trình học cho người mới bắt đầu#
Các mục chính bạn cần chinh phục
- Kiến thức
nền tảng
của developer HTML
: layout có element nào?CSS
: render layout như thế nào?Javascript/ES6
: ngôn ngữ lập trìnhReactJS
/Angular/VueJS: thư viện/framework của JS để xây dựng UI hiệu quảNextJS
: hỗ trợ SSR/SSGDeployment
: hiểu cách deploy một ứng dụng Frontend lên server.05-10p
0: các tools nên biết vì dev hay sử dụng05-10p
1: các kĩ năng phụ cần thiết khác
- Ngành nào cũng có cái khó của nó.
- Phải siêng năng, cày cuốc thì mới master được skills chứ không phải học xíu là được.
- Practice makes perfect.
- Học liên tục cho đến khi bạn không muốn làm trong ngành này nữa 🤣
- Những mục liệt kê trong tài liệu này ko phải là tất cả, mà chỉ là những điểm chính.
1. Kiến thức nền tảng của developer#
05-10p
2: nền tảng của một developer05-10p
3: nền tảng chắc --> phát triển nhanh và bền vững05-10p
4: học ngay từ đầu05-10p
5: bất cứ ai muốn trở thành developer05-10p
6: xem bên dưới
- Tư duy / kĩ thuật lập trình [phần này có thể move xuống phần Javascript]
- Kiến trúc tổng quan của một hệ thống website / phần mềm.
- Quy trình phát triển phần mềm
- Cơ bản về Internet: Domain, Hosting, DNS, http vs https, ...
- Các vai trò trong một dự án thực tế.
- ... [còn nhiều nữa 😜]
2. HTML/HTML5#
05-10p
2: khai báo nội dung cần render lên giao diện05-10p
3: bắt buộc học a êi, ko thôi sao render lên giao diện giờ 😅05-10p
4: học đầu tiên trong lộ trình này.05-10p
5: FE developers05-10p
6: xem bên dưới
Tư duy / kĩ thuật lập trình [phần này có thể move xuống phần Javascript]
- Kiến trúc tổng quan của một hệ thống website / phần mềm.
- Quy trình phát triển phần mềm
- Cơ bản về Internet: Domain, Hosting, DNS, http vs https, ...
- Các vai trò trong một dự án thực tế.
- ... [còn nhiều nữa 😜]
- 2. HTML/HTML5#
05-10p
2: khai báo nội dung cần render lên giao diện
05-10p
3: bắt buộc học a êi, ko thôi sao render lên giao diện giờ 😅
05-10p
4: học đầu tiên trong lộ trình này.
1 | Học cách phân tích từ file design --> cây HTML | Làm sao biết một website sử dụng HTML5? |
2 | Semantic tags / Semantic Layout | Tính đúng / sai của một layout --> thật ra chỉ là tương đối, hợp lý là được. |
3 | SEO cơ bản với các thẻ meta tags | SEO: hiển thị rich-data khi search google với google structured data |
4 | 15-30p 3: Đưa file design bất kì, phân tích được cây HTML. | Tóm tắt một số tags |
5 | # | Group |
6 | Tags | Base |
7 | html, head, body, link, meta, script | Headings |
8 | h2, h2, h3, h4, h5, h6 | Paragraph |
9 | p | Grouping |
10 | section, div, span | Semantic |
header, main, footer, article, nav, section, ...
- Lists
- ul > li, ol > li
- Form
- form, input, textarea
Table
- table, thead, tbody, tfood, th, tr, td
- Embed
- iframe
05-10p
5: FE developers05-10p
6: xem bên dưới
Tư duy / kĩ thuật lập trình [phần này có thể move xuống phần Javascript]
- Kiến trúc tổng quan của một hệ thống website / phần mềm.
- Quy trình phát triển phần mềm
- Cơ bản về Internet: Domain, Hosting, DNS, http vs https, ...
- Các vai trò trong một dự án thực tế.
- ... [còn nhiều nữa 😜]
- 2. HTML/HTML5#
05-10p
2: khai báo nội dung cần render lên giao diện05-10p
3: bắt buộc học a êi, ko thôi sao render lên giao diện giờ 😅05-10p
4: học đầu tiên trong lộ trình này.05-10p
5: FE developers15-30p
2: biết khi nào dùng thẻ nào + khả năng phân tích cây HTML- Tìm hiểu và thử các tag khác nhau của HTML và mỗi tag có những attributes nào.
Học cách phân tích từ file design --> cây HTML
header, main, footer, article, nav, section, ...
- Lists
- ul > li, ol > li
- CSS Tricks: //css-tricks.com/
- Game Flexbox Froggy: //flexboxfroggy.com/
- Thư viện animate.css: //animate.style/
- Flexbox Playground: //the-echoplex.net/flexyboxes/
- Interneting Is Hard: //www.internetingishard.com/html-and-css/
- Khoá học HTML/CSS cơ bản đến nâng cao của anh Tuấn [Evondev]: //kt.city/course/khoa-hoc-html-css-evondev
4. Javascript/ES6#
05-10p
2: ngôn ngữ lập trình duy nhất mà trình duyệt có thể hiểu05-10p
3: bắt buộc a êi 🤣05-10p
4: sau khi học xong html/css05-10p
5: FE developers05-10p
6: xem bên dưới
15-30p
2: kĩ thuật lập trình + core concepts của JS
Trong JS, chia thành 2 phần lớn:
- Ngôn ngữ lập trình Javascript
- Quản lý DOM và xử lý sự kiện trên trình duyệt
4a. Ngôn ngữ lập trình Javascript#
- JS là gì?
- JS có thể làm được gì?
- Dùng cái gì để code JS?
- Làm sao chạy được code JS?
- Các kiểu dữ liệu có trong JS
- Các bài toán xử lý Number, String, Array, Object.
- Closure là gì? Và tại sao lại cần nó?
nền tảng
7 trong js- ES6 là gì?
- Giải thuật cơ bản:
- Tìm kiếm, lọc, thêm, xoá, sửa.
- Stack vs Queue là gì
- Luyện tập code các bài toán lập trình: //nguyenvanhieu.vn/1000-bai-tap-lap-trinh-c-cua-thay-khang/
- Luyện tập giải các giải thuật cơ bản với Edabit: //edabit.com/
- Lập trình bất đồng bộ trong javascript
- Event Loop trong js
- Microtask và Macrotask
- Phân biệt setTimeout[] vs setInterval[]
- Promise
- Async/Await
- Generators
- Làm việc với REST APIs
- Đọc thêm về các concepts khác trong JS: //github.com/leonardomso/33-js-concepts
- Coding convention: //github.com/airbnb/javascript
15-30p
3: Thành thạo sử dụng JS để giải quyết các bài toán lập trình.
4b. Quản lý DOM và xử lý sự kiện trên trình duyệt#
- DOM là gì?
- Quản lý DOM:
- Tìm kiếm element
- Thêm element
- Xoá element
- Cập nhật element [attributes, content, ...]
- Clone element
- Quản lý sự kiện
- Có những loại sự kiện nào? click, scroll, resize, submit, ...
- Event bubbling và Capturing?
- Quản lý form
- Xử lý form validation
- Xử lý form submission
- Làm sao lấy được tất cả values của các controls
- Reset form
- Quản lý navigation
- Làm sao di chuyển từ trang này sang trang khác bằng javascript
- Query params là gì?
- Quản lý thư viện
- Làm sao để thêm các thư viện javascript khác vào website của mình
- script async, defer khác nhau thế nào?
- Thế nào là Repaint vs Reflow?
15-30p
3: Xây dựng các web application đơn giản sử dụng javascript thuần. Lúc này có thể kết hợp tìm hiểu một thư viện UI như Bootstrap để sử dụng làm giao diện nhanh chóng, đơn giản.
🌐 Một số links tham khảo:
- Demo đồ án môn javascript: //post-ui.vercel.app/
- Javascript Info: //javascript.info/
- Event Loop Visualizer: //www.jsv9000.app/
- Luyện giải thuật cơ bản với Edabit: //edabit.com/
- Luyện giải thuật khó hơn với LeetCode: //leetcode.com/
- You don't know JS: //github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/README.md
- 33 JS Concepts: //github.com/leonardomso/33-js-concepts
- JS Resources: //www.javascript.com/resources
- John Resig - Advanced JS: //johnresig.com/apps/learn/
5. ReactJS
/ Angular / VueJS#
05-10p
2: thư viện / framework để xây dựng UI một cách nhanh chóng, hiệu quả05-10p
3: code nhanh, đơn giản, hiệu quả hơn hẳn so với việc phải code chay với JS thuần05-10p
4: sau khi học Javascript/ES6 cơ bản05-10p
5: FE developers05-10p
6: xem bên dưới
15-30p
2: kĩ thuật lập trình + core concepts của JS
- Trong JS, chia thành 2 phần lớn:
- Ngôn ngữ lập trình Javascript
- Quản lý DOM và xử lý sự kiện trên trình duyệt
- 4a. Ngôn ngữ lập trình Javascript#
- JS là gì?
- JS có thể làm được gì?
- Dùng cái gì để code JS?
- Làm sao chạy được code JS?
- Các kiểu dữ liệu có trong JS
- Các bài toán xử lý Number, String, Array, Object.
- Closure là gì? Và tại sao lại cần nó?
nền tảng
7 trong js- ES6 là gì?
- Giải thuật cơ bản: trong một dự án thực tế
- Routing:
- Tìm kiếm, lọc, thêm, xoá, sửa.
- Stack vs Queue là gì
- Luyện tập code các bài toán lập trình: //nguyenvanhieu.vn/1000-bai-tap-lap-trinh-c-cua-thay-khang/
- Luyện tập giải các giải thuật cơ bản với Edabit: //edabit.com/
- Lập trình bất đồng bộ trong javascript
- Event Loop trong js
- Microtask và Macrotask
- Phân biệt setTimeout[] vs setInterval[]
- Promise
- Generators
- Làm việc với REST APIs
- Đọc thêm về các concepts khác trong JS: //github.com/leonardomso/33-js-concepts
- Coding convention: //github.com/airbnb/javascript
15-30p
3: Thành thạo sử dụng JS để giải quyết các bài toán lập trình.- 4b. Quản lý DOM và xử lý sự kiện trên trình duyệt#
- DOM là gì?
- Quản lý DOM:
- Tìm kiếm element
- Thêm element
- Xoá element
- Cập nhật element [attributes, content, ...]
- Routing:
- Clone element
Quản lý sự kiện
🌐 Một số links tham khảo:
- Demo đồ án môn javascript: //post-ui.vercel.app/
- Javascript Info: //javascript.info/
- Event Loop Visualizer: //www.jsv9000.app/
- Luyện giải thuật cơ bản với Edabit: //edabit.com/
- Luyện giải thuật khó hơn với LeetCode: //leetcode.com/
You don't know JS: //github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/README.md
- 33 JS Concepts: //github.com/leonardomso/33-js-concepts
05-10p
3: có hỗ trợ SEO, điều cần thiết cho landing pages, blogs, ...05-10p
4: sau khi nắm được reactjs05-10p
5: FE developers05-10p
6: xem bên dưới
15-30p
2: Phân biệt SSR/SSG/CSR và File-System Routings
- Xem thêm tại: //nextjs.org/
- Học NextJS: //nextjs.org/learn/basics/create-nextjs-app
15-30p
3: Làm được các trang landing page, blogs có hỗ trợ SEO.
7. Deployment#
05-10p
2: kĩ năng deploy website lên online05-10p
3: chia sẻ website của bạn tới mọi người05-10p
4: sau khi code xong website =]]05-10p
5: FE developers05-10p
6: xem bên dưới
15-30p
2: Phân biệt SSR/SSG/CSR và File-System Routings- Xem thêm tại: //nextjs.org/
- Học NextJS: //nextjs.org/learn/basics/create-nextjs-app
15-30p
3: Làm được các trang landing page, blogs có hỗ trợ SEO.
- 7. Deployment#
05-10p
2: kĩ năng deploy website lên online05-10p
3: chia sẻ website của bạn tới mọi người05-10p
4: sau khi code xong website =]]05-10p
6: xem bên dưới
15-30p
2: Phân biệt SSR/SSG/CSR và File-System RoutingsReactJS
6/Gitlab/Bitbucket- Xem thêm tại: //nextjs.org/
- Học NextJS: //nextjs.org/learn/basics/create-nextjs-app
15-30p
3: Làm được các trang landing page, blogs có hỗ trợ SEO.- 7. Deployment#
05-10p
2: kĩ năng deploy website lên online05-10p
3: chia sẻ website của bạn tới mọi người05-10p
4: sau khi code xong website =]]Javascript/ES6
8 Deploy đơn giản và nhanh chóng với Vercel, dùng cho JAM stack
Javascript/ES6
9 Nếu muốn support cả NodeJS server thì dùng heroku
ReactJS
0 Còn nếu muốn toàn quyền quyết định thì dùng VPS 🤣- 8. Tools#
05-10p
2: các công cụ hỗ trợ cho developer05-10p
4: sau khi code xong website =]]05-10p
6: xem bên dưới
Javascript/ES6
8 Deploy đơn giản và nhanh chóng với Vercel, dùng cho JAM stackJavascript/ES6
9 Nếu muốn support cả NodeJS server thì dùng herokuReactJS
0 Còn nếu muốn toàn quyền quyết định thì dùng VPS 🤣- 8. Tools#
05-10p
2: các công cụ hỗ trợ cho developer05-10p
3: buộc phải dùng 🤣 nên phải biết và master nó để phục vụ công việc05-10p
4: trước và trong khi đi làm
05-10p
5: developers
Git
Terminal: vim, zsh, ...
Code editor: ReactJS
7
Task management: ReactJS
8 / Jira
ReactJS
9 for debugging
- Chat:
NextJS
0 / Discord / ... - Google Search
NextJS
1 / Sketch / Photoshop
Online editor để dễ dàng share code hoặc demo nhanh: CodeSandbox, Codepen, ...
- 9. Soft skills#
05-10p
2: kĩ năng mềm bổ trợ cho developer05-10p
3: tăng năng suất, hiệu quả công việc --> nhiều tiền 😜05-10p
4: trong khi làm việc
NextJS
7: lưu loát đọc, nghe và nói. Viết ở mức cơ bản cũng được.
Hiểu NextJS
8 chung của từng vai trò trong dự án.
Cách NextJS
9 với các vai trò khác nhau trong dự án.