ก้าวหน้า
CSS · ระดับกลาง - สร้างโปรเจกต์จริง
- Cascade, ความจำเพาะ (specificity) และการสืบทอด (inheritance)เรียนรู้ที่จะคาดเดาว่ากฎ CSS ใดจะชนะโดยใช้ความจำเพาะ และใช้ประโยชน์จากการสืบทอดเพื่อเขียนโค้ดให้น้อยลง
- Flexbox: แกน, justify/align, gap, flex-growเชี่ยวชาญสองแกนของ Flexbox เพื่อจัดตำแหน่ง จัดให้อยู่กึ่งกลาง และกระจายอีลิเมนต์ในเลย์เอาต์ที่ใช้งานประจำวัน
- Grid: คอลัมน์, แถว, พื้นที่ (areas)สร้างแกลเลอรีและเลย์เอาต์ของหน้าเว็บที่สมบูรณ์ด้วยคอลัมน์ แถว และพื้นที่ที่ตั้งชื่อได้ของ CSS Grid
- การจัดตำแหน่ง: relative, absolute, fixed, sticky, z-indexยึดป้าย ส่วนหัว และโมดัลให้อยู่ตรงตำแหน่งที่คุณต้องการพอดีด้วยตำแหน่งของ CSS และสเกล z-index ที่จัดการอย่างเป็นระบบ
- Responsive design: media queries, หน่วยสัมพัทธ์ปรับอินเทอร์เฟซของคุณให้เข้ากับทุกขนาดหน้าจอด้วยแนวทาง mobile-first, media queries และหน่วย rem, % และ vw