CodeDala
#
💻 For developers

CSS & Layout

Styles, grids, and responsive design

What you'll build
📘A solid foundation
⚡Practice in the browser
🎯Mini-projects
🎓Course certificate
📘 16 lessons⏱ 1-2 evenings🎓 Intermediate
🎯 Mission
Master CSS & Layout
⚡+210XP
🏆CertificatePDF
🎓Course complete
Progress0 / 16 · 0%
Next up: What is CSS

Course program

01

Basics and selectors

0 / 8 lessons
⌄
  1. 01

    What is CSS

    Why CSS•Selector and property•Your first style⚡ +10
    ▶ Now
  2. 02

    Linking CSS to HTML

    External file — link•<style> in head•Inline style — for exceptions⚡ +10
    Open
  3. 03

    Tag selector

    h1, p, a, button…•One style for a whole type•Colour, size, spacing⚡ +10
    Open
  4. 04

    Class selector

    .class in CSS•class="…" in HTML•One class — many elements⚡ +10
    🔒 Pro
  5. 05

    id selector

    #id in CSS•id="…" in HTML•Unique, always one⚡ +10
    🔒 Pro
  6. 06

    Several selectors, comma-separated

    selector1, selector2•One style for several•Fewer repeats⚡ +10
    🔒 Pro
  7. 07

    The cascade: what wins

    Rule order•Specificity, intuitively•Class > tag⚡ +10
    🔒 Pro
  8. 08

    Comments in CSS

    /* … */•Why comments•Temporarily disable a block⚡ +10
    🔒 Pro
02

Styling and layout

0 / 8 lessons
⌄
  1. 09

    Colours and background

    color•background-color•Formats: name, hex, rgb⚡ +10
    🔒 Pro
  2. 10

    Text: font, size, weight

    font-size•font-weight•font-family•line-height⚡ +10
    🔒 Pro
  3. 11

    Box model: padding, border, margin

    Inner spacing•Border•Outer spacing⚡ +10
    🔒 Pro
  4. 12

    Display: block, inline, none

    Block elements•Inline•Hide an element⚡ +10
    🔒 Pro
  5. 13

    Flexbox: alignment

    display: flex•justify-content•align-items•gap⚡ +10
    🔒 Pro
  6. 14

    Positioning

    position: relative•position: absolute•top/left/right/bottom⚡ +10
    🔒 Pro
  7. 15

    Responsiveness: @media

    Media queries•Breakpoints•Mobile first⚡ +10
    🔒 Pro
  8. 16

    Mini-project: a styled card

    All together•Colours + fonts + spacing•Flexbox
    Course complete
    🔒 Pro
CSS & Layout — online coding course