Xin chào các bạn đến với bài viết lộ trình trở thành Fontend Developer theo duthanhduoc nhé.
Những câu hỏi phổ biến
Học Fontend có khó không?
Đã gọi là học nghĩa là phải bỏ công sức ra tìm hiểu. Nếu bạn hỏi câu đó thì có lẽ nếu dễ các bạn mới bỏ học phải không. Nhưng mỗi ngành nghề lại có cách học, kiến thức khác nhau vì vậy nếu đã xác định học 1 cái gì các bạn cần bỏ thời gian ra để tìm hiểu, khi đủ lượng chất sẽ đến.
Quay lại với câu hỏi Fontend thuộc một trong rất nhiều chuyên ngành trong IT, nhưng có lẽ nó khá đơn giản so với các chuyên ngành còn lại.
Không biết hoặc giỏi thuật toán có làm Fontend được không?
Fontend ngoài việc code giao diện UI thì cần xử lý khá nhiều thuật toán. Nhưng các bạn đừng lo khi thuật toán được dùng đi dùng lại khá nhiều vì vậy chăm hay không bằng tay quen, các bạn sẽ dễ dàng nhớ khi thuật toán đó được quay lại lần 2 hoặc lần 3.
Cách học nhanh nhất?
Đó chính là học online nhé các bạn. Đó là cách để tiết kiệm thời gian nhất. Học theo giáo trình chất lượng. Có người hỏi đáp trực tiếp mọi lúc mọi nơi. Học xong phần nào thì làm các Project nhỏ đến lớn để luôn luyện tập và tư duy giải quyết vấn đề.
Lộ trình chi tiết
Kiến thức về internet
- Cách trình duyệt hoạt động
- Cách internet hoạt động
- Các thành phần của một website
- Cách tạo mọt trang web
- Tên miền, hosting, DNS
HTML/HTML 5
- Biết một số thẻ phổ biến: html, body, h1, h2, ul, li, a, p, form,…
- Sematic tag – Tức là dùng đúng tà cho mục đích của nó.
- Tạo một trang website giới thiệu bản thân đơn giản nhất bằng HTML cố gắng trong khi buil website hãy sử dụng nhiều thẻ nhất có thể để luyện tập nhé.
- Tìm hiểu về Seo căn bản nhé.
Nguồn hữu hiệu nhất để học là : https://www.w3schools.com/html/
CSS/CSS3
- Chia layout bằng Flex, Grid
- Responsive
- Selector
- Sự ưu tiên của các selector
- Các đơn vị px, rem, %, …
- Chuyển động animation
- SASS hay SCSS
- Quy tắc viết CSS, quản lí CSS
Nguồn học:
- YOUTUBE: https://www.youtube.com/channel/UCNSCWwgW-rwmoE3Yc4WmJhw
- CSS tutorial của W3shools: https://www.w3schools.com/css/
Luyện tập:
- Lên Youtube tìm kiếm từ khóa tiếng anh là how to make website using html css để xem cách mà họ tạo ra website bằng html và css
- Tiếp tục các bạn lên Google tìm kiếm theo từ khóa free template rồi Download các giao diện đó về và xem code của họ như thế nào và code lại theo họ. Cách này sẽ làm bạn hiểu được cách code giao diện website đó như thế nào. Mà tại sao họ lại sử dụng cách này mà không sử dụng cách kia. Nhưng nếu giả sử họ có làm cách khác mà mình làm cách khác họ mà vẫn ra thì đừng lo vì viết css có nhiều cách nhé.
- Các bạn làm lại UI các trang web hiện đang nổi tiếng như Shopee, Facebook chẳng hạn. Cái gì không biết các bạn cứ dùng F12 và xem các element là được nhé.
- Học thêm cách sử dụng các phần mềm design trước kia là Photoshop còn hiện tại thì có thể là figma, adobe xd nhé.
Nguồn học:
- https://www.youtube.com/channel/UCkjoHfkLEy7ZT4bA2myJ8xA
- https://www.youtube.com/channel/UCnNgtK4tGlWcceXVzoyTg8Q
- https://www.youtube.com/channel/UCgkDs77BoEhMIgRUB4MKrtQ
- Cung cấp template miễn phí: https://w3layouts.com/
- https://www.youtube.com/channel/UC8vjHOEYlnVTqAgE6CFDm_Q
Tài nguyên:
- Bộ màu đẹp: https://colorhunt.co/, https://coolors.co/, https://www.grabient.com/
- Ảnh đẹp cho website: https://www.freepik.com/, https://unsplash.com/, https://www.pexels.com/, https://pixabay.com/
- Font: https://fonts.google.com/
- Icon: https://fontawesome.com/, https://www.flaticon.com/, https://boxicons.com/, https://fonts.google.com/icons
- File Design miễn phí: https://www.uistore.design/, https://www.uipixels.com/
- Design dạng ảnh giúp cải thiện UI hoặc lấy ý tưởng cho website: https://dribbble.com/
Học CSS Framework
Các bạn nên học FrameWork là bootstrap dù sao thì nó cũng là được dùng nhiều nhất mà.
- Đọc doc của boostrap
- F12 xem thử xe các class của nó có gì
- Tự mình đưa ra ưu nhược điểm của nó
- Code lại các trang web bên trên bằng boostrap thay vì css thuần
Học Javascript
- So sánh khác biệt vả, let, const
- Hoisting, closure
- Higher order function, callback, curring
- Tham trị, tham chiếu, clone object
- This
- Thao tác với DOM
- Prototype, class
- Bất đồng bộ callback, promise, async / await
- Ajax, API
Trong khi học các bạn nhớ luyện thuật toán và tự làm các project nhó nhé để cho quen tay.
Nguồn học:
- F8 Official: https://www.youtube.com/channel/UCNSCWwgW-rwmoE3Yc4WmJhw
- W3shools: https://www.w3schools.com/js/default.asp
- Trang https://javascript.info/ với kiến thức siêu chuyên sâu và chi tiết. Rất khuyên mọi người nếu muốn đào sâu vào ngôn ngữ thì học trang này.
- Ebook có thể tìm đọc: https://exploringjs.com/, https://github.com/getify/You-Dont-Know-JS
- Luyện thuật toán: https://codelearn.io/, https://www.hackerrank.com/, https://leetcode.com/
Học Framework
Học React nhé vì trong 3 Framework nổi tiếng thì nó là được sử dụng nhiều nhất,
Kiến thức cần nắm:
- Hiểu được bản chất DOM ảo là gì, khác với DOM thật như thế nào
- Các khuyết điểm của React
- React hook
- Redux
- Các tip tối ưu hiệu suất cho React
- Node package manager (npm)
- Cấu hình ESLint, Prettier
- Webpack
- Deploy ứng dụng React
- Unit Test
- Cách sử dụng các công cụ như devtool, Lighthouse, postman
Nguồn học:
- Tất nhiên là doc của React rồi: https://reactjs.org/
- Web dev (trang này cực hay): https://web.dev/
- Easy Frontend: https://www.youtube.com/channel/UCG2ovypNCpVOTFeY1YCocmQ
- HoleTex: https://www.youtube.com/channel/UCd3lwxW89gegn-6rgLdXugw
Lời kết
Trên đây là lộ trình tốt nhất cho các bạn theo con đường Fontend để các bạn tiến dần đến con đường trở thành Fullstack Developer. Ngôn ngữ công nghệ chỉ là công cụ mà thôi, vì thế hãy dùng nó tạo a các sản phẩm có giá trị cho tất cả mọi người cùng được sử dụng tốt nhất có thể nhé các bạn. Chân thành cảm ơn các bạn đã đọc từ đầu tới cuối bài viết này. Chúc mọi điều tốt đẹp đến với tất cả các bạn đang không những nỗ lực mỗi ngày để kiếm trái ngọt sau này.
