Ngày xưa (từ năm 1994 đến chừng 2003) thế giới web khá đơn giản, lúc đó không có khái niệm front-end, back-end gì hết, chỉ có web tĩnh và web động. Hoặc nói thiên hướng kỹ thuật một chút, liên quan đến lập trình thì có client side script và server side script.
Ngày nay, phát triển web là một lĩnh vực trăm hoa đua nở, trở thành một nhánh phát triển phần mềm khá ồn ào, đông đảo ngươi tham gia, lấn át cả nhánh viết phần mềm cho desktop.
Vì vậy, bạn cũng cần biết chút ít về cách làm một trang web dù bạn chẳng phải dân CNTT.
Dễ thôi, nếu bạn siêng vào đây đọc bài, ngày nào đó bạn làm trang web ngon lành, chơi cũng được, dùng kiếm cơm cũng ổn.
Lộ trình phát triển web theo hướng frontend.
Nghe cứ rối beng cho người bắt đầu, nhất là những người muốn tự học. KACBT chúng tôi giải thích mấy cái này mệt xỉu mà cũng không biết viết ra như thế nào để tường bận vấn đề.
Viết dài thành một cuốn sách không ai đọc, viết ngắn người đọc không nắm được. Làm video clip thì nói thật là người ta xem giải trí thôi, không có tác dụng mấy về mảng học hành.
Thử tìm trên YouTube chúng tôi thấy rất nhiều movie clip hướng dẫn làm web đủ thể loại. Chất lượng giảng dạy đủ hạng mức, số lượt view cũng cao.
Quái lạ, vẫn rất nhiều người ngỏ ý KACBT mở khóa học để giúp họ làm web.
Website này như một thử nghiệm hỗ trợ những ai mong muốn làm một website tự tay, cứ thử cái đã, việc gì tiếp theo tính sau.
Bên trái là “đồ nghề” dành cho người làm frontend. Bên phải là dành cho người làm backend.
Vắn tắt, bạn cần nắm HTML, CSS, JavaScript nếu muốn làm trang web thiên về giao diện, hình ảnh, những cái người duyệt web nhìn thấy khi truy cập.
Có người đọc quá nhiều bài viết linh tinh, lại không chịu bắt tay vào thực hành, dẫn đến họ nói về front-end nghe rất khủng khiếp, cứ như một chuyên gia thực thụ.
Trong thực tế, vài năm trôi qua, họ vẫn chưa có, chưa làm được một trang web nào, cũng không thuê ai khác làm, họ vẫn tiếp tục mô tả về web, thật khôi hài.
KACBT theo kiểu cứ mỗi ngày làm chút một, như một trò chơi, sở thích lúc rảnh. Trang web được tạo ra có ra hình hài ổn ổn hay không tính sau, được vọc là vui rồi.
Học lập trình front-end là học viết mã HTML, CSS, JavaScript.
Đọc các bài viết sẽ có những hướng dẫn chi tiết, mô tả, giải thích từng dòng code có tác dụng gì, ra làm sao. Bạn cần ngồi gõ lại giống như vậy để được… thất bại. Thất bại lúc này là điều tốt chứ không phải điều tệ hại.
KACBT cố tình không cung cấp những đoạn code có thể copy & paste được. Chúng tôi dùng hình ảnh để hiển thị mã (code), đôi lúc rất khó đọc, đó là dụng ý chứ không phải công nghệ kém cỏi hoặc cách hướng dẫn lỗi thời, cũ kỹ.
Hình 1. Một trang web khởi đầu, đơn giản nhất
Cách của trẻ em đó là sau khi làm theo, tạo ra được một trang web như trên, bọn nhóc sẽ thử thay đổi, chỉnh sửa cái gì đó trong những dòng 1 đến 29 liệt kê trên hình để quan sát xem có chuyện gì xảy ra khi sửa này nọ. Bạn cũng nên làm như vậy dù bạn là người lớn.
Khi quậy tưng lên, hoay hoay với các đoạn mã làm nên trang web bạn sẽ hiểu vấn đề hơn. Bạn không khác gì một cậu nhóc phá banh chiếc xe nhựa, một bé gái kéo tóc, lột váy búp bê Barbie.
Hình 2. Trẻ em thích tìm tòi, tháo tung đồ chơi, bạn cũng từng như vậy.
Một khi bạn phải tự tay làm, mệt nhọc với các đoạn HTML, não của bạn mới có cơ hội được rèn luyện, các nơ-ron được cố kết với nhau. Từ đó, một thời gian sau đó sẽ giúp cho bạn sáng ý ra, làm được những thứ mà những học sinh từng quanh năm tới lớp học thêm của thầy cô giáo không làm được bởi vì họ đã mất đi khả năng tự học, tự đánh vật với bài tập.
Sự trăn trở của người trưởng thành
Trẻ em tư duy mang tính trực quan, cần đến hình ảnh nhiều hơn so với người lớn. Do vậy, việc nhìn, xem, thấy rồi bắt chước làm theo là một cách học hiệu quả.
Hình 3. Trẻ em sẽ chơi với trang web như này rồi mới viết mã
Trong khi đó, là người lớn, bạn cần phải sử dụng đến khả năng trừu tượng hóa tích lũy được qua bao nhiêu năm đi học. Bạn phải tập đọc hiểu các bài viết toàn chữ, hiểu được nó, thực hành rồi mở rộng vấn đề, nâng cấp lên, gọi là học một biết hai, ba,… hoặc mười.
Hình 4. Với người lớn, bạn cần phải hiểu được hình trên
Nếu bạn làm web mà chỉ như hình bên trái thì còn ở mức rất nghiệp dư. Đến lúc nào đó bạn sẽ phải chuyển sang mức ở hình bên phải.
Tuy học trên trang web KACBT này để làm web chơi là chính, học như một nghề tính sau, bạn vẫn nên đạt mức “tiêu chuẩn công nghiệp“.
CNTT, làm web là lĩnh vực trí tuệ hơn cơ bắp
Bạn từng nghe câu “một trí tuệ minh mẫn trong một cơ thể cường tráng“, và cũng nghe câu “đầu óc ngu si, tứ chi phát triển“. Hai câu trên bạn tin tưởng câu nào có lý hơn?
KACBT không phải là những nhà khoa học để khẳng định câu nào có lý hơn, chỉ thử có một tấm hình sau, bạn xem và cảm nhận:
Hình 5. Hãy xem não cũng là một dạng cơ bắp, vẫn có thể “tập gym” cho não
Điều chúng tôi nhắn nhủ: bạn nên rèn luyện việc làm web mỗi ngày để trở nên thành thạo hơn, tạo ra những trang web đẹp hơn, ấn tượng hơn chứ không phải bàn chuyện cơ bắp hay trí não gì ở đây.
Giao lưu, cọ xát để có cách làm hay hơn, tốt hơn
Trong lĩnh vực thể thao, đi thi đấu giao hữu, cọ xát rất quan trọng để một đội trở nên giỏi hơn. Trong việc học cũng vậy, bạn cũng nên giao lưu với những người đang làm web, người đang học làm web khác.
Hình 6. Cùng ngồi làm chung vài buổi mỗi tháng sẽ tiến bộ đáng kinh ngạc
Một số bạn từng phàn nàn với chúng tôi rằng không tìm ra chỗ để giao lưu vì là ở tỉnh thành nhỏ, ít người biết web là gì.
KACBT cho rằng chỉ là do bạn không thử đứng ra tạo sân chơi, rủ người khác cùng chơi nếu rơi vào trường hợp bạn không tìm thấy sân chơi. Ngày nay, bạn dễ dàng đăng lên group Facebook của địa phương bạn, ít ra cũng sớm lập được nhóm 5-6 người. Đừng có ngại vì bạn mới học không biết gì mà bày đặt. Chẳng ai chê cười người ham học đâu, chỉ có mấy thằng ngu mới tỏ thái độ thôi, bạn mà sợ mấy thằng ngu để rồi chùn bước học tập thì KACBT cũng không biết nói sao.
Để dễ dàng cho các bạn đọc, hiểu bài học, chúng tôi liệt kê một số quy ước trong bài viết để các bạn khi đọc phân biệt được đâu là mã cần viết, cách gọi tên, từ khóa tra cứu thêm trên Internet.
Đây là quy ước khi học HTML, CSS, JavaScript. Quy ước khi học PHP có bài riêng.
Chúng tôi tự xưng là Khó ăn cát bê tông (viết tắt KACBT).
Ký hiệu: : đây là mẹo/ lời khuyên hữu ích cho bạn : điều cần ghi nhớ nằm lòng : chú ý/ cẩn thận
I. Quy ước chung
1. Tên file, file (tập tin)
Tên file luôn sử dụng chữ thường, không chứa khoảng trắng, nếu muốn dễ đọc ta dùng dấu gạch ngang (dấu trừ trên bàn phím).
Tên file không chứa ký tự tiếng Việt có dấu, không chứa ký tự đặc biệt nào khác dấu trừ kể trên.
Đặt tên file HTML
File luôn được lưu với Encoding là utf-8 (without BOM) để nội dung tiếng Việt hiển thị tốt, không bị mã hóa ra dạng giun dế không thể đọc.
Các bài học nên sử dụng 1 trong 2 trình soạn thảo code được gợi ý tại đây.
2. Quy ước trong nội dung file HTML
Các thẻ HTML không phân biệt chữ HOA, chữ thường. Theo thông lệ chung hiện nay, KACBT gợi ý bạn một số quy ước nên tuân thủ để việc tra cứu, học hỏi nâng cao về sau thuận tiện, dễ dàng.
Trong nội dung một file HTML, các thẻ (tag) đều viết chữ thường. Nếu nội dung tag dài, nên đặt tag mở (opening tag) trên một dòng, nội dung (text) gồm một số dòng khác, tag đóng (closing tag) nằm trên một dòng riêng. Ví dụ:
JavaScript được viết hoa chữ S vì đây gần như là tên riêng, danh từ riêng, hoặc nhãn hiệu. JavaScript được viết tắt là JS.
Thẻ trống (empty tag) thì nên sử dụng tự đóng thẻ:
Các thẻ rỗng (empty tag) nên tự đóng
Tên thẻ, một khoảng trắng rồi đến dấu chém tới (slash) dù không bắt buộc.
Những thẻ rỗng không thể làm theo cách thẻ có nội dung. Nghĩa là:
Thẻ rỗng viết theo kiểu thẻ có nội dung là không hợp lệ!
sẽ được xem là thẻ không hợp lệ (invalid tag).
Ở những bài học đầu tiên, khi CSS chỉ để minh họa cho HTML ta có thể viết trực tiếp CSS vào phần HEAD, bên trong thẻ STYLE.
Những bài học về sau, khi dùng CSS, JS phải tạo file riêng, không viết CSS, JS trực tiếp vào file HTML.
II. Quy ước của KACBT trong bài viết về HTML, CSS, JS
Thẻ (tag): là quy tắc đánh dấu trong HTML để trình duyệt biết cách mà xử lý. Cấu tạo chung của thẻ sẽ gồm <tên-thẻ>Nội dung của thẻ</tên-thẻ>
Thẻ DIV, thẻ P được viết khá đầy đủ
Nếu thẻ thuộc loại không có nội dung, sẽ là <tên thẻ />, minh họa:
Thẻ IMG – chèn ảnh vào nội dung HTML
Khi KACBT viết “hãy tạo một HEAD” (chữ HEAD viết hoa, viết HOA cho dễ đọc chứ không phải là bắt buộc về quy định của W3C khi soạn HTML), bạn cần nhập nội dung:
HÌnh 1. Cách viết một thẻ HTML một cách tổng quát
Tương tự, bạn thấy KACBT viết “hãy tạo một DIV” thì bạn nhập:
Hình 2. Khi nói tạo một DIV
Thay từ HEAD, DIV bằng từ khác như P, SECTION,… bạn đọc thấy trong bài, những từ được viết in HOA 100%.
Mặc dù trong HTML không phân biệt chữ hoa với chữ thường, nhưng khi tạo thẻ, ta nên viết thường toàn bộ như trên.
Diễn giải bằng lời cho một tag đầy đủ:
Lần lượt nhập từ bàn phím:
Dấu bé (dấu <)
Tên thẻ (ví dụ: p, div, title)
Dấu lớn (dấu >)
Nội dung thẻ (text) nếu thẻ có nội dung
Dấu bé (dấu <)
Dấu xuyệt chém tới (dấu / slash)
Tên thẻ (giống 2. ở trên)
Dấu lớn (dấu >)
Minh họa cấu tạo một thẻ HTML
Khi tag không có nội dung text, trông tag như sau:
Tag không có nội dung
Thẻ (tag) và phần tử (element) quan hệ với nhau thế nào?
Khi KACBT viết “tạo một Đoạn văn” hoặc “tạo một Paragraph” hoặc “tạo một P”, bạn phải linh động để hiểu mục đích đều yêu cầu bạn tạo thẻ P.
Trong các bài viết HTML, chúng tôi sử dụng các từ khác nhau để đề cập element như: phần tử, thành phần, nhân tố, đối tượng. Bạn cần linh động nắm bắt!
Khi KACBT viết “tạo Image” hoặc “tạo IMG” hoặc “tạo element hình ảnh” bạn phải ngay lập tức biết rằng đang yêu cầu bạn nhập đoạn mã:
Element đại diện cho một hình ảnh
có một thẻ HTML tên là HTML, nó cũng giống như bạn tên Nguyễn Văn Tên, khi người khác hỏi bạn: bạn tên gì? Bạn đáp: tôi tên Tên. Tức là trong file HTML có tồn tại duy nhất một thẻ:
Thẻ HTML trong file HTML
Trật tự, thứ tự các thuộc tính (attribute) trong một thẻ HTML không quan trọng. Thường thì các thuộc tính quan trọng/ thường dùng/ để nhận diện người ta sẽ cho đứng trước. Ví dụ:
Các dòng 1, 3, 4 trên là tương đương, cho ra cùng một element IMG.
Trong hầu hết các ngôn ngữ lập trình, ngôn ngữ máy tính đều cho phép người viết tạo các ghi chú. HTML cũng không phải là ngoại lệ.
Bạn muốn ghi chú gì (comment) đó, những dòng ghi chú giúp bạn sau này đọc lại hoặc phân tích mã, và ghi chú không xuất hiện cùng nội dung trang web khi người duyệt web xem trang web, chỉ cần tạo một dòng/ vài dòng như bên dưới:
Comment trong HTML, 3 cách trên đều được
Quy ước trong CSS
Một khối CSS có cấu trúc:
Selector theo đúng quy định viết CSS
Dấu sừng trâu mở
Các luật (rule): gồm phần bên trái là property kèm dấu hai chấm, bên phải là giá trị
Dấu sừng trâu đóng
Một khối mã CSS (block of CSS code)
Để tránh việc sai sót, ngay khi viết bạn nhập selector xong, nhập dấu sừng trâu mở, dấu sừng trâu đóng rồi lùi con trỏ lại giữa hai dấu sừng trâu, bấm phím Enter để nhập các rule.
Viết lần lượt các khối CSS theo trình tự xuất hiện của các element trong HTML.
Ghi chú (comment) trong CSS được bắt đầu với dấu chém tới (slash), tiếp theo là dấu hoa thị/ dấu sao (asterisk), nội dung ghi chú, và đóng bằng dấu hoa thị, rồi đến dấu chém. Minh họa:
Ghi chú trong CSS
Quy ước trong JavaScript
JavaScript là ngôn ngữ phân biện chữ HOA, chữ thường. Do đó, không được tự tiện viết theo ý bạn mà phải viết giống đoạn mã minh họa vì có khi chỉ sai 1 ký tự mà toàn bộ đoạn mã bị đổ vỡ.
File JavaScript đặt trong thư mục js ngang cấp với file HTML bạn đang sử dụng để khi dùng, sử dụng đường dẫn tương đối tham khảo đến file.
Đặt các file JavaScript (tức file .js) trong thẻ SCRIPT trước thẻ BODY đóng. Trông như sau:
Vị trí đặt thẻ SCRIPT gọi file JavaScript vào HTML
Ghi chú trong JavaScript: nếu comment ngay trong dòng mã đang viết, hãy sử dụng hai dấu slash liên tục rồi đến nội dung ghi chú.
Nếu comment là một đoạn, sử dụng lần lượt dấu slash, dấu hoa thị, nội dung comment, dấu hoa thị, dấu slash giống với ghi chú CSS đã đề cập bên trên (xem hình có số 2 trong vòng tròn màu đỏ).
Một số khái niệm căn bản
Thư mục (directory/ folder trong lĩnh vực máy tính): khái niệm quen thuộc cho mọi người dùng máy tính trên mọi hệ điều hành. Nó là một tên đại diện để nhóm các tập tin lại với nhau, khi xóa thư mục, đồng nghĩa với các thư mục, tập tin bên trong nó cũng bị xóa.
Đường dẫn (path): để chỉ vị trí của một thư mục hoặc một tập tin (file) cần chỉ định. Nhà cửa có địa chỉ, một thư mục/ tập tin đối với hệ điều hành cũng có một đường dẫn để chỉ định nó. Trong hệ điều hành Windows, ký tự phân cách các thư mục là dấu slash ngược (dấu \). Trong khi học HTML, bạn sử dụng dấu slash xuôi (dấu /) để viết.
Phần mở rộng của file (file extension): trong khi học HTML bạn sẽ luôn thấy file có phần mở rộng, còn gọi là đuôi, hoặc chấm. Ví dụ: .html, .png, .jpg, .js, .css. Các đuôi file nên dùng chữ thường để tránh rắc rối khi xuất bản trang web của bạn lên hosting, gây lỗi. Nguyên nhân lỗi là do Windows không phân biệt chữ HOA, chữ thường trong tên file, phần mở rộng, nhưng hệ điều hành khác phân biệt chữ HOA, chữ thường.
Trang web này dành cho những ai thực sự mong muốn tự học làm trang web, phát triển website, kiến thức chủ yếu dành cho người mới bắt đầu. Bạn là:
Học sinh muốn làm trang web cho cá nhân, nhóm bạn, lớp học.
Một người làm việc nhiều trên mạng, rất quen thuộc với web, chưa từng làm web, giờ muốn tự tay làm một trang web.
Một cá nhân muốn học phát triển website để kiếm sống.
Một người tò mò, muốn thử cái gì đó mới mẻ, mang tính công nghệ chút xíu, nghĩ rằng web là cái thú vị.
Nếu bạn thuộc một trong các trường hợp kể trên, trang web này dành cho bạn.
Những điều nên & không nên cho người mới
Đừng quan tâm lộ trình: hãy đi rồi có đường, đích đến không quan trọng bằng vui thú trên chuyến đi.
Một chuyến đi mà bạn không chắc sẽ đi đến đâu rất thú vị, đáng trải nghiệm, đậm thử thách hơn nhiều so với chuyến đi bạn đã nhìn thấy rõ ràng sẽ tạo cảm giác chán phèo.
Hãy yên tâm rằng KACBT có lộ trình khá bài bản cho bạn, các bài học sẽ có thứ tự, bổ sung cho nhau để cuối cùng sản phẩm tạo ra là một website hoàn chỉnh.
Mỗi ngày hoặc tối đa 2-3 ngày học một chút sẽ tốt hơn nhiều so với dồn lại 1 tuần, 1 tháng mới học một buổi nhiều tiếng đồng hồ.
Nhớ đăng ký để tham gia thảo luận, giúp quá trình học tốt hơn, hiểu bài và thực hành thông suốt. Chú ý: chỉ đăng ký nếu bạn tích cực, mỗi tuần đều tham gia thảo luận 1-2 lần, khi bạn không tham thảo luận trong vòng 1 tháng, chúng tôi sẽ xóa tài khoản.
KACBT phối hợp các cách thức để lý thuyết, thực hành, bài tập nâng cao, dự án nhỏ để người học cảm thấy có hứng thú, tự đánh giá được sự tiến bộ.
Để không lạc lối trên trang web lộn xộn này
Bạn cần truy cập chức năng Menu ở góc phải – trên của trang, học gì cứ mục đó mà đọc bài lần lượt theo số thứ tự 1-2-3…
Nói về trình soạn thảo mã dành cho dân lập trình thì đầy ra, việc lựa chọn này cũng gây tốn giấy mực, tranh cãi loạn cả lên. Vì vậy, bài này có thể làm mất lòng các bạn. Mình chỉ nói rằng cái gì gọn nhẹ, ít chức năng, chỉ vừa đủ sử dụng là ngon lành cho người mới tự học rồi.
Mục đích là bắt tay vào viết code để học, chứ không phải trang bị vũ khí khủng để làm gì. Bạn có thấy trường dạy lái xe nào cho học viên thực hành trên những con xe ô-tô dạng siêu xe hoặc xe phân khúc tầm cao giá trên 1 tỉ đồng?
Vậy, ứng viên cho trình soạn thảo code cho người học mới bắt đầu trên môi trường Windows đó là mình có vài gợi ý sau:
Một chàng phi công soạn thảo PilotEdit Lite (chú ý khi tải click phiên bản có chữ Lite)
Các trình soạn thảo trên đều miễn phí hoặc dùng cho cá nhân không phải mua licence.
Những ai học theo hình thức gia sư 1 kèm 1, chúng tôi sẽ yêu cầu như là sự bắt buộc: chỉ được dùng một trong các trình soạn thảo bên trên. Ai cứng đầu, thích dùng mấy “vũ khí khủng” thì đã không thể tiếp tục rồi, vì họ có triết lý khác mình, mình hướng dẫn họ thì dễ… cãi lộn.
Bạn hãy mạnh dạn bỏ qua các tên tuổi như:
VS Code (viết dài là Visual Studio Code): cái này quá khủng, nhiều chức năng quá gây rối
Sublime Text: mắc tiền để mua, đến 99 đô la Mỹ thì không dành cho người mới tự học làm web
Bracket, Atom: những cái này trước khi có VS Code thì ngon, nhưng giờ VS Code đã thống lĩnh
Các IDE khác: cái này dành cho những người lập trình phần mềm hơn là dân ngoại đạo
Việc sử dụng các trình soạn thảo trang bị nhiều thứ hay ho, trong đó cái chức năng “nhắc bài” cực kỳ tai hại cho người mới học vì sẽ không nhớ được các từ khóa, cú pháp của ngôn ngữ mình học. Mặc dù nhiều người giờ cảm thấy nóng ruột, muốn làm cái gì đó nhanh vì sợ không theo kịp thiên hạ. Nhưng họ nào có biết rằng con người ta hoạt động đơn nhiệm, và câu “dục tốc bất đạt” vẫn luôn còn tồn tại đó. Để có rượu ngon người ta không làm cách nào khác ngoài việc ủ trong hầm hàng chục, hàng trăm năm. Để có một dân tộc vĩ đại, người ta cần phải tích luỹ văn minh qua nhiều thế hệ.
Cho dù, bạn đang ở đây chỉ muốn làm kiểu nghiệp dư chơi mà thôi, chúng tôi vẫn muốn rằng chơi thì chơi nhưng phải có cái gì đó đọng lại như một kỷ niệm, ngồi gõ phím lóc cóc, thô sơ là một sự “sang chảnh” trong thế giới đầy “tóp tóp”.
Bạn học tiếng Anh mà không cần nhớ từ vựng chứ? Tương tự, bạn cũng cần phải nhớ “từ vựng” khi học ngôn ngữ HTML, ngôn ngữ định kiểu xếp tầng CSS, lập trình JavaScript.
Trong một số bài thực hành, bạn cũng cần biết đến những trình soạn thảo dạng live trực tiếp, trực tuyến như codepen chấm io, hoặc jsFiddle chấm net, hoặc vài thứ khác. Những công cụ này khi học đến những bài học cần đến, KACBT sẽ giới thiệu, giờ đây bạn chỉ cần nghe tên thôi để bớt bỡ ngỡ chứ chưa cần dùng ngay.
Học lập trình front-end là học viết mã HTML, CSS, JavaScript.
: đây là mẹo/ lời khuyên hữu ích cho bạn
: chú ý/ cẩn thận
