CSS
モダンな Web のためのレイアウト、色、モーション。
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 時間
- レベル
- 初級
このコースのレッスンは、現在英語のみです。
- ブロンズ 挑戦可
- シルバー 挑戦可
- ゴールド ロック
実力を証明しますか？
ブロンズ、シルバー、ゴールドの 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 章CSS basics
What CSS is, how a rule is built, how selectors find elements, and how the cascade picks a winner.
0 / 42 第 2 章The box model
Every element is a box: content, padding, border and margin, and how boxes flow on the page.
0 / 33 第 3 章Text and color
Fonts and font stacks, comfortable Persian text, relative units, oklch colors and readable contrast.
0 / 34 第 4 章Flexbox
Lay items out in a row or a column, align them, and share the space fairly.
0 / 35 第 5 章Grid
Two-dimensional layouts with columns, rows, named areas and subgrid.
0 / 36 第 6 章Responsive and RTL
Mobile-first media queries, container queries, fluid type with clamp() and logical properties for Persian layouts.
0 / 47 第 7 章Motion and modern CSS
Transitions, keyframes, smooth and accessible motion, custom properties, nesting, :has() and @layer.
0 / 5