Học lập trình Web nên bắt đầu như thế nào?

Học lập trình web ngày càng được ưa chuộng trong thời đại Internet ngày nay. Tất cả các website mà chúng ta sử dụng, truy cập, mua hàng… là do các lập trình viên web tạo ra. Họ làm tất cả các công việc: từ thiết kế giao diện, màu sắc đến các khía cạnh kỹ thuật để giúp cho trang web có thể hoạt động bình thường trong trường hợp có nhiều người truy cập.

Bài viết dưới đây sẽ giới thiệu và tổng hợp các kiến thức từ cơ bản đến nâng cao mà một lập trình viên web cần phải biết.

Đồng thời bài viết này cũng giới thiệu các nguồn tài liệu giúp bạn có thể tự học lập trình web tại nhà.

I. Các kiến thức cơ bản cần biết trong Học lập trình web

1. HTML & CSS

HTML và CSS và 2 ngôn ngữ cơ bản nhất nên bắt đầu khi học lập trình web.

HTML dùng để tạo cấu trúc, nội dung, các thành phần của trang web. HTML có thể dùng để nhúng các ngôn ngữ lập trình khác vào trang web.

CSS giúp cho cấu trúc trang web trở nên đẹp và sinh động hơn. Các thư viện/framework CSS như Bootstrap giúp cho việc thiết kế web trở nên dễ dàng.

Các nguồn tài liệu học:

2. Javascript

Javascript là ngôn ngữ không thể thiếu trong học và làm lập trình Web.

Javascript là ngôn ngữ lập trình theo hướng sự kiện giúp tăng tính tương tác (sinh động) của trang web.

Các nguồn tài liệu học:

a. Học online:

b. Học qua sách:

Được giới thiệu bởi rất nhiều người. Sau khi hoàn thành cuốn sách thì bạn sẽ thành thạo sử dụng JavaScript.

Sau khi hoàn thành cuốn sách Eloquent JavaScript, bạn có thể tiếp tục đọc cuốn You Don’t Know JS

Đây là 1 tập series các cuốn sách (free) được đề xuất bởi 1 số các lập trình viên kinh nghiệm. Với nội dung súc tích mô tả chính xác sự phức tạp của JavaScript. Đồng thời đề cập đến những sai lầm mà các lập trình viên có thể mắc phải do không thật sự hiểu rõ ngôn ngữ này.

Nếu bạn muốn trở thành chuyên gia về JavaScript thì không thể không đọc series sách nói trên.

  • JS: The Right Way: Trang web tổng hợp các nguồn tài liệu, thông tin hữu ích liên quan đến JavaScript
  • JSbooks: Tổng hợp các sách hay và miễn phí về JavaScript

3. Responsive Design

Các nguồn tài liệu học lập trình web responsive:

4. Chrome DevTools

Chrome là một trong những công cụ hữu ích khi học lập trình web.

Thông thạo cách sử dụng Chrome DevTools sẽ giúp ích cho bạn rất nhiều sau này.

Các nguồn tài liệu học:

5. Git (Version Control)

Git giúp bạn quản lý các thay đổi (phiên bản) của chương trình. Nếu gặp vấn đề với phiên bản mới bạn có thể quay trở lại thời điểm trước đó.

Các nguồn tài liệu học:

 6. Back End (Nodejs)

Các nguồn tài liệu học lập trình web backend về Nodejs: 

II. Kiến thức nâng cao

1. Tối ưu CSS

Lập trình CSS có thể dễ dàng trở nên rối rắm. Vì vậy có 1 vài phương pháp giúp bạn sắp xếp cấu trúc CSS trở nên khoa học và gọn gàng hơn.

2. Less / Sass

Less & Sass là các CSS transpilers cho phép bạn viết CSS linh hoạt và logic hơn. Thí dụ như bạn có thể  kết hợp (nesting) nhiều CSS lại với nhau.

Có 2 CSS transpilers thông dụng nhất hiện nay là: Less và Sass. Sass thì thông dụng hơn tuy nhiên Less thì đơn giản hơn do không yêu cầu phải cài thêm Ruby.

