Cảm ơn bạn!
Kinh nghiệm tự học lập trình web cho người mới bắt đầu
Hi, chắc hẳn các bạn đang học lập trình web cũng đã biết về nội dung mà trang Homiedev này là gì rồi, mình tạo ra trang web này để chia sẻ các kiến thức liên quan đến Front-end, các trick cũng như hướng dẫn làm các project ở kênh youtube của mình 😅. Hôm nay mình xin chia sẻ kinh nghiệm tự học của mình để giúp các bạn học tốt hơn, và các bạn có thể tạo ra một trang web cho riêng mình như trang web này chẳng hạn.
Từng bước đi đầu tiên...
Ở giai đoạn này các bạn không nên nóng vội, hãy xác định cho bản thân một roadmap phù hợp cho bản thân. Nếu các bạn vẫn đang cảm thấy chưa có lộ trình nào phù hợp thì mình xin chia sẻ lộ trình cũng như cách học của mình trong bài viết này 😀.
HTML/CSS
Cặp đôi HTML/CSS là thứ không thể thiếu của một website hoàn chỉnh. Nhiều bạn cảm thấy khi học HTML/CSS thì rất dễ để tiếp cận, còn một số bạn vẫn còn mơ hồ, bởi vì đây là skill đầu tiên chúng ta học, nên mình sẽ chia sẻ cách học HTML/CSS.
HTML (Hyper Text Markup Language)
Về định nghĩa HTML thì các bạn có thể tham khảo ở trên mạng. Hãy tưởng tượng bạn đang xây một ngôi nhà. thì phần khung của ngôi nhà chính là HTML, để học HTML nhanh chóng thì mình khuyên chúng ta nên học tập trung vào hai thứ đó là: tags và attributes.
Mình lấy ví dụ về tags trong html đó là những: H1, H2, header, footer, div,... vậy làm sao để ghi nhớ xem thẻ này cách sử dụng của nó như thế nào, nó gồm các thuộc tính gì đi kèm. Lời khuyên là chúng ta nên học một cách chậm rãi, mỗi ngày chúng ta nên chia ra học có giới hạn các thẻ này, và nên nhóm chúng lại để dễ học hơn. Các bạn có thể học các thẻ tại developer.mozilla.org, đây là một trang tài liệu có nhiều chủ đề khác nhau, chẳng hạn như: HTML5, JavaScript, CSS, API API, Node.js.
Đôi khi chúng ta đọc tài liệu và vẫn còn mơ hồ thì có thể xem các tutorials trên Youtube chẳng hạn. Mình gợi ý cho các bạn các video học HTML:
Common HTML tags and what they are for (HTML/CSS Basics)
HTML Crash Course For Absolute Beginners
CSS (Cascading Style Sheets)
Sau khi chúng ta tạo được khung cho ngôi nhà 🏘 (ở ví dụ trước) thì bây giờ chúng ta sẽ style cho ngôi nhà của chúng ta 😁, đây chính là khả năng của CSS. vậy thì học CSS, làm thể nào để hiểu nó và học sâu hơn?
Mình nghĩ muốn học hiệu quả thì phải thực hành - học đi đôi với hành. Chính xác là như vậy 😃 chúng ta hãy kết hợp giữa HTML và CSS cùng nhau. Ví dụ hôm nay bạn học các thẻ mới bạn hãy style cho các thẻ này bằng CSS luôn.
Để học CSS nhanh thì mình khuyên các bạn hãy tìm các video trên youtube tuy miễn phí nhưng cũng rất chất lượng nhé. Đây là list các kiến thức về css các bạn có thể tham khảo:
Blog css:
HTML and CSS Tutorial for 2021 - COMPLETE Crash Course!
CSS Crash Course For Absolute Beginners
Trong CSS còn một số kiến thức quan trọng như Grid, flexbox và float, đây là cách để chúng ta chỉnh sửa layout, mình nghĩ đây là cách mà một trang web đẹp ra đời 😁. về Flexbox mình đã có một bài viết về chủ đề này các bạn có thể xem tại đây.
Video hướng dẫn về Flexbox, Grid và Float:
HTML & CSS for Beginners Part 18: How Floats and Clears work
Học xong cơ bản HTML/CSS thì làm gì?
Đây là một câu hỏi mà mình nghĩ khá nhiều bạn quan tâm 😁. Chúng ta đã học xong cơ bản và đây chính là lúc ta thực hành clone các giao diện, hãy học theo cách đặt tên class của các trang nước ngoài để chuyên nghiệp hơn nhé.
Mình thấy có một số bạn học đặt tên class theo kiểu "x","y","z",..., Như vậy là không nên, chúng ta nên đặt tên có ý nghĩa, để sau này xem lại chúng ta sẽ hiểu lại ngày xưa ta sử dụng cái tên class này với mục đích gì ^^ hoặc nếu làm theo nhóm thì mọi người sẽ dễ dàng xử lí hơn.
Giai đoạn này chúng ta hãy clone lại thật nhiều các trang web với giao diện ở mức cơ bản mà các bạn nghĩ có thể làm được thôi nhé 😂. Nếu làm hẳn một trang web xịn với nhiều hiệu ứng thì sẽ khá là khó với trình độ của chúng ta hiện tại đấy.
Gợi ý nguồn Templates phong phú:
Ngày xưa mình đã sử dụng trang themeforest để tìm các mẫu và clone lại. Đây là một trang nổi tiếng bán các giao diện web - chuyên cung cấp theme cho WordPress, Joomla, Drupal, Shopify… cũng như nhiều PSD template, HTML dùng để thiết kế web. Trang này là một phần của Envato Market.
Trước khi chúng ta sử dụng trang này mình khuyên các bạn hãy xem các tutorial trước để xem cách người ta setup một project HTML/CSS như thế nào rồi chúng ta hãy bắt đầu hành trình chinh phục các giao diện web của bản thân 🤗.
List các video hướng dẫn làm project HTML/CSS cơ bản:
Create your first HTML/CSS project
Build a Responsive Website | HTML, CSS Grid, Flexbox & More
HTML and CSS Tutorial for 2021 - COMPLETE Crash Course!
Ở các video trên đã hướng dẫn Responsive cho website, về vấn đề Responsive các bạn có thể theo dõi tutorial và làm theo. Các bạn đọc thêm bài viết về vấn đề này tại Media Queries for Standard Devices.
Boostrap và SASS/SCSS
Sau khi chúng ta clone được khá nhiều trang web thì đây là giai đoạn chúng ta nên học một thứ gì đó mới hơn và những thứ này giúp chúng ta nhanh chóng tạo ra được một trang web.
Về Boostrap, đây một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website và có hỗ trợ responsive.
Video học Boostrap:
Bootstrap 5 Crash Course | Website Build & Deploy
Cá nhân mình nghĩ hãy học thật vững các thứ như HTML/CSS rồi sau đó chúng ta chuyển qua dùng framework cũng chưa muộn, hiểu bản chất cốt lõi của vấn đề cũng giúp chúng ta sử dụng framework hiệu quản hơn.
Còn SASS/SCSS chắc hẳn các bạn cũng đã nghe qua rồi đúng không nào 😁.
SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau ở cách viết. Khi học SASS/SCSS nó sẽ giúp bạn viết CSS theo cách có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn, mình thường dùng chúng cho các dự án lớn vì dễ sử dụng và bảo trì.
Video học SASS/SCSS:
Learn Sass In 20 Minutes | Sass Crash Course
Learn Sass in this Free Crash Course - Give your CSS Superpowers!
Javascript
Phù cuối cùng cũng tới được giai đoạn này rồi, giai đoạn trang trí ngôi nhà (CSS) và dựng khung (HTML) đã xong.
Đây chính là lúc mình làm cho ngôi nhà sinh động hơn, chẳng hạn mình muốn khi có người bước vào ngôi nhà một thông báo sẽ được phát ra: "Xin chào bạn!", khi đó chúng ta sẽ sử dụng Javascript, mình xin chia sẻ cách học Javascript của mình.
Khi bắt đầu học mình đã học theo video này:
JavaScript Tutorial for Beginners - Full Course in 8 Hours [2020]
Video trên có khá nhiều kiến thức dành cho các beginner, các bạn có thể học hỏi từ video.
Để bắt đầu học Javascript chúng ta hãy học từ cơ bản những thứ mà khi bắt đầu ngôn ngữ lập trình nào ta cũng phải biết như cú pháp viết code, function, kiểu dữ liệu,...
Các bạn có thể học tại trang w3schools.
Nắm vững Javascript thông qua các project
Chúng ta cần nắm vững Javascript để có thể học bất kì các framework nào mà ta muốn, vì vậy trong giai đoạn này, làm project sẽ giúp các bạn hiểu rõ hơn về Javascript cũng như cách ta kết hợp HTML/CSS và Javascript.
Đây là các project các bạn có thể tham khảo:
Build 15 JavaScript Projects - Vanilla JavaScript Course
Mình cũng có làm các project về Vanilla Js tại kênh của mình các bạn có thể theo dõi tại đây.
Học thêm các framework
Đây là giai đoạn mình nghĩ các bạn đã thuần thục khi chúng ta sử dụng HTML/CSS và Javascript. để tiếp tục chúng ta sẽ học thêm các framework của Javascript như React.js, Vue.Js, Angular.js, Ember.js.
Các bạn khi đã có nền tảng Javascript tốt rồi thì mình nghĩ khi chúng ta học framework sẽ nắm bắt nhanh và hiểu bản chất của framework hơn là chúng ta bỏ qua Javascript và nhảy vào học framework luôn - đây là suy nghĩ cá nhân mình.
Ở giai đoạn này mình nghĩ dựa vào kiến thức, khả năng của các bạn có thể tự tìm nguồn học cho bản thân rồi, mình không khuyên các bạn học framework này hay framework nọ. Vì mình nghĩ các bạn sau khi học đến giai đoạn này, mỗi người có một hướng đi riêng có người học thêm ngôn ngữ này, có người học ngôn ngữ khác tùy vào bản thân cũng như công việc của các bạn đó. Quan trọng cái chúng ta nắm được là kinh nghiệm cũng như mình đã nói từ trước - hiểu bản chất vấn đề mới là cái quan trọng nhất.
Chúc các bạn thành công trên con đường học lập trình web 😁 Peace.
Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.
Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.