---------
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.
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (10) - Tìm và sửa lỗi HTML&CSS