Bài học đau đớn khi chập chững CSS + Kinh hoàng bài tập Tribute Page trên freecodecamp

Bài này không nhằm chê freecodecamp, thậm chí còn khen nhé :v

Trong bài có sử dụng sự trợ giúp của các bạn Hồ Xuân Diễn, Robin Huy, Anh Nguyễn, Da Peng, Nguyễn Quốc Đại. (no particular order)

1.1 Kinh hoàng thứ nhất,

Challenge này có vẻ đến quá đột ngột, người học mới chỉ được học qua về html và css và bootstrap (một cái mình nghĩ là hơi sai thời điểm). Thật ra lý thuyết mà nói thì những nguyên liệu cần thì cung cấp đủ rồi nhưng không có cách pha chế thì sao pha được. Không có cái "chốt", tổng quan, hướng dẫn cách làm sao cho đúng. Ngay từ đầu mà tạo thói quen xấu thì sau khó sửa.

1.2. Kinh hoàng thứ hai

Đáp án sử dụng liên hoàn trận bootstrap với hình thức là một mớ class tung hoành ngang dọc trừu tượng, làm chúng em bối rối. Tại sao lại đưa bootstrap vào lúc này? Vào bài tập code ĐẦU TIÊN trong đời người freecodecamper? Thay vì làm css thuần cho quen tay, cho hiểu rõ ngọn ngành vấn đề, lại gợi ý người ta dùng bootstrap. Damn...

Tóm gọn lại là...

Dù như vậy nhưng freecodecamp vẫn là một nơi rất đáng học nhóe. Đặc biệt là mục Javascript. Hơn nữa cộng đồng freecodecamp Việt Nam (2 group FB là free code camp Hanoi và free code camp Sai gon) đều chứa những con người hết sức đáng yêu, nhờ có họ xui mình mới biết đến "diễn đàn" này để viết bài :v

Sau đây là cách làm bài này theo CSS đúng nghĩa, không bootstrap boot triếc gì hết, chưa nắm css đã bootstrap nhiều hư người!

Nhiều bạn sẽ lao đầu vào gõ html luôn. Vậy không sai nhưng sẽ mất công add class về sau. Nếu ý thức được ít nhất vài class chính mà từng element sở hữu để viết đến đâu thì add class đến đó sẽ tiết kiệm thời gian và công lực cho chúng ta.

Đừng phang bàn phím vội mà hãy sống chậm lại và yêu thương nhiều hơn... nhìn vào trang web và tạm ước lượng có những font gì, có những kiểu cách gì... lặp đi lặp lại thì tạo class đó đi đã.

Ta nhìn vào trang Tribute Page này và nhận thấy kiểu cách đầu tiên đập vào mặt là mớ số đậm này đây

Còn chờ gì nữa mà không sản sinh ra ngay 1 class text-bold

.text-bold {
    font-weight: bold;
}

ê chỗ này có chứ nghiêng nè, tạo class chữ nghiêng thôi chứ chờ gì nữa

.text-italic{
  font-style: italic;
}

Ngắm ngắm thì sơ qua trang web này có 5 size chữ. Mình tạm gọi theo size áo là XS, S, M, L, XL.

.text-xs{
font-size: 1rem;
}

.text-s{
font-size: 1.2rem;
}

.text-m{
font-size: 1.5rem;
}

.text-l{
font-size: 2rem;
}

.text-xl{
font-size: 3rem;
}

Hiển nhiên phản xạ của chúng ta là dùng px để định dạng kích thước font chữ bởi vì px là thứ quen thuộc thân thương nhất còn những cái như rem hay % thật khó hiểu và xa vời. Nhưng rem và % mới là cặp đôi hoàn hảo nâng niu font chữ web... sẽ ghi rõ ở phần 2.3.

2.2. Div và div và div

Hồi đầu mình cũng không thích thằng <div> này đâu vì chẳng hiểu đâu sinh ra từ "div" nghe khốn khốn... chẳng rõ nghĩa gì cả. header thì nói toẹt ra là <header>, paragraph thì nói ra là <p>, list nói toẹt ra là <li>

Nhưng khổ đau thay <div> lại là thứ không thể thiểu ở bất kì web nào dù nhỏ đến lớn.

Công dụng của nó là ĐÓNG GÓI các thành phần cần đóng gói.

Tại sao cần đóng gói?

