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 챕터 1CSS basics
What CSS is, how a rule is built, how selectors find elements, and how the cascade picks a winner.
0 / 42 챕터 2The box model
Every element is a box: content, padding, border and margin, and how boxes flow on the page.
0 / 33 챕터 3Text and color
Fonts and font stacks, comfortable Persian text, relative units, oklch colors and readable contrast.
0 / 34 챕터 4Flexbox
Lay items out in a row or a column, align them, and share the space fairly.
0 / 35 챕터 5Grid
Two-dimensional layouts with columns, rows, named areas and subgrid.
0 / 36 챕터 6Responsive and RTL
Mobile-first media queries, container queries, fluid type with clamp() and logical properties for Persian layouts.
0 / 47 챕터 7Motion and modern CSS
Transitions, keyframes, smooth and accessible motion, custom properties, nesting, :has() and @layer.
0 / 5