Ăn cát bê tông: thực hành, thực hành và thực hành

Danh mục bài viết

Danh mục bài viết Web tĩnh HTML, CSS, JS

Để thuận tiện cho việc đọc bài và làm theo của bạn đọc, KACBT liệt kê các bài theo thứ tự từng bước từ đơn giản đến phức tạp ở trang này. Người học đọc lần lượt, làm theo hướng dẫn, hết bài này đến bài khác.

Trong quá trình xem hướng dẫn, làm theo, thực hành mở rộng bạn thấy chỗ nào chưa hiểu, muốn trao đổi thêm, đừng do dự tham gia Thảo luận. KACBT quan niệm học mà không hỏi gì chứng tỏ người học thụ động, chậm tiến bộ.

Đọc lần lượt phù hợp cho những ai muốn nắm bắt kiến thức về Web có tính chất nền tảng, hệ thống. Đọc theo trật tự khác (nhảy cóc) tùy thích cũng ổn nếu bạn biết cách tổng hợp, hệ thống. Cách đọc nhảy cóc tiềm ẩn khả năng xuất hiện lỗ hổng kiến thức, khi người học phải trở lui đọc lại mất nhiều thời gian hơn so với tuần tự.

Phần kiến thức nền

Người mới bắt đầu cần dành thời gian đọc những bài viết này. Nên ghi chép lại một số ý cần nhớ. Kiến thức nền khi mới đọc có vẻ đáng chán, tẻ nhạt, hơi khó hiểu.

Đổi lại, khi nắm vững, bạn tiến xa, có lực học, làm được những thứ nâng cao trong tương lai. Việc này khá giống với chịu khó rèn luyện thể lực trong các môn thể thao.

  1. Cách tiếp cận vấn đề trong quá trình học mọi thứ
  2. Người không chuyên CNTT nên học như thế nào?
  3. Giới thiệu về Web: giúp bạn hiểu thế giới Web
  4. Giao thức HTTP có vai trò thế nào với người làm Web?
  5. Khóa học chính thống, xịn sò về Web (nếu bạn không ngại đọc tiếng Anh)
  6. Tạo thói quen thực hành tốt cho người mới học

Phần kiến thức kỹ thuật làm trang Web

Những bài chưa có liên kết là còn đang soạn nháp, chưa xuất bản.

  1. Quy ước viết từ/ ngữ trong các bài viết
  2. Học lập trình front-end là học những gì?
  3. Bộ đồ nghề cho người mới bắt đầu
  4. Bài đầu tiên: thực hành để học
  5. Bài 2: trang web có hình ảnh
  6. Bài 3: trang web có bảng biểu
  7. Bài 4: trang web có biểu mẫu
  8. Bài 5: trang web kết hợp hình, bảng biểu, biểu mẫu
  9. Bài 6: lý thuyết về Cascading Style Sheets (còn gọi là CSS)
  10. Bài 7: áp dụng CSS vào web trà sữa
  11. Bài 8: thêm chi tiết cho web trà sữa
  12. Bài 9: một số kỹ thuật CSS nâng cao
  13. Lộ trình học JavaScript (dành cho những ai muốn học bài bản)

Một số từ ngữ/ khái niệm cần phân biệt

Thiết kế Web (Web design): tập trung vào các yếu tố hình ảnh/ đa phương tiện trực quan của một trang web, chẳng hạn như giao diện, cảm nhận và tính thẩm mỹ. Các nhà thiết kế web còn được gọi là nhà thiết kế trải nghiệm người dùng (UX). Họ sử dụng phần mềm như Photoshop và Figma để tạo giao diện và trải nghiệm người dùng của trang web. Sản phẩm của thiết kế web có thể là file đồ họa trước khi xắt ra thành web template hoặc đã xắt ra thành web template.

Giao diện website
1 sản phẩm của người thiết kế web

Phát triển Web (Web development): tập trung vào lập trình hậu trường giúp trang web hoạt động. Các nhà phát triển web xây dựng cấu trúc và chức năng của trang web và có thể chuyên về lập trình trên giao diện hoặc xử lý nghiệp vụ (lập trình backend) của trang web. Như vậy, một người làm về phát triển web là người viết mã/ lập trình viên. Còn việc anh ấy viết bằng ngôn ngữ nào, ở phía trình duyệt hoặc phía server là chưa cần bàn tới, tức là chưa cần bàn lập trình frontend, backend.

Sản phẩm của backend – những đoạn mã “thần thánh”

Qua hai khái niệm trên, chúng ta thấy rằng người thiết kế web gần như không thể lập trình, và phát triển web gần như không thể làm nên một giao diện trang web đẹp, hữu ích. Trong thực tế, có tồn tại người làm được cả hai thứ trên, nhưng không nhiều.

Như vậy, chúng ta có thể thấy rằng nếu một người nói rằng “làm nghề thiết kế web” thì hiểu rằng người này thiên về mỹ thuật, nghệ thuật, làm giao diện đẹp cho web. Một người khác nói “tui lập trình web” hoặc “tui là nhà phát triển web” thì hiểu rằng anh này thiên về viết mã, lập trình.

