บทเรียนที่ 1การเลือกฟอนต์และการใช้ฟอนต์กับ root และ body (font-family, ฟอนต์สำรอง)ค้นพบวิธีเลือกและใช้ web fonts ตั้งค่า font-family ที่ root และ body กำหนด fallback ที่เหมาะสม และเข้าใจว่า font stacks 影响รูปลักษณ์ ประสิทธิภาพ และความสม่ำเสมอข้ามอุปกรณ์อย่างไร
พื้นฐาน Serif, sans-serif, และ monospaceตั้งค่าฟอนต์ฐานที่ html และ bodyสร้าง font-family stacks ที่เชื่อถือได้ใช้ system fonts เทียบกับ web fontsโหลด Google Fonts อย่างปลอดภัยบทเรียนที่ 2พื้นฐานเลย์เอาต์สำหรับหน้าธรรมดา: block vs inline elements และเทคนิคการจัดกึ่งกลางเรียนรู้พื้นฐานเลย์เอาต์โดยใช้ block และ inline elements จัดกึ่งกลางเนื้อหา ควบคุมการไหลของ element และสร้างโครงสร้างหน้าเว็บง่ายๆ โดยไม่ใช้ระบบเลย์เอาต์ขั้นสูง เหมาะสำหรับโปรเจ็กต์เริ่มต้นขนาดเล็ก
Block vs inline vs inline-blockจัดกึ่งกลางข้อความด้วย text-alignจัดกึ่งกลาง block ด้วย auto marginsส่วนเต็มความกว้างและเนื้อห้ากว้างคงที่เรียงซ้อนส่วนต่างๆสำหรับเลย์เอาต์ง่ายๆบทเรียนที่ 3สีและพื้นหลัง: background-color, color, และการใช้ค่า hex/RGB/HSLเรียนรู้การควบคุมสีและพื้นหลังโดยใช้ CSS ใช้ background-color และ color เปรียบเทียบรูปแบบ hex, RGB, และ HSL และสร้าง color palette ง่ายๆ ที่เข้าถึงได้ โดยรักษาความอ่านง่ายของข้อความ
ตั้งค่าสีข้อความและพื้นหลังรูปแบบสี Hex, RGB, และ HSLสร้าง color palette ง่ายๆคอนทราสต์และการเข้าถึงพื้นฐานพื้นหลังสำหรับส่วนต่างๆและปุ่มบทเรียนที่ 4การจัดสไตล์หัวข้อและลิสต์: การเลือก element, classes, และ element selectorsเรียนรู้การจัดสไตล์หัวข้อและลิสต์โดยใช้ element, class, และ ID selectors ฝึกการเลือกเนื้อหาเฉพาะ หลีกเลี่ยงกฎที่เจาะจงเกินไป และรักษา HTML ให้สะอาดขณะควบคุมโครงสร้างหน้าอย่างแม่นยำ
Element selectors สำหรับหัวข้อและลิสต์ใช้ classes เพื่อจัดสไตล์รูปแบบที่ซ้ำเลือกไอเท็มเฉพาะด้วย ID selectorsจัดสไตล์ลิสต์แบบเรียงลำดับเทียบกับไม่เรียงลบและปรับแต่ง bullet ลิสต์บทเรียนที่ 5การจัดสไตล์ปุ่ม: background, color, border, border-radius, padding, cursor และ hover statesเรียนรู้การจัดสไตล์ปุ่มที่ดูคลิกได้และสม่ำเสมอ ควบคุม background, color, borders, padding, border-radius, cursor, และ hover states เพื่อสร้างสไตล์ปุ่มที่เข้าถึงได้และนำกลับมาใช้ใหม่
รีเซ็ตสไตล์ปุ่มเริ่มต้นPadding และการกำหนดขนาด hit areaพื้นหลัง, สีข้อความ, และเส้นขอบมุมโค้งด้วย border-radiusHover และ active visual feedbackบทเรียนที่ 6พื้นฐาน Typography: font-size, line-height, font-weight, text-alignสร้าง typography ที่แข็งแกร่งโดยใช้ CSS properties พื้นฐาน ปรับ font-size, line-height, font-weight, และ text-align เพื่อสร้างย่อหน้าที่อ่านง่าย หัวข้อที่ชัดเจน และข้อความที่สม่ำเสมอทั่วหน้าเว็บ
เลือกขนาดฟอนต์ฐานตั้งค่า line-height ที่สบายใช้ font-weight สำหรับการเน้นจัดข้อความสำหรับเลย์เอาต์ต่างๆจัดสไตล์หัวข้อเทียบกับข้อความ bodyบทเรียนที่ 7การพิจารณา Responsive สำหรับหน้าขนาดเล็ก: max-width, viewport units, และ media queries ง่ายๆเข้าใจเทคนิค responsive พื้นฐานสำหรับหน้าขนาดเล็ก ใช้ max-width, viewport units, และ media queries ง่ายๆ เพื่อรักษาการอ่านได้บนโทรศัพท์ แท็บเล็ต และหน้าจอแล็ปท็อปขนาดเล็กโดยไม่ใช้เฟรมเวิร์กที่ซับซ้อน
ใช้ max-width สำหรับบล็อกข้อความที่อ่านได้Viewport units สำหรับการกำหนดขนาดยืดหยุ่นตั้งค่า meta viewport tagMedia queries ง่ายๆสำหรับหน้าจอขนาดเล็กเรียงซ้อน element บน viewport แคบบทเรียนที่ 8พื้นฐาน Box model: margin, padding, border และ box-sizingเชี่ยวชาญ CSS box model เพื่อให้ element ทำงานตามที่คาดหวัง ทำงานกับ margin, padding, border, และ box-sizing เพื่อควบคุมพื้นที่ หลีกเลี่ยงความประหลาดใจในการเลย์เอาต์ และสร้างโครงสร้างหน้าที่สะอาดและคาดเดาได้
เนื้อหา, padding, border, และ marginแสดงภาพ element boxes ใน DevToolsใช้ box-sizing: border-boxควบคุมช่องว่างระหว่าง elementปัญหาเลย์เอาต์ box model ทั่วไปบทเรียนที่ 9วิธีลิงก์ stylesheet ภายนอกอย่างถูกต้องและพื้นฐาน cascadeเริ่มต้นด้วยการลิงก์ stylesheet ภายนอกอย่างถูกต้องและเข้าใจ cascade ดูว่า source order, specificity, และ inheritance ตัดสินว่า CSS rules ไหนจะชนะเมื่อมีหลายกฎเลือก element เดียวกัน
ใช้ link tag ใน HTML headโหลดไฟล์ CSS หลายไฟล์อย่างปลอดภัยวิธีที่ cascade แก้ไขความขัดแย้งSpecificity: element, class, และ IDการสืบทอด text properties ทั่วไปบทเรียนที่ 10ระยะห่างและ visual hierarchy: ใช้ margins, padding, และ section wrappersสำรวจว่า margins, padding, และ wrappers สร้าง visual hierarchy อย่างไร เรียนรู้การแยกส่วน จัดกลุ่มเนื้อหาที่เกี่ยวข้อง และนำทางสายตาโดยใช้ระยะห่างที่สม่ำเสมอที่ทำงานข้ามขนาดหน้าจอต่างๆ
ความแตกต่างระหว่าง margin และ paddingสร้าง section wrappers ด้วย divsVertical rhythm ระหว่างหัวข้อและข้อความระยะห่างลิสต์ รูปภาพ และปุ่มหลีกเลี่ยงเลย์เอาต์ที่ยุบหรือแออัด