บทเรียนที่ 1Flexbox สำหรับ layout: คุณสมบัติ container (display:flex, flex-direction, justify-content, align-items), คุณสมบัติ item (flex, order, align-self)เรียนรู้ Flexbox ในฐานะระบบ layout แบบหนึ่งมิติที่ทรงพลัง เข้าใจคุณสมบัติ container และ item, การจัดแนวตามแกนหลักและแกนขวาง, การห่อ, การเรียงลำดับ และการกำหนดขนาดยืดหยุ่นเพื่อสร้างแถบนำทาง responsive, การ์ด และ layout ทั่วไป
Enabling flex context with display:flexMain axis vs cross axis fundamentalsflex-direction, flex-wrap, and flex-flowjustify-content and align-items alignmentalign-self and ordering individual itemsUsing flex shorthand for flexible widthsบทเรียนที่ 2Selectors: class, id, element, descendant, child, attribute, pseudo-classes (:hover, :focus) และ pseudo-elements (::before, ::after)สำรวจประเภท selector พื้นฐานและวิธีรวม它们เพื่อกำหนดเป้าหมายองค์ประกอบที่ต้องการอย่างแม่นยำ เรียนรู้ selectors คลาส, id, และองค์ประกอบ, ความสัมพันธ์อย่าง descendant และ child, คุณสมบัติ, pseudo-classes, และ pseudo-elements สำหรับการจัดสไตล์ละเอียด
Element, class, and id selectors in practiceGrouping and combining multiple selectorsDescendant, child, sibling, and combinatorsAttribute selectors for stateful UI stylingState pseudo-classes like :hover and :focusPseudo-elements ::before and ::after for decorationบทเรียนที่ 3การจัดระเบียบ CSS: ไฟล์ CSS ภายนอก, imports, โครงสร้าง modular, คอมเมนต์, และรูปแบบการตั้งชื่อ (พื้นฐาน BEM)จัดระเบียบ CSS สำหรับโครงการที่ดูแลรักษาได้โดยใช้ stylesheet ภายนอก, imports, และโครงสร้าง modular เรียนรู้ naming conventions, พื้นฐาน BEM, และคอมเมนต์ที่มีประสิทธิภาพเพื่อให้สไตล์ขยายได้ อ่านง่าย และทีมขยายได้อย่างปลอดภัย
Linking external CSS files to HTMLWhen and how to use @import carefullySplitting styles into logical modulesCommenting conventions and documentationBEM naming: blocks, elements, modifiersAvoiding overly specific or fragile selectorsบทเรียนที่ 4ไวยากรณ์ CSS และ cascade: rule sets, specificity, inheritance, !important และ source orderเข้าใจไวยากรณ์ CSS, cascade ทำงานอย่างไรในการแก้ไขข้อขัดแย้ง และ specificity, inheritance, source order, !important โต้ตอบกันอย่างไร เรียนรู้การคาดเดากฎไหนชนะและโครงสร้างสไตล์สำหรับผลลัพธ์ที่ดูแลรักษาและคาดเดาได้
Anatomy of a CSS rule: selectors and declarationsValid property names, values, and unitsHow the cascade resolves conflicting rulesSpecificity calculation and common pitfallsInheritance rules and when values propagateUsing !important and managing source orderบทเรียนที่ 5Layout responsive ด้วย media queries: breakpoints, แนวทาง mobile-first, รูปแบบทั่วไปสำหรับการซ้อนนำทางและเนื้อหาสร้าง layout responsive โดยใช้ media queries และแนวทาง mobile-first เรียนรู้การกำหนด breakpoints, ปรับ typography และ spacing, และสร้างรูปแบบสำหรับการซ้อนนำทางและเนื้อหาที่ทำงานข้ามโทรศัพท์ แท็บเล็ต และเดสก์ท็อป
Mobile-first vs desktop-first strategiesWriting basic min-width media queriesChoosing and managing layout breakpointsResponsive typography and spacing scalesStacking and reflowing navigation menusTesting responsive behavior across devicesบทเรียนที่ 6Display และ positioning: ประเภท display (block, inline, inline-block), position (static, relative, absolute, fixed), float พื้นฐานและ clearingเรียนรู้ว่า display และ positioning กำหนดพฤติกรรม layout อย่างไร เปรียบเทียบองค์ประกอบ block, inline, inline-block, จากนั้นสำรวจ static, relative, absolute, fixed positioning, รวมถึง float พื้นฐานและ clearing สำหรับ layout มรดกและยูทิลิตี้
Block, inline, and inline-block differencesControlling visibility with display and opacityStatic and relative positioning basicsAbsolute and fixed positioning use casesFloat behavior and common layout issuesClearing floats with clearfix techniquesบทเรียนที่ 7พื้นฐาน box model: content, padding, border, margin, box-sizing และการใช้ box-sizing: border-boxเชี่ยวชาญ CSS box model ที่กำหนดว่าองค์ประกอบแต่ละตัวยึดพื้นที่อย่างไร เรียนรู้ content, padding, border, margin, ว่าพวกมันรวมกันเป็นขนาดรวมอย่างไร และ box-sizing: border-box ทำให้ layout ง่ายขึ้นและป้องกันปัญหา overflow
Content box and intrinsic element sizePadding for inner spacing and click targetsBorders, outlines, and visual separationMargins, collapsing margins, and spacingCalculating total box size in layoutsUsing box-sizing: border-box consistently
