דילוג לתוכן הראשי
האקדמיה
מתחילים רובע הקוד

CSS

פריסה, צבע ותנועה לווב המודרני.

CSS turns plain HTML into the pages you love to use. This track starts at your very first style rule and takes you to modern layouts: selectors and the cascade, the box model, typography for Persian text, oklch colors, Flexbox and Grid, responsive and right-to-left design, motion, custom properties, nesting, :has() and @layer.

Every lesson is short, practical and checked with quizzes, and the examples come from a dark, modern interface.

שיעורים
25
זמן
3 שע׳
רמה
מתחילים

השיעורים במסלול הזה זמינים כרגע באנגלית.

  • ארד פתוחה
  • כסף פתוחה
  • זהב נעולה

מוכנים להוכיח?

שלושה מבחנים מחכים: ארד, כסף וזהב.

למבחנים

מה תדעו לעשות

  • Read and write CSS rules, and predict which rule wins in the cascade
  • Size and space elements confidently with the box model and modern units
  • Build real layouts with Flexbox, Grid and subgrid
  • Make pages that adapt to any screen and work in Persian right-to-left
  • Add smooth, accessible motion and organise styles with modern CSS

המסע

  1. 1
    פרק 1

    CSS basics

    What CSS is, how a rule is built, how selectors find elements, and how the cascade picks a winner.

    0 / 4
  2. 2
    פרק 2

    The box model

    Every element is a box: content, padding, border and margin, and how boxes flow on the page.

    0 / 3
  3. 3
    פרק 3

    Text and color

    Fonts and font stacks, comfortable Persian text, relative units, oklch colors and readable contrast.

    0 / 3
  4. 4
    פרק 4

    Flexbox

    Lay items out in a row or a column, align them, and share the space fairly.

    0 / 3
  5. 5
    פרק 5

    Grid

    Two-dimensional layouts with columns, rows, named areas and subgrid.

    0 / 3
  6. 6
    פרק 6

    Responsive and RTL

    Mobile-first media queries, container queries, fluid type with clamp() and logical properties for Persian layouts.

    0 / 4
  7. 7
    פרק 7

    Motion and modern CSS

    Transitions, keyframes, smooth and accessible motion, custom properties, nesting, :has() and @layer.

    0 / 5

ניווט מהיר