Dễ xử hơn chứ sao. Ví dụ như bạn có rất nhiều ảnh trong ổ cứng thì bạn hay chia thành các thư mục lớn thư mục nhỏ bởi như vậy dễ quản hơn

Còn đối với trang web thì ta chú ý ngay từ trước khi viết html, phải gói các element vào các div class để dễ bề cai trị và áp đặt lề lối (lề trái lề phải lề trên lề dưới). Đừng cho cả đống ngồi lũ lượt ra tràn lan khắp nơi.

Lấy ví dụ là cái trang Tribute page loài mèo mình nhái lại layout của trang Tribute Page ông Truman đen trắng bên freecodecamp ấy. Bạn sẽ thấy chúng được phân chia như sau.

Cái body trắng bao lấy content xanh. content bao lấy cái ảnh-kèm-caption có nền trắng, cái ảnh-kèm-caption thì bao lấy ảnh và caption. Lưu ý là không phải caption là nền trắng mà là cả ảnh và caption đều có nền trắng, thế nên mới gói ảnh và caption lại 1 div class .image-with-cap

Biết thế rồi nên hồi sau, khi viết html nhét luôn div class vào chỗ cần thiết

2.3. Làm gì cũng nghĩ đến những thằng bé hơn mình

Không phải nhà ai cũng có điều kiện như bạn để sở hữu chiếc máy tính bàn với màn hình desktop (và cục cây đồ sộ kêu rần rần hàng đêm). Biết bao con người ngoài kia với hoàn cảnh khó khăn đang khổ sở lướt web với những thiết bị bé tí như iPad, iPhone X,... Vì thế chúng ta phải biết nghĩ cho họ và viết một cái website hiển thị tốt trên những thiết bị tội nghiệp đó chứ đừng có hống hách một mình một lối.

Vì thế nên những đơn vị đo tuyệt đối như px phải bị loại trừ và thay vào đó là đơn vị đo tương đối, chúng rất linh hoạt uyển chuyển, đó là vw, %, rem.

• vw là bao nhiêu phần trăm so với chiều ngang màn hình
• vh là bao nhiêu phần trăm so với chiều dọc màn hình
• % là bao nhiêu phần trăm so với kích thước cha mẹ
• em là gấp bao nhiêu lần kích thước font chữ tiêu chuẩn của trang web của bạn.

Ứng dụng:

2.3.1. Kích thước font chữ

2.3.1.1. Tuyên bố font size tiêu chuẩn của web của bạn.

Bằng cách set font-size: bao nhiêu %; cho body.

phần trăm ở đây được hiểu là phần trăm so với con số 16px.

Vì font size tiêu chuẩn của trình duyệt thường là 16px nhưng mà chưa chắc được. mỗi thằng trình duyệt một kiểu, lỡ thằng nào ko biết nghĩ cho người nghèo dùng điện thoại bé nó set cho 10px thì có mà mờ mắt. Hoặc thằng nào cận thị lâu ngày nghĩ ai cũng như mình nên cho luôn 20px đi chẳng hạn. Cho nên chúng ta những web dev luôn lường trước được điều đó và dùng phần trăm cho body để dễ bề xử lí hậu họa về sau.

body {
font-size: 90%;
}

2.3.1.2. Set kích thước font chữ cho các đoạn văn trong trang

Không biết có ai như mình không, bị cận nhưng vì đôi mắt một mí quá quyến rũ nên không nỡ đeo kính, lúc mình đọc báo trên điện thoại, thỉnh thoảng có vài trang web chữ bé tí. Mình vô trình duyệt đặt chế độ chữ TO rồi thì hầu như là các trang chữ TO lên thật, nhưng một số trang vẫn cứng đầu không theo?!

Vì cái thằng viết web đó nó đặt font chữ bằng px đó mấy pa! Đã px là không xê dịch (một cách thông thường) được.

Hơn nữa, giả sử muốn cả web của mình chữ to lên hay bé đi (nhưng vẫn phải có thứ tự trên dưới, có cái này to hơn cái kia, chứ không phải đều đều toàn bộ 1 size). Khi làm phiên bản desktop, vì hay show hình show các chương mục show đủ thứ linh tinh... đảm bảo nhu cầu thẩm mĩ... thì chữ bé nó mới ngầu. Còn trên phiên bản di động, vứt hết mọi râu ria chỉ để lại chữ và vài cái ảnh cơ bản, thì lại to chữ ra cho dễ đọc tìm kiếm thông tin. Không lẽ thay size từng đoạn văn một.

