Ngu ngơ học làm web (9) - Làm một số trang web bằng HTML và CSS

tiếp theo của: Ngu ngơ học làm web (8) - Quy trình & công việc làm web
---------

Phần 9.       Làm một số trang web bằng HTML và CSS

Tới đây, đã biết một chút về HTML và CSS rồi. Tuy nhiên, mới chỉ là những kiến thức rời rạc. Giờ thử áp dụng những gì đã học được để làm một số sản phẩm, trong đó chỉ sử dụng HTML và CSS xem sao.

Theo mô hình học tập dựa trên trải nghiệm, cụ thể là Chu trình Kolb thì: để nắm được kiến thức, người học cần trải qua đủ 4 giai đoạn là: trải nghiệm rời rạc > quan sát đánh giá lại sự việc (chiêm nghiệm) > khái quát các khái niệm (hệ thống hóa) > chủ động thử nghiệm (tự tạo ra sản phẩm).

Việc làm trang web theo clip chính là trải nghiệm rời rạc, do vậy cần phải có sổ tay để ghi lại và tổng hợp các kiến thức, cần có trang github để lưu lại mã nguồn các sản phẩm của mình tạo ra.

Website 1: themeforest

Cùng xem và làm theo các clip sau để làm một cái mẫu website trên trang themeforest.com (đây là trang web chuyên làm các giao diện website để bán):

Đây là mẫu website sẽ làm (tải các hình ảnh từ đây về máy để làm theo clip): http://preview.themeforest.net/item/summer-moon-fashion-store-muse-template/full_screen_preview/19616699?_ga=2.221924696.1947949827.1598602589-996235505.1572874026

Lấy được hết các ảnh gốc từ mẫu website này về cũng là một kĩ năng, học được khá nhiều thứ về ảnh nền, đường dẫn, inspect.

Clip 1: bố cục, menu, lấy mã màu, tính các giá trị margin, padding.

https://www.youtube.com/watch?v=NMhLn_dMD5I

Clip 2: slice, position

https://www.youtube.com/watch?v=jlWosRCdFfQ

Clip 3:

https://www.youtube.com/watch?v=bm2zsyHa54o

Clip 4: cài và sử dụng cái css-auto-prefix, học cách hiển thị thông tin một mục hàng hóa

https://www.youtube.com/watch?v=PwhizbYizJ8

Clip 5: banner

https://www.youtube.com/watch?v=5ofS0WoMGbg

Clip 6: footer

https://www.youtube.com/watch?v=w5bDy6zBYx0

Website 2: Chợ tốt

Clip 1. Giới thiệu: https://www.youtube.com/watch?v=9TOQeho9-4U

Clip 2. Menu: https://www.youtube.com/watch?v=WyocO_4J-Mc

Clip 3. Ảnh (dùng kĩ thuật grid): https://www.youtube.com/watch?v=_jtgLXXgcRg

Clip 4. Position: https://www.youtube.com/watch?v=l1La3Mu78JA

Sau khi làm theo các clip trên, thấy được một số sản phẩm nhỏ nhỏ ban đầu, mặc dù chỉ là làm theo, nhưng thấy cũng vui vui.

Vì chuẩn HTML và CSS liên tục thay đổi, nên có những thẻ hoặc thuộc tính sẽ bị lỗi thời. Để biết những thẻ, hoặc thuộc tính nào đã lỗi thời, có thể vào trang web sau để xem.

https://www.codehelp.co.uk/html/deprecated.html
-----------
Cập nhật 31/08/2020
-----------