Các nguồn tài liệu học:

3. JavaScript Bundlers

JavaScript Bundlers giúp quản lý và gói gọn các files dependencies:

  • Browserify: lets you require modules in the browser by bundling up all of your dependencies.
  • Webpack: basically Browserify on steroids. Harder to configure and set up.

4. AngularJS

AngularJS là một framework mã nguồn mở được phát triển bởi Google. AngularJS giúp cho việc phát triển trang web và ứng dụng web trở nên dễ dàng hơn.

Các nguồn tài liệu học lập trình web sử dụng AngularJS:

5. ReactJS

ReactJS là thư viện mã nguồn mở chủ yếu dùng để xây dựng giao diện người dùng (User Interface – UI)

Các nguồn tài liệu học lập trình web sử dụng ReactJS:

6. Design Patterns

Design patterns là các giải pháp sử dụng lại code mẫu để giải quyết các vấn đề thường gặp. Hiểu về design pattern sẽ giúp bạn nhanh chóng đọc hiểu code của người khác. Vì vậy sẽ giúp ích cho bạn trong sự nghiệp lập trình của mình.

Các nguồn tài liệu học:

7. Task Runners (Grunt & Gulp)

Grunt and Gulp là các task runners cho phép bạn tự động các công việc trong phát triển web. Thí dụ thông thường sau mỗi lần code bạn phải chạy lại các CSS compiler, refresh trình duyệt.

Tuy nhiên với task runner thì bạn có thể thấy được sự thay đổi trên web browser sau mỗi lần thay đổi code. Điều này làm rút ngắn quá trình phát triển web.

Hiện nay có 2 tast runners phổ biết nhất đó là Grunt và Gulp:

Các nguồn tài liệu học:

III. Lộ trình học Lập trình Web Front-end

 

Nguồn: https://github.com/kamranahmedse/developer-roadmap

IV. Kết luận

Libraries và Framework có thể trở nên lỗi thời, tuy nhiên các khái niệm cơ bản và kỹ năng giải quyết vấn đề thì không thay đổi.

Bạn lúc nào cũng có thể tham khảo các nguồn blog, cộng đồng lập trình viên như: Stack Overflow, Medium và Reddit để tìm kiếm các giải pháp, thông tin và quyết định libraries hoặc framework phù hợp với lời giải cho bài toán của bạn.

Sai lầm lớn nhất trong khi học lập trình web nói chung và javascript nói riêng đó là không thật sự nắm chắc cơ bản trước khi học sang các thư viện (libraries) và frameworks. Đây cũng là sai lầm nói chung trong việc học các ngôn ngữ lập trình khác.

V. Bonus: Một số tài nguyên hữu ích khác có thể giúp bạn trong quá trình tự học lập trình web

  • YouMightNotNeedjQuery: Có thể bạn không cần đến jQuery. Việc không cần sử dụng jQuery có thể giúp trang web của bạn chạy nhanh hơn.
  • NoSQL database systems mega comparison by Kristof Kovacs.  Trang web so sánh các hệ thống cơ sở dữ liệu NoSQL như: MongoDB, Redis, CouchDB, Cassandra, ElasticSearch…
  • XSS Game. Cross-site scripting (XSS) bugs là một trong những lỗ hổng thông dụng và nguy hiểm nhất trong ứng dụng Web. Sử dụng công cụ này giúp bạn tìm kiếm các lỗi XSS và cách ngăn chặn chúng
  • Gravit.io: Ứng dụng thiết kế đồ họa miễn phí có thể dùng để thay thế cho Adobe Ilustrator
  • Adobe Kuler: Công cụ web vô cùng hữu ích hỗ trợ bạn tìm kiếm các màu tương đồng được tự động tạo ra theo lý thuyết phối màu (color theory)
  • Name that color: Công cụ web giúp bạn tự động tìm tên màu mà không phải mất thời gian đặt tên cho chúng.

*************

—————————————————————————————

Trả lời

Email của bạn sẽ không được hiển thị công khai.