Nằm lưng chừng ở 2 khái niệm trên, những người viết bài ở KACBT này có lẽ phải đẻ ra một khái niệm mới đó là “amateur web creator” (người làm web nghiệp dư) bởi vì chúng tôi thiết kế dở ẹc, lập trình cũng kém. Nhưng không vì thế mà con đường trở thành người làm web có kỹ năng hơn, chuyên nghiệp hơn bị đình trệ, chúng tôi vẫn học hỏi liên tục để tiến bộ.

Lập trình front-end (cũng frontend – danh từ): chủ yếu liên quan đến lập trinh JavaScript và/ hoặc các ngôn ngữ như TypeScript, CoffeeScript, ActionScript có thể biên dịch thành JavaScript và sự thực thi của ngôn ngữ diễn ra trên trình duyệt web. Dĩ nhiên, khi viết mã JavaScript phải có sự tương tác, kết hợp với HTML, CSS thì mới có thể làm gì đó hoạt động trên trang web. Nếu ai đó nói với bạn là anh ấy/ cô ấy chỉ viết JavaScript không thôi mà không làm gì với HTML, CSS có thể bạn mỉm cười đáp lại “Tôi đang nhìn thấy một người diễn kịch đang đóng vai đầu bếp”.
Bạn có thể thấy các đồng hồ đếm ngược chạy trên trang web, thông báo hiện đỏ đỏ báo rằng bạn nhập dữ liệu chưa đúng, một số chuyển động hoạt hinh phức tạp, mini game, game chạy trên trang web, bản đồ Google Maps, hiện quảng cáo của YouTube,…. đó chính là những sản phẩm của lập trình frontend.
Cũng chú ý: lập trình web frontend khác với lập trình frontend chung chung. Mặc dù trong thực tế nhiều người đồng nghĩa rằng việc lập trình frontend là đề cập đến lập trình web nhưng chỉ 85%, còn 15% rơi vào trường hợp khác. Ngày nay lập trình cho điện thoại, phần mềm desktop cũng có lập trình frontend tuy ít phổ biến hơn lâp trình web bởi thuở ban đầu gần như lập trình là lập trình, chưa tách bạch frontend, backend.

Lập trình back-end (cũng backend – danh từ): chủ yếu làm việc với các ngôn ngữ lập trình được thực thi trên server, thường gọi là server side script. Tuy nhiên, không phải lúc nào các ngôn ngữ này cũng ở dạng script mà vẫn có những người lập trình các công cụ chuyên xử lý nào đó dùng ngôn ngữ không mang tính chất ngôn ngữ kịch bản. Các ngôn ngữ lập trình backend gồm có: JavaScript, PHP, Python, Ruby, Java, C#,…
Tương tự như lập trình frontend kể trên, lập trình backend cũng ngầm hiểu là lập trình web, nhưng có thể hỏi lại cho rõ vì có thể lập trình thứ khác, dù ít hơn nhiều so với lập trình web.

Bạn là người duyêt web bình thường thì gần như không thấy trực tiếp được lập trình backend tương tác trực tiếp với bạn nhưng khi bạn gửi một email, upload một file, hoặc sử dụng các trang web mà bạn có cung cấp thông tin đầu vào rồi nó ghi lại, lần khác bạn lại đăng nhập vào sử dụng như Facebook, YouTube, Instagram,… thì việc quản lý các tài nguyên bạn cung cấp được thưc hiện bởi khâu lập trình backend.

Người lập trình full-stack (cũng fullstack – danh từ): đây là việc viết mã/ lập trình ở cả phía client lẫn phía server. Ngày nay có nhiều stack để chọn lựa. Lập trình full-stack không có nghĩa là đa năng đến mức có thể làm việc với mọi ngôn ngữ chạy được trên server, mà một lập trình viên hoặc team sẽ phải chọn nhóm stack nào đó như là LAMP stack, MERN stack, JAMstack,…

DevOps: trước đây khi cloud chưa thông dụng, những lập trình viên full-stack thường là những người phụ trách luôn viêc cài đặt, cấu hình hạ tầng server để phần mềm của họ có thể chạy được. Ngày nay vì sự phức tạp của mạng máy tính với những kiến trúc mạng phức tạp, sử dụng cloud nên một số lập trình viên được tách ra chuyên biệt cho việc làm sao cho phần mềm có thể chạy được trên các nền tảng phức tạp. Họ sẽ làm công việc của lập trình viên full-stack, vừa làm việc của quản trị hệ thống nhưng thiên về ngôn ngữ lập trình hơn là thiên về thao tác trên các phần mềm dạng lót đường cho hệ thống mạng (nhóm này dành cho quản trị hệ thống system administrator).

Kết luận: thế giới Web là một thế giới thú vị, bạn có thể hưởng lợi từ Web nếu bạn hiểu biết kha khá về Web, biết cách tương tác với thế giới Web.

Lên đầu trang