----
Mini project (hosting, domain, git, HTML, CSS)
1) Tạo tài khoản trên hệ thống remote git bất kì (github,
gitlab)
2) Tạo mỗi kho chứa cho mỗi dự án nhỏ, làm được dự án nào
thì push code lên remote git
3) Tạo một hosting trên internet, tạo một trang index.html,
trên đó có chứa link tới từng dự án của cá nhân
4) Mini project 1. Làm theo clip để tạo ra một số website hoàn
chỉnh, học thêm về bố cục (layout) của một trang web.
5) Mini project 2. Làm theo clip để tạo một website hoàn chỉnh,
đơn giản
6) Xem một số nguyên tắc khi viết mã HTML, CSS
7) Sử dụng Sublime Text hiệu quả
8) Sử dụng VS Code
hiệu quả
9) Mini project 3. CSS3, Layout, Flex, Responsive, Mobile First
Xem và làm theo.
https://www.youtube.com/watch?v=8gNrZ4lAnAw
Hình ảnh và mã nguồn tham khảo: https://drive.google.com/open?id=17h5l4sLiKciOQr3afqr-Fn5rBfTULBuk
Một số ý lượm được từ clip trên:
– Để làm Front-end cần học HTML, CSS, JavaScript.
– Hai code editor được nhiều người đang sử dụng là VC code và Sublime Text.
– Khai báo class và id trong HTML để CSS và JavaScript sử dụng sau này
– HTML validation
– w3schools.com là một trong những website tin cậy để tham chiếu
– Đơn vị đo tương đối (relative) và tuyệt đối (absolute) trong CSS
– CSS functions, ví dụ: background-color: rgba(0,0,0,0.4)
– CSS media queries giúp thực hiện responsive giao diện
– Học một số lệnh cd, mkdir
– Sử dụng Live server trong VS code để tự động cập nhật kết quả trên trang web khi lập trình HTML, CSS
– Cách tổ chức bố cục (layout) của một trang web
– Để ý tính ngữ nghĩa khi dùng các phần tử HTML
– Mobile first trong HTML và CSS
– Sử dụng flex
– Tạo đường xiên của một hình bằng transform: skewY()
– Cách tạo góc nhọn của một hình bằng phần tử pseudo, ví dụ: container:before
– Responsive
10) Mini project 4. Tự làm theo mẫu có sẵn:
Xem và làm theo.
https://www.youtube.com/watch?v=8gNrZ4lAnAw
Hình ảnh và mã nguồn tham khảo: https://drive.google.com/open?id=17h5l4sLiKciOQr3afqr-Fn5rBfTULBuk
Một số ý lượm được từ clip trên:
– Để làm Front-end cần học HTML, CSS, JavaScript.
– Hai code editor được nhiều người đang sử dụng là VC code và Sublime Text.
– Khai báo class và id trong HTML để CSS và JavaScript sử dụng sau này
– HTML validation
– w3schools.com là một trong những website tin cậy để tham chiếu
– Đơn vị đo tương đối (relative) và tuyệt đối (absolute) trong CSS
– CSS functions, ví dụ: background-color: rgba(0,0,0,0.4)
– CSS media queries giúp thực hiện responsive giao diện
– Học một số lệnh cd, mkdir
– Sử dụng Live server trong VS code để tự động cập nhật kết quả trên trang web khi lập trình HTML, CSS
– Cách tổ chức bố cục (layout) của một trang web
– Để ý tính ngữ nghĩa khi dùng các phần tử HTML
– Mobile first trong HTML và CSS
– Sử dụng flex
– Tạo đường xiên của một hình bằng transform: skewY()
– Cách tạo góc nhọn của một hình bằng phần tử pseudo, ví dụ: container:before
– Responsive
10) Mini project 4. Tự làm theo mẫu có sẵn:
Hướng dẫn, gợi ý:
– Xem bố cục trang web gồm mấy vùng, tên mỗi vùng, cấu trúc
cha-con
Đăt outline cho phần tử body để thấy được bố cục trên trang
mẫu, thấy được quan hệ phân cấp của các phần tử
– Viết HTML, và CSS cho từng vùng
Do tính chất kế thừa của CSS, nên sẽ thực hiện CSS cho các
phần tử cha trước sau đó đến các phần tử con.
Một bố cục tham khảo:
<body>
<section
id="page">
<div
id="main">
<header
id="header">
<div
class="header_top"></div>
<div
class="header_mid"></div>
<div
class="header_bot"></div>
</header>
<section
id="middle"></section>
</div>
<footer
id="footer"></footer>
</section>
</body>
– fontello:
Cập nhật [09/12/2019]
-----------
Xem thêm: Học làm web (59) - JS căn bản (1)