Tạo một portfolio sử dụng html + css
Github tham khảo:
https://github.com/christinatruong/css-essential-training
Mdn docs:
https://developer.mozilla.org/
Margin-right trong css:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
Grid-template-columns trong css:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
Column gap trong css:
https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
Display theo kiểu grid:
https://www.w3schools.com/css/css_grid.asp
Chú ý: nếu không hiểu thuật ngữ htm, css, js thì tra mdn docs(chứa toàn bộ):
Trong mỗi bài có link tới những bài khác để người đọc hiểu rõ về nội dung tra cứu
Justify content trong css: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Float trong css:
https://developer.mozilla.org/en-US/docs/Web/CSS/float
Media rule:
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Backgroud-position trong css:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Background-size trong css:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Overflow trong css:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Giải thích inline-block:
https://www.w3schools.com/Css/css_inline-block.asp
border-bottom:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom
Giải thích dấu >:
https://stackoverflow.com/questions/4459821/css-selector-what-is-it
Bài làm được tham khảo từ:
https://christinatruong.github.io/css-essential-training/css-portfolio/
Giải thích dấu ~:
https://www.w3docs.com/snippets/css/what-does-the-css-tilde-selector-mean.html
Giải thích dấu +:
https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean
Hiểu cách viết tắt của css property:
property: a b c d
a: trên
b: phải
c: dưới
d: trái
Nếu chỉ có a, b:
a: Trên dưới
b: Trái phải
Tương tự nếu có thêm c: c = trái phải
Test font chữ:
https://fonts.google.com/
Cursive: chế độ mô phỏng chữ như chữ viết tay
line-height:
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
padding:
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
margin:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
*:before (CSS2):
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
*:after (CSS2):
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Tạo bảng màu phù hợp:
https://coolors.co/
class:
danh sách các lớp của phần từ được phân tách bằng dấu cách
cho phép css và js chọn và truy cập phần tử cụ thể thông qua các bộ chọn lớp
Tăng giảm để tìm màu hợp lí:
https://css-tricks.com/examples/HSLaExplorer/
Sử dụng Live Server Extension để view code html sau khi save:
https://stackoverflow.com/questions/30039512/how-to-view-an-html-file-in-the-browser-with-visual-studio-code
Cách optimize image for size:
https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips
Cách sử dụng googlefonts api:
https://developers.google.com/fonts/docs/getting_started