Xin chào tất cả các bạn, mình là Tú (nickname là Tú Ginô). Đây là bài viết đầu tiên của mình, hy vọng những gì mình chia sẻ dưới đây sẽ giúp các bạn có một cái nhìn mới về Frontend nói riêng và lập trình nói chung.
Khi người dùng truy cập vào bất kì website nào cũng sẽ thấy giao diện của chúng, và khi người dùng chạm, lướt, tương tác với giao diện sẽ có những hành động được diễn ra. Để có những hành động đó thì chúng ta (các lập trình viên) sẽ là người làm ra cái đó. Tạo dựng nên giao diện, hành động cho website là sử dụng HTML, CSS hoặc JS. Và làm sao để tạo nên một giao diện thật “cháy” thì hãy xem cần chuẩn bị những gì và học ra làm sao nhé. Hiện tại mình cũng đang học nên mình sẽ chia sẽ cách học của mình, và mình thấy hiệu quả nhé.
# Lộ trình Frontend cho người mới hoàn toàn
Những thức các bạn cần chinh phục đó là:
- Kiến thức nền tảng về lập trình, hãy lựa chọn những ngôn ngữ lập trình dễ tiếp cận như c/c++.
- HTML: Giúp các bạn biết layout của 1 website sẽ gồm những element nào.
- CSS: Làm sao để có thể render layout.
- Javascripts: Một ngôn ngữ lập trình (nhưng sẽ khó tiếp tận với các bạn mới, nếu được các bạn hãy học 1 ngôn ngữ lập trình dễ tiếp cận hơn rồi chuyển qua javascripts).
- ReactJS/Angular/VueJS: là một thư viện (framework) của JS để giúp xây dựng UI hiệu quả.
- NextJS: Hỗ trợ SEO thông qua SSR và SSG.
- IDE/Tool: Hỗ trợ lập trình.
- Deployment: Hiểu cách deploy một ứng dụng Frontend lên server.
- Và các kĩ năng cơ bản của 1 lập trình viên.
Các bạn có thể tham khảo roadmap.
# Làm sao để học hiệu quả
- Chú tâm học master 1 thứ, tránh bị sao nhãng bởi các công nghệ.
- Hãy cố gắng học và biết thuật toán (Ở Frontend thì sẽ ít gặp thuật toán nhưng hãy học để có cho mình một trải nghiệm tốt).
- Hãy tìm cho mình một mentor để tránh đi sai đường (Nhưng đi sai đường thì mới có trải nghiệm ^^).
- Hãy nhớ câu nói này “không có ngôn ngữ lập trình nào là dễ nhất”.
- Cẩn thận mọi thứ kể cả những task nhỏ.
- Hãy chăm chỉ đọc 1 bài blog mỗi ngày.
- “Đừng sợ sai mà chỉ sợ khi mình không biết mình sai” vậy nên hãy cứ thử đi , nếu như sai thì đó cũng là 1 kinh nghiệm chúng ta tích luỹ được
- Điều quan trọng mình muốn nói nhất là hãy thực hành mỗi ngày, mỗi tuần cho những kiến thức mới và ôn lại những kiến thức cũ.
# Một số tips và recommend khóa học (Cái này mình update thừng xuyên nên các bạn lưu lại nhé ^^)
##HTML (HTML5)
- Tìm hiểu thật kĩ các element và attributes.
- Phân tích thiết kế từ file design đưa vào cây HTML.
- Học SEO từ HTML.
- Semantic tags / Semantic Layout.
Dưới đây là bảng tóm tắt các thẻ HTML
| STT | Group | Tags |
|---|---|---|
| 1 | Base | html, head, body, link, meta, script |
| 2 | Headings | h1, h2, h3, h4, h5, h6 |
| 3 | Paragraph | p |
| 4 | Grouping | section, div, span |
| 5 | Semantic | header, main, footer, article, nav, section, … |
| 6 | Lists | ul > li, ol > li |
| 7 | Form | form, input, textarea |
| 8 | Table | table, thead, tbody, tfood, th, tr, td |
| 9 | Embed | iframe |
| 10 | Media | img, video, audio |
Một số khóa học có thể tham khảo:
##Css
Đây là một phần học khá khó và cần nhiều thời gian để luyện tập, mình sẽ liệt kê 1 số cái chú ý trong lúc học nhé ^^
- Làm để chèn CSS vào HTML?
- Trình duyệt sẽ xét duyệt thứ tự ưu tiên như thế nào?
- Làm sao để selectors phần tử của HTML trong CSS.
- Transition, animation.
- CSS Unit.
- CSS với form.
- Đặc biệt chú ý box model.
- Dàn layout với flexbox hoặc grid (master cái này là điều cần phải làm).
- Thực hành với HTML.
Một số nội dung tham khảo: