صفحه نخست
ویراشگر کد

صفحه نخست
ویراشگر کد

آموزش کدنویسی با بزرگ‌ترین وبسایت آموزشی توسعه‌ی وب؛ یادگیری گام‌به‌گام، مقالات کاربردی و تمرین‌های عملی برای علاقه‌مندان به برنامه‌نویسی.

لینک‌های سریع

صفحه نخست
ویراشگر کد
ورود
ثبت نام

دسته‌بندی‌ها

HTML
CSS
جاوااسکریپت
ری‌اکت

ساخته‌شده با ❤ برای علاقه‌مندان به برنامه‌نویسی

CSS

مبانی CSS

CSS چیست؟
ارتباط HTML و CSS
روش‌های اعمال CSS (Inline، Internal، External)
Syntax، Rule، Selector، Declaration، Property و Value
Comment در CSS
ساختار فایل CSS و اتصال آن به HTML
نحوه پردازش CSS توسط مرورگر
آزمون پایان فصل: مبانی CSS

Cascade و مدل پردازش CSS

مفهوم Cascade
Origin و Importance
Specificity
Inheritance و Initial Value
inherit، initial، unset، revert، revert-layer
Source Order
Cascade Layers و @layer
آزمون پایان فصل: Cascade و مدل پردازش CSS

Selectors

Type، Class، ID و Universal Selector
Attribute Selector
Combinatorها (Descendant، Child، Sibling)
Grouping Selectors
Pseudo-class
Pseudo-element
Structural Selectors
Form-related Selectors
Selectorهای تابعی :is()، :where()، :not()، :has()
Specificity در Selectorهای مختلف
آزمون پایان فصل ۳: Selectors

Box Model

Content، Padding، Border، Margin
Width و Height
box-sizing: content-box و border-box
Margin Collapse
Overflow (overflow, overflow-x, overflow-y, overflow-wrap)
اندازه‌گیری واقعی عناصر
آزمون پایان فصل: Box Model

Display و Flow

display: Block، Inline، Inline-block، None
Normal Flow و Formatting Context
visibility و opacity
تفاوت display: none و visibility: hidden
آزمون پایان فصل: Display و Flow

Units و Values

واحدهای مطلق (px و سایر)
واحدهای نسبی (%, em, rem, ex, ch)
واحدهای Viewport (vw, vh, vmin, vmax, dvw, dvh, svw, svh, lvw, lvh)
واحد fr
واحدهای زاویه، زمان و Resolution
مقایسه و انتخاب واحد مناسب
آزمون پایان فصل: Units و Values

Colors

Named Colors و Hexadecimal
RGB و RGBA
HSL و HSLA
Modern Color Syntax و Alpha
currentColor و color-mix()
آزمون پایان فصل: Colors

Typography

font-family و Web Fonts
font-size، font-weight، font-style، font-stretch
line-height، letter-spacing، word-spacing
text-align، text-decoration، text-transform، text-indent
text-overflow، white-space، word-break، hyphens
text-shadow
@font-face و Variable Fonts
Typography Responsive
آزمون پایان فصل: Typography

Backgrounds و Borders

Background Color و Background Image
Multiple Backgrounds، Position، Size، Repeat، Attachment
Gradients (Linear، Radial، Conic)
Border و Border Radius
Border Image
Outline و Box Shadow
آزمون پایان فصل: Backgrounds و Borders

Positioning

position: static و relative
position: absolute و Containing Block
position: fixed و sticky
Offset Properties (top, right, bottom, left)
z-index و Stacking Context
آزمون پایان فصل: Positioning

Logical Properties

مفهوم Logical Properties
Block Axis و Inline Axis
Logical Margin، Padding و Border
Writing Modes
کاربرد در طراحی چندزبانه و RTL
آزمون پایان فصل ۱۱: Logical Properties

Flexbox

Flex Container و Flex Item
Main Axis و Cross Axis
flex-direction، flex-wrap، flex-flow
justify-content، align-items، align-content، align-self
gap، row-gap، column-gap
flex-grow، flex-shrink، flex-basis، شورت‌هند flex
Order در Flexbox
خطاهای رایج Flexbox
آزمون پایان فصل: Flexbox

CSS Grid

Grid Container و Grid Item
Columns، Rows، Tracks، Grid Lines
grid-template-columns، grid-template-rows
Grid Areas و grid-template-areas
grid-column، grid-row، grid-area
fr، minmax()، repeat()، auto-fit، auto-fill
min-content، max-content، fit-content()
Implicit و Explicit Grid، Auto Placement
Alignment (place-items، place-content، place-self)
Subgrid
تفاوت Grid و Flexbox
آزمون پایان فصل: CSS Grid

Responsive Web Design

مفهوم Responsive Design و Breakpoints
Mobile First در برابر Desktop First
Media Queries (@media)
Responsive Typography
Fluid Layout و Fluid Typography با clamp()
Container Queries (@container) و واحدهای آن
آزمون پایان فصل: Responsive Web Design

CSS Functions

calc()، min()، max()، clamp()
minmax() و repeat()
var() و url()
attr()، rgb()، hsl()، color-mix()
توابع Transform
آزمون پایان فصل ۱۵: CSS Functions

Custom Properties و CSS Variables

تعریف Custom Properties و var()
Fallback Values
Scope و Inheritance
Global و Component Variables
Theme Variables و Dark Mode
مدیریت Design Tokens
آزمون پایان فصل: Custom Properties و CSS Variables

Pseudo-classes و Pseudo-elements

حالت‌های تعامل (:hover، :focus، :focus-visible، :active)
حالت‌های فرم (:checked، :disabled، :valid، :invalid)
Selectorهای ساختاری (:first-child، :nth-child()، :empty)
:root، :target، :is()، :where()، :not()، :has()
Pseudo-elementها (::before، ::after، ::first-letter، ::selection، ::marker، ::placeholder)
آزمون پایان فصل: Pseudo-classها و Pseudo-elementها

Transitions

transition-property، duration، timing-function، delay
شورت‌هند transition
Timing Functions (cubic-bezier()، steps())
طراحی Transitionهای حرفه‌ای
آزمون پایان فصل: Transitions

Transforms

translate، translateX، translateY، translateZ
scale، rotate، skew
Transform 2D و 3D
Transform Origin
آزمون پایان فصل (Transforms)

CSS Animations

@keyframes
animation-name، duration، delay، iteration-count
animation-direction، fill-mode، play-state، timing-function
شورت‌هند Animation و Composition
Performance و Accessibility در Animation
آزمون پایان فصل (Animations)

Modern CSS

CSS Nesting
Cascade Layers (مرور تکمیلی)
Container Queries (مرور تکمیلی)
Subgrid (مرور تکمیلی)
Modern Color Functions
aspect-ratio
@supports و Feature Queries
آزمون پایان فصل (Modern CSS Features)

Forms و UI Styling

Styling عناصر فرم (Input، Button، Select)
Checkbox و Radio
Focus States و Validation States
ملاحظات Accessibility در فرم‌ها
آزمون پایان فصل (Forms Styling):

CSS برای Accessibility

Focus Indicator و :focus-visible
Contrast و خوانایی متن
prefers-reduced-motion و prefers-color-scheme
عدم اتکا به رنگ به‌تنهایی
آزمون پایان فصل (Accessibility در CSS)

CSS و SEO

Performance و Core Web Vitals
Render Blocking و Critical CSS
Layout Shift و Font Loading
آزمون پایان فصل (Performance و Core Web Vitals)

CSS Performance

حجم فایل و روش‌های بارگذاری CSS
Selector Performance و Unused CSS
Critical CSS و Minification
Layout، Paint، Composite
بهینه‌سازی Animation با transform و opacity
آزمون پایان فصل (Performance)

CSS Architecture

Naming Conventions و BEM
Component-based CSS و Utility Classes
Design Tokens و CSS Variables
مدیریت فایل‌ها در پروژه‌های بزرگ
جلوگیری از Specificity Wars
آزمون پایان فصل (Architecture و Organization)

Debugging و DevTools

Inspect Element و Styles Panel
Box Model Visualization
Flexbox Inspector و Grid Inspector
Debugging Responsive Design
آزمون پایان فصل (DevTools و Debugging)

مرورگرها و سازگاری

Browser Compatibility و منابع بررسی پشتیبانی
Progressive Enhancement و Graceful Degradation
Feature Detection و @supports
آزمون پایان فصل (Cross-browser Compatibility)

آزمون جامع دوره CSS

آزمون جامع CSS

CSS / Responsive Web Design

آزمون پایان فصل: Responsive Web Design

به پایان فصل رسیدیم. تو این فصل با مفهوم Responsive Design و Breakpoints، رویکردهای Mobile First و Desktop First، Media Queries، Responsive Typography، Fluid Layout با clamp()، و در نهایت Container Queries آشنا شدیم. حالا وقتشه با ۵ سؤال، میزان تسلط‌تون رو بسنجیم.

تمرین‌ها

تمرین 1

چرا توصیه می‌شود Breakpointها بر اساس رفتار محتوای واقعی صفحه تعیین شوند، نه بر اساس عرض دقیق دستگاه‌های خاص؟

چون تنوع و اندازه دستگاه‌های موجود در بازار مدام تغییر می‌کند و یک Breakpoint وابسته به مدل خاص، به‌مرور اعتبار خود را از دست می‌دهدچون Media Query با دستگاه‌های خاص کار نمی‌کندچون مرورگرها دستگاه‌های خاص را شناسایی نمی‌کنندچون این روش سریع‌تر توسط مرورگر پردازش می‌شود

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 2

چرا Mobile First معمولاً با منطق Cascade در CSS هماهنگ‌تر است؟

چون مرورگرها فقط min-width را پشتیبانی می‌کنندچون min-width سریع‌تر از max-width پردازش می‌شودچون Desktop First اصلاً از Media Query استفاده نمی‌کندچون استایل پایه ساده است و ویژگی‌های پیچیده‌تر، به‌عنوان لایه‌های اضافه روی آن قرار می‌گیرند، بدون نیاز به Override یا Reset مکرر

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 3

تفاوت اصلی بین ترکیب دو Media Query با and و ترکیب آن‌ها با کاما (,) چیست؟

کاما فقط برای min-width کار می‌کندهیچ تفاوتی ندارندبا and، هر دو شرط باید هم‌زمان برقرار باشند (AND)، ولی با کاما، کافی است یکی از شرط‌ها برقرار باشد (OR)and فقط در مرورگرهای قدیمی پشتیبانی می‌شودهیچ تفاوتی ندارند

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 4

چرا Fluid Layout (با clamp()) نمی‌تواند به‌طور کامل جایگزین Media Query شود؟

چون clamp() فقط برای رنگ‌ها قابل استفاده استچون تغییرات ساختاری و گسسته (مثل تغییر جهت Flexbox از ستونی به افقی)، ماهیتاً «یا این یا اون» هستند، نه یک طیف پیوستهچون clamp() در هیچ مرورگری پشتیبانی نمی‌شودچون Media Query سریع‌تر از clamp() اجرا می‌شود

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.

تمرین 5

چرا Container Queries برای یک کامپوننت قابل‌استفاده مجدد (مثل یک کارت)، مناسب‌تر از Media Query سنتی است؟

چون Media Query دیگر در مرورگرهای مدرن پشتیبانی نمی‌شودچون Container Query سریع‌تر از Media Query اجرا می‌شودچون Container Query نیازی به تعریف هیچ Property اضافه‌ای نداردچون Container Query به عرض واقعی والد کامپوننت واکنش نشان می‌دهد، نه به عرض کل Viewport که ممکن است با عرض واقعی کامپوننت متفاوت باشد

برای ثبت نتیجه‌ی این تمرین لطفاً وارد حساب کاربری خود شوید.