Ví dụ ban đầu web có 3 font như sau

.to{
size: 100px;
}
.vua{
size: 40px;
}
.nho{
size: 10px;
}

Thế giờ muốn cả lũ này gấp đôi lên thì lại phải thế này

.to{
size: 200px;
}
.vua{
size: 80px;
}
.nho{
size: 20px;
}

Khi đó dùng rem

Cũng không có gì khó cả, 1rem = kích thước font chữ vừa set trong body = kích thước phần trăm so với font chữ của trình duyệt (thường là 16px)

Và rem nó tỉ lệ với nhau nên mình chỉ cần thay đổi đúng thằng body là được

Đây ban đầu giả sử body là 100% (100% thường là 16px)

body{
font-size: 62.5%;     tức là 62.5% x 16px = 10px
}

còn cái font chữ của các đoạn văn thì nó như sau:

.to{
font-size: 10rem;           tức là 10 x 10px = 100px
}
.vua{
font-size: 4rem;            tức 4 x 10px = 40px
{
.nho{
font-size: 1rem;            tức 1 x 10px = 10px
}

Khi cần cả lũ to lên gấp đôi thì chỉ việc chỉ điểm thằng body

body{
font-size: 125%;        tức 125% x 16px = 20px
}

Đẹp cả hai đường nội ngoại

2.3.2. Kích thước div

Cái này đỡ nhức nách hơn kích thước font chữ, chỉ dùng duy nhất %

Với điều kiện bạn đóng gói div cẩn thận, lớp lang... rồi, thì không cần quan tâm đến gì ngoài %

% ở đây là % so với kích thước cha mẹ chúng. Và từ giờ trở đi tất cả những gì ta làm là so với div cha mẹ chúng, chứ không phải so với đơn vị đo tuyệt đối toàn cầu như px. Mọi thứ đều tương đối, y như việc bạn đẹp trai nhất nhà nhưng lại xấu trai nhất lớp vậy.

bởi vì là so với cha mẹ chúng, nên khi cần chúng co dãn theo chiều rộng màn hình thì ta không cần set chúng với vw (view awidth = phần trăm chiều rộng màn hình) bởi vì tổ tiên cố nội nó là thằng body đã được set chiều rộng 100vw = chiều rộng của loại màn hình mà người dùng đang sử dụng.

Điều ta cần làm là

• Set mọi thứ với % (trừ phông chữ thì xem lại mục 2.3.1 liền trước)
• Lo sao cho chúng có cây gia phả tử tế, chặt chẽ, không mồ côi cơ nhỡ. Khi nó không có tổ tiên cha mẹ để dựa vào thì khó điều chỉnh. Xem lại mục 2.2. div div và div

Lẽ ra một bài tập nhỏ con thế này không phải rùm beng lên thế. Nhưng các bạn thông cảm, mình xác định lâu dài chứ không phải chợp giật, làm cho qua. Học cách làm bài này rồi còn có nền tảng làm những bài lớn hơn nữa chứ không phải thấy nó nhỏ mà khinh. Ngay từ đầu mất thời gian một tí về sau càng đỡ mất thời gian.

Lưu ý là các kích thước không thật sự y chang như trang tribute page mẫu vì mình ngại đo nên mình ước lượng bằng mắt... Nhưng tinh thần layout như nào thì giữ nguyên như thế và các bạn hoàn toàn áp dụng được.

Link xem trực tiếp bài mình làm ở Codepen, xin lỗi vì indent như !@#$:

.

body{
awidth: 100vw;
  padding: 0;
  margin:0;
  font-family: noticia text, arial;
  font-size: 90%;
  line-height:1.5;
}

Chiểu rộng của body mình xác định luôn là 100vw tức bằng đúng chiều rộng màn hinh, cho chắc.

Cái padding và margin là vì nhiều trình duyệt hay tự thêm margin và padding vào, gây xấu xí cho trang web của mình nên ngay từ đầu mình set để nó không còn đường đẻ trứng.

có tận 2 font vì 1 font đẹp và 1 font cùi dự phòng khi trình duyệt không hỗ trợ cái font thật thì nhảy về dùng font cùi.

font-size của body như đã nói, mình dùng %. ở đây mình cho 90%

line-height là dãn dòng, mình cho 1.5 vì mặc định là 1 trông hơi dầy so với bài mẫu

ul{
  padding:0;
}

cái ul là danh sách, mặc định là danh sách luôn lùi vào nhưng mình không thích nên mình cho nó lùi ra bằng việc set padding = 0

.text-size-1{
  font-size:1rem;
}
.text-size-2{
  font-size:1.4rem;
}
.text-size-3{
  font-size:2rem;
}
.text-size-4{
  font-size:3rem;
}

xin lỗi các bạn vì ở trên thì nói là text SML mà đây lại dùng là 1, 2, 3, 4.. nhưng chắc các bạn cũng dễ hiểu là 1 là bé nhất và 2 3 4 là to dần. Các bạn có thể đặt bất cứ tên gì bạn muốn miễn nó khiến bạn thấy tiện.

img{
  awidth:100%;
}

Khi ảnh vào trang nó sẽ to đùng ra vì kích thước gốc to của nó. Nhưng mình hãm lại bằng cách cho nó chiều rộng 100% tức là có to cỡ mấy cũng cấm vượt mặt cha mẹ nó... mà cha mẹ nó thì không vượt ông bà nó... và tổ tiên nó là body thì mình đã đặt là chiều ngang body là 100vw (chiều rộng màn). Các bạn thấy đấy, chỉ cần quấn div cho chặt là mọi thứ không cần xoắn nhiều mà tự biết thân biết phận.

.cap{
  margin: auto 10%;
}

caption của ảnh được mình đặt margin trên = dưới = auto = mặc định, và margin trái = phải = 10%

Khi đó dù co kéo thế nào thì ảnh và cap vẫn co giãn theo chiều rộng màn và luôn đẹp và 2 margin của cap thì luôn bằng nhau, cân đối và đẩy chữ vào giữa

.quote{
  margin-left:10%;
}

quote là trích dẫn, là cái đoạn trong ngoặc kép ở gần cuối. Nó hơi lùi vào nên mình cho cái margin-left 10%

.content{
  margin:140px 7%;
  background: lightcyan;
  padding: 5%;
}

content là cái phần nền xanh, như bài mẫu Truman thì là cái phần nền xám. Vì nó cách cạnh trên 1 đoạn không đổi khi co kéo màn hình, hơn nữa lại là chiều height nên không quá nguy hiểm, nên mình mới dùng px. Mình ước lượng tầm 140px.

Nhưng còn lề trái lề phải thì rất quan trọng nên mình cần nó co dãn theo màn, màn nhỏ thì lề ít, màn to thì lề to. Mình đặt 7%

Padding dễ gây bối rối vì nhiều người không phân biệt được giữa padding và margin. Thật ra rất đơn giản.

con mèo là nội dung
thành hộp các tông là border
margin là khoảng cách giữa cái hộp và bức tường
padding khoảng cách giữa con mèo và cái hộp

.image-with-cap{
  margin: 3%;
  background:white;
  padding:6px;
}

Khi set margin cho cái phần ảnh-kèm-caption (nền trắng) mình dùng % vì khoảng cách giữa nó và cái phần xanh cần được co dãn. Nhưng khi set padding cho nó thì dùng px vì cái chỗ màu trắng tí tị này luôn luôn tí tị, mình ước lượng rồi cho nó 6px

@media screen and (max-awidth: 600px){

}

Đây là code với ý nghĩa là "khi nào màn hình bé hơn 600px thì áp dụng các setting sau đây".

Con số 600 là tùy chọn, thay đổi được. Thường thì máy tính bảng là 800, điện thoại tầm 400. Lưu ý là cái chiều rộng px này không phải là cái độ phân giải px đâu nhé. Mình cũng đếch biết nó quy đổi kiểu gì nhưng kể cả mấy máy điện thoại màn hình super HD, 1280px thì chiều rộng css của nó vẫn tầm 400px 500px thôi nhé.

  .image-with-cap, .danh-sach-meo{
    margin: 1%;
    padding:1%;
  }
  .content{
    margin: 100px 2%;
  }

Màn hình bé rồi nên các thứ lề liếc mình cho nhỏ xíu luôn

  .text-size-3, .text-size-4 {
    font-size: 1.5rem;
  }

font size cũng tem tém lại.

Vậy là xong rồi, chúc các bạn thành công! Nhớ tín dụng :v