Lộ trình học frontend từ cơ bản đến nâng cao

Chào mừng các bạn đã quay trở lại với chuyên mục bài viết của Webdev Studios!

Trong bài viết tuần trước chúng ta đã tìm hiểu những khái niệm cơ bản về website và cách website hoạt động trên internet rồi phải không nào! Nếu bạn nào chưa xem có thể vào đây để xem lại nhé! Tuần này chúng ta sẽ đến với bài thứ hai trong chuỗi bài xác định lộ trình học web với chủ đề “Lộ trình học front-end từ cơ bản đến nâng cao”. Nào chúng ta cùng bắt đầu thôi!

1. Front-end là gì?

Trước khi đến với nội dung chính của bài hôm nay, chúng ta cùng tìm hiểu xem front-end là gì nhé!

Có thể hiểu phần front-end của một trang web là phần tương tác với người dùng. Lập trình viên front-end là những người chịu trách nhiệm cho giao diện của trang web và kiến trúc những trải nghiệm của người dùng.

Hãy tưởng tượng trang web của bạn là một căn nhà. Để xây dựng căn nhà này, chúng ta cần có những người thợ xây đó là những lập trình viên back-end. Những người chịu trách nhiệm trang trí, thiết kế nội thất cho căn nhà ấy chính là những lập trình viên front-end.

Front-end chính là phần giao diện của một trang web

2. Lộ trình học front-end từ cơ bản đến nâng cao.

a. Học HTML, CSS, Javascript căn bản.

Bước đầu tiên để trở thành một lập trình viên front-end là bạn cần phải học HTML&CSS. Đây là hai ngôn ngữ giúp tạo ra giao diện website phía client. HTML giúp bạn xây dựng giao diện một cách đơn sơ, còn CSS sẽ là công cụ make-up, làm cho trang web của bạn trông đẹp lộng lẫy hơn.

Với HTML, chúng ta chỉ cần tìm hiểu khái niệm, công dụng, cách khai báo một số thẻ phổ biến để có cách sử dụng hợp lý là ok.

HTML giúp xây dụng giao diện một cách đơn sơ.

Với CSS thì ta cần dành nhiều thời gian hơn để học và thực hành (theo mình nghĩ nếu chăm chỉ luyện tập thì khoảng tầm 1 tháng là bạn có thể nắm bắt vừa đủ kiến thức để sử dụng).

CSS giúp make-up cho trang web của bạn.

Sau khi nắm vững HTML&CSS, bạn cần phải học Javascript. Đây là một ngôn ngữ rất quan trọng khi học lập trình web. Về phía front-end, JS giúp bạn có thể tạo các hiệu ứng sinh động cho trang web của bạn.

Javascript giúp tạo các hiệu ứng cho trang web.

Hiện tại trên mạng có rất nhiều nơi để bạn có thể học HTML, CSS, Javascript. Riêng mình thì mình thích tìm hiểu tại: www.w3schools.com

b. Học Jquery.

Jquery là một thư viện rất mạnh trong JS. Với Jquery, chúng ta chỉ cần nắm các kiến thức đủ để nhìn thấy hiệu ứng nào mình có thể làm lại được là ok. Chúng ta không cần phải học hết lý thuyết ban đầu của Jquery làm gì cả vì nó rất rộng.

Jquery là một thư viện rất mạnh trong JS. Nó có câu châm ngôn của mình là "write less, do more"

Về thời gian học Jquery theo mình nghĩ khoảng 1-2 tuần là vừa đủ để các bạn nắm qua các sự kiện, công năng mà Jquery cung cấp.

Chúng ta có thể tìm hiểu về Jquery tại: www.w3schools.com/jquery/

c. Học CSS framework.

Bước tiếp theo, chúng ta sẽ học CSS framework. Hiện tại, có rất nhiều CSS framework khác nhau như Bootstrap, Foundation…Trong lộ trình này, mình sẽ định hướng cho các bạn chọn Bootstrap.

Tại sao mình lại có sự lựa chọn như vậy?

  • Thứ nhất: Bootstrap hiện đang dần trở nên phổ biến.
  • Thứ hai: Bootstrap không đòi hỏi kiến thức phức tạp, chỉ cần biết sơ qua HTML, CSS, JS là đủ.
  • Thứ ba: Bootstrap sử dụng hệ thống grid nên có hỗ trợ responsive nên tương thích tốt với mọi trình duyệt và thiết bị.
  • Cuối cùng: Bootstrap hoạt động theo xu hướng mã nguồn mở nên chúng ta có thể thay đổi và chỉnh sửa tùy ý.
Bootstrap là một trong những CSS framework phổ biến hiện nay.

Trên internet hiện tại cũng có rất nhiều bài viết và video dạy Boostrap miễn phí, vì thế các bạn có thể dễ dàng chọn cho mình một khóa bất kỳ để theo học.

d. Học JS framework.

Để học thêm các JS framework thì bắt buộc bạn phải tìm hiểu chút ít về ES6. Đây là phiên bản mới nhất của chuẩn ECMAScript- tiêu chuẩn của ngôn ngữ JS.

Các bạn có thể tham khảo tại đây nhé: https://www.w3schools.com/js/js_es6.asp

Sau khi tìm hiểu về ES6, chúng ta có thể chọn một trong các JS framework sau để học: React js, Angular, Vue.js…

Vâng sau bài viết này, chúng ta đã hoàn tất được lộ trình học front-end từ cơ bản đến nâng cao rồi! Việc cần làm bây giờ là bắt tay vào học và rèn luyện thật nhiều thôi nào! Chúc các bạn thành công nha!

Tuần sau, chúng ta sẽ tiếp tục tìm hiểu về lộ trình học back-end PHP từ cơ bản tới nâng cao. Các bạn nhớ theo dõi nhé! Xin chân thành cảm ơn và chào tạm biệt các bạn! 😀

1 Comments

Write a Comment

Your email address will not be published. Required fields are marked *