Hướng dẫn is html easy - html có dễ không

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: https://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

1. 30-45p Chia sẻ về lộ trình học cho người mới bắt đầu
2. 05-10p Một số cập nhật từ kênh Easy Frontend
3. 15-30p Giao lưu hỏi đáp

LƯU Ý

• 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 https://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

1. Kiến thức nền tảng của developer
2. HTML: layout có element nào?
3. CSS: render layout như thế nào?
4. Javascript/ES6: ngôn ngữ lập trình
5. ReactJS/Angular/VueJS: thư viện/framework của JS để xây dựng UI hiệu quả
6. NextJS: hỗ trợ SSR/SSG
7. Deployment: hiểu cách deploy một ứng dụng Frontend lên server.
8. 05-10p0: các tools nên biết vì dev hay sử dụng
9. 05-10p1: các kĩ năng phụ cần thiết khác

Trước khi bắt đầu, mình có một số lưu ý chung:

• 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-10p2: nền tảng của một developer
• 05-10p3: nền tảng chắc --> phát triển nhanh và bền vững
• 05-10p4: học ngay từ đầu
• 05-10p5: bất cứ ai muốn trở thành developer
• 05-10p6: 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-10p2: khai báo nội dung cần render lên giao diện
• 05-10p3: bắt buộc học a êi, ko thôi sao render lên giao diện giờ 😅
• 05-10p4: học đầu tiên trong lộ trình này.
• 05-10p5: FE developers
• 05-10p6: 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-10p2: khai báo nội dung cần render lên giao diện

05-10p3: bắt buộc học a êi, ko thôi sao render lên giao diện giờ 😅

05-10p4: học đầu tiên trong lộ trình này.

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-10p5: FE developers
• 05-10p6: 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-10p2: khai báo nội dung cần render lên giao diện
• 05-10p3: bắt buộc học a êi, ko thôi sao render lên giao diện giờ 😅
• 05-10p4: học đầu tiên trong lộ trình này.
• 05-10p5: FE developers
• 15-30p2: 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: https://css-tricks.com/
• Game Flexbox Froggy: https://flexboxfroggy.com/
• Thư viện animate.css: https://animate.style/
• Flexbox Playground: https://the-echoplex.net/flexyboxes/
• Interneting Is Hard: https://www.internetingishard.com/html-and-css/
• Khoá học HTML/CSS cơ bản đến nâng cao của anh Tuấn (Evondev): https://kt.city/course/khoa-hoc-html-css-evondev

4. Javascript/ES6#

• 05-10p2: ngôn ngữ lập trình duy nhất mà trình duyệt có thể hiểu
• 05-10p3: bắt buộc a êi 🤣
• 05-10p4: sau khi học xong html/css
• 05-10p5: FE developers
• 05-10p6: xem bên dưới

15-30p2: kĩ thuật lập trình + core concepts của JS

Trong JS, chia thành 2 phần lớn:

1. Ngôn ngữ lập trình Javascript
2. 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ảng7 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: https://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: https://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: https://github.com/leonardomso/33-js-concepts
• Coding convention: https://github.com/airbnb/javascript

15-30p3: 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-30p3: 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: https://post-ui.vercel.app/
• Javascript Info: https://javascript.info/
• Event Loop Visualizer: https://www.jsv9000.app/
• Luyện giải thuật cơ bản với Edabit: https://edabit.com/
• Luyện giải thuật khó hơn với LeetCode: https://leetcode.com/
• You don't know JS: https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/README.md
• 33 JS Concepts: https://github.com/leonardomso/33-js-concepts
• JS Resources: https://www.javascript.com/resources
• John Resig - Advanced JS: https://johnresig.com/apps/learn/

5. ReactJS / Angular / VueJS#

• 05-10p2: thư viện / framework để xây dựng UI một cách nhanh chóng, hiệu quả
• 05-10p3: 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ần
• 05-10p4: sau khi học Javascript/ES6 cơ bản
• 05-10p5: FE developers
• 05-10p6: xem bên dưới

15-30p2: 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ảng7 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: https://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: https://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: https://github.com/leonardomso/33-js-concepts
  • Coding convention: https://github.com/airbnb/javascript
    • 15-30p3: 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

🌐 Một số links tham khảo:

• Demo đồ án môn javascript: https://post-ui.vercel.app/
• Javascript Info: https://javascript.info/
• Event Loop Visualizer: https://www.jsv9000.app/
• Luyện giải thuật cơ bản với Edabit: https://edabit.com/
• Luyện giải thuật khó hơn với LeetCode: https://leetcode.com/

You don't know JS: https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/README.md

• 33 JS Concepts: https://github.com/leonardomso/33-js-concepts
• 05-10p3: có hỗ trợ SEO, điều cần thiết cho landing pages, blogs, ...
• 05-10p4: sau khi nắm được reactjs
• 05-10p5: FE developers
• 05-10p6: xem bên dưới

15-30p2: Phân biệt SSR/SSG/CSR và File-System Routings

• Xem thêm tại: https://nextjs.org/
• Học NextJS: https://nextjs.org/learn/basics/create-nextjs-app

15-30p3: Làm được các trang landing page, blogs có hỗ trợ SEO.

7. Deployment#

• 05-10p2: kĩ năng deploy website lên online
• 05-10p3: chia sẻ website của bạn tới mọi người
• 05-10p4: sau khi code xong website =))
• 05-10p5: FE developers
• 05-10p6: xem bên dưới

• 15-30p2: Phân biệt SSR/SSG/CSR và File-System Routings
• Xem thêm tại: https://nextjs.org/
• Học NextJS: https://nextjs.org/learn/basics/create-nextjs-app

15-30p3: Làm được các trang landing page, blogs có hỗ trợ SEO.

• 7. Deployment#
• 05-10p2: kĩ năng deploy website lên online
• 05-10p3: chia sẻ website của bạn tới mọi người
• 05-10p4: sau khi code xong website =))
• 05-10p6: xem bên dưới

• 15-30p2: Phân biệt SSR/SSG/CSR và File-System Routings
• ReactJS6/Gitlab/Bitbucket
• Xem thêm tại: https://nextjs.org/
• Học NextJS: https://nextjs.org/learn/basics/create-nextjs-app
• 15-30p3: Làm được các trang landing page, blogs có hỗ trợ SEO.
• 7. Deployment#
• 05-10p2: kĩ năng deploy website lên online
• 05-10p3: chia sẻ website của bạn tới mọi người
• 05-10p4: sau khi code xong website =))
• Javascript/ES68 Deploy đơn giản và nhanh chóng với Vercel, dùng cho JAM stack

Javascript/ES69 Nếu muốn support cả NodeJS server thì dùng heroku

• ReactJS0 Còn nếu muốn toàn quyền quyết định thì dùng VPS 🤣
• 8. Tools#
• 05-10p2: các công cụ hỗ trợ cho developer
• 05-10p4: sau khi code xong website =))
• 05-10p6: xem bên dưới

• Javascript/ES68 Deploy đơn giản và nhanh chóng với Vercel, dùng cho JAM stack
• Javascript/ES69 Nếu muốn support cả NodeJS server thì dùng heroku
• ReactJS0 Còn nếu muốn toàn quyền quyết định thì dùng VPS 🤣
• 8. Tools#
• 05-10p2: các công cụ hỗ trợ cho developer
• 05-10p3: buộc phải dùng 🤣 nên phải biết và master nó để phục vụ công việc
• 05-10p4: trước và trong khi đi làm

05-10p5: developers

Git

Terminal: vim, zsh, ...

Code editor: ReactJS7

Task management: ReactJS8 / Jira

ReactJS9 for debugging

• Chat: NextJS0 / Discord / ...
• Google Search
• NextJS1 / Sketch / Photoshop

Online editor để dễ dàng share code hoặc demo nhanh: CodeSandbox, Codepen, ...

• 9. Soft skills#
• 05-10p2: kĩ năng mềm bổ trợ cho developer
• 05-10p3: tăng năng suất, hiệu quả công việc --> nhiều tiền 😜
• 05-10p4: trong khi làm việc

NextJS7: lưu loát đọc, nghe và nói. Viết ở mức cơ bản cũng được.

Hiểu NextJS8 chung của từng vai trò trong dự án.

Cách NextJS9 với các vai trò khác nhau trong dự án.