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 😀.

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 tất cả chúng ta đọc tài liệu và vẫn còn mơ hồ thì hoàn toàn có thể xem những tutorials trên Youtube ví dụ điển hình. Mình gợi ý cho những bạn những 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 tất cả chúng ta tạo được khung cho ngôi nhà 🏘 ( ở ví dụ trước ) thì giờ đây tất cả chúng ta sẽ style cho ngôi nhà của tất cả chúng ta 😁, đây chính là năng lực 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 thực tế – học song song với hành. Chính xác là như vậy 😃 tất cả chúng ta hãy phối hợp giữa HTML và CSS cùng nhau. Ví dụ thời điểm ngày hôm nay bạn học những thẻ mới bạn hãy style cho những thẻ này bằng CSS luôn .
Để học CSS nhanh thì mình khuyên những bạn hãy tìm những video trên youtube tuy không tính tiền nhưng cũng rất chất lượng nhé. Đây là list những kỹ năng và kiến thức về css những bạn hoàn toàn có thể tìm hiểu thêm :
Blog css :
https://css-tricks.com/
https://css-irl.info/
HTML and CSS Tutorial for 2021 – COMPLETE Crash Course !
CSS Crash Course For Absolute Beginners
Trong CSS còn một số ít kiến thức và kỹ năng quan trọng như Grid, flexbox và float, đây là cách để tất cả chúng ta chỉnh sửa layout, mình nghĩ đây là cách mà một website đẹp sinh ra 😁. về Flexbox mình đã có một bài viết về chủ đề này những bạn hoàn toàn có thể xem tại đây .

Video hướng dẫn về Flexbox, Grid và Float:

Flexbox CSS In 20 Minutes
CSS Grid layout crash course
HTML và 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 chăm sóc 😁. Chúng ta đã học xong cơ bản và đây chính là lúc ta thực hành thực tế clone những giao diện, hãy học theo cách đặt tên class của những trang quốc tế để chuyên nghiệp hơn nhé .
Mình thấy có 1 số ít bạn học đặt tên class theo kiểu ” x “, ” y “, ” z “, …, Như vậy là không nên, tất cả chúng ta nên đặt tên có ý nghĩa, để sau này xem lại tất cả chúng ta sẽ hiểu lại thời xưa ta sử dụng cái tên class này với mục tiêu gì ^ ^ hoặc nếu làm theo nhóm thì mọi người sẽ thuận tiện xử lí hơn .
Giai đoạn này tất cả chúng ta hãy clone lại thật nhiều những website với giao diện ở mức cơ bản mà những bạn nghĩ hoàn toàn 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 tất cả 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 tất cả chúng ta sử dụng trang này mình khuyên những bạn hãy xem những tutorial trước để xem cách người ta setup một project HTML / CSS như thế nào rồi tất cả chúng ta hãy khởi đầu hành trình dài chinh phục những giao diện web của bản thân 🤗 .
List những 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 và More
HTML and CSS Tutorial for 2021 – COMPLETE Crash Course !
Ở những video trên đã hướng dẫn Responsive cho website, về yếu tố Responsive những bạn hoàn toàn có thể theo dõi tutorial và làm theo. Các bạn đọc thêm bài viết về yếu tố này tại Media Queries for Standard Devices .

Boostrap và SASS/SCSS

Sau khi tất cả chúng ta clone được khá nhiều website thì đây là quy trình tiến độ tất cả chúng ta nên học một thứ gì đó mới hơn và những thứ này giúp tất cả chúng ta nhanh gọn tạo ra được một website .

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 và Deploy

Cá nhân mình nghĩ hãy học thật vững những thứ như HTML / CSS rồi sau đó tất cả chúng ta chuyển qua dùng framework cũng chưa muộn, hiểu thực chất cốt lõi của yếu tố cũng giúp tất cả 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ù ở đầu cuối cũng tới được quy trình tiến độ này rồi, quá trình 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 khởi đầ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 kỹ năng và kiến thức dành cho những beginner, những bạn hoàn toàn có thể học hỏi từ video .
Để mở màn học Javascript tất cả chúng ta hãy học từ cơ bản những thứ mà khi khởi đầu ngôn từ lập trình nào ta cũng phải biết như cú pháp viết code, function, kiểu tài liệu, …
Các bạn hoàn toà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 để hoàn toàn có thể học bất kể những framework nào mà ta muốn, thế cho nên trong tiến trình này, làm project sẽ giúp những bạn hiểu rõ hơn về Javascript cũng như cách ta phối hợp HTML / CSS và Javascript .
Đây là những project những bạn hoàn toàn có thể tìm hiểu thêm :
30 days JavaScript By Wes Bos
Build 15 JavaScript Projects – Vanilla JavaScript Course
Mình cũng có làm những project về Vanilla Js tại kênh của mình những bạn hoàn toà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 tất cả chúng ta học framework sẽ chớp lấy nhanh và hiểu thực chất của framework hơn là tất cả chúng ta bỏ lỡ Javascript và nhảy vào học framework luôn – đây là tâm lý cá thể mình .
Ở quy trình tiến độ này mình nghĩ dựa vào kiến thức và kỹ năng, năng lực của những bạn hoàn toàn có thể tự tìm nguồn học cho bản thân rồi, mình không khuyên những bạn học framework này hay framework nọ. Vì mình nghĩ những bạn sau khi học đến tiến trình này, mỗi người có một hướng đi riêng có người học thêm ngôn từ này, có người học ngôn từ khác tùy vào bản thân cũng như việc làm của những bạn đó. Quan trọng cái tất cả chúng ta nắm được là kinh nghiệm tay nghề cũng như mình đã nói từ trước – hiểu thực chất yếu tố 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.

Source: https://vh2.com.vn
Category : Tin Học