آموزش جامع CSS: ساخت وب‌سایت‌های واکنش‌گرا با Flexbox، Grid و SCSS - آخرین آپدیت

مبانی CSS CSS Fundamentals

• معرفی دوره Course Introduction

• CSS چیست؟ What is CSS?

• دمو: CSS چگونه کار می‌کند؟ Demo: How CSS Works?

• سینتکس پایه CSS Basic CSS Syntax

• مقدمه‌ای بر ویژگی‌های رایج CSS (رنگ و پس‌زمینه) Introduction to Common CSS Properties (Color & Background)

• دمو: ویژگی‌های فونت (اندازه، وزن، خانواده، Google Fonts) Demo: Font Properties (Size, Weight, Family, Google Fonts)

• دمو: تراز متن و جهت (چپ، راست، مرکز، Justify) Demo: Text Alignment & Direction (Left, Right, Center, Justify)

• تفاوت Margin و Padding (مفهوم و مبانی) Margin vs Padding (Concept & Basics)

• Margin، Padding و Border (استایل‌دهی دقیق) Margin, Padding & Border (Detailed Styling)

• فاصله‌گذاری پیشرفته (Inline Start/End، واکنش‌گرا) Advanced Spacing (Inline Start/End, Responsive)

• Border و Border Radius Border & Border Radius

• مبانی ارتفاع و عرض Height & Width Basics

• مدیریت تصاویر (Object Fit، تغییر اندازه) Image Handling (Object Fit, Scaling)

• دمو: مبانی ویژگی Display (Block, Inline, Inline block) Demo: Display Property Basics (Block, Inline, Inline-block)

• دمو: لیست‌ها، تزئین متن و استایل‌دهی چیدمان Demo: Lists, Text Decoration & Layout Styling

مفاهیم اصلی CSS Core CSS Concepts

• درک انتخاب‌گرهای CSS Understanding CSS Selectors

• دمو: مبانی Box Model در CSS (محتوا، Padding، Border، Margin) Demo: CSS Box Model Basics (Content, Padding, Border, Margin)

• دمو: مقدمه‌ای بر تصاویر پس‌زمینه و ویژگی‌های پایه Demo: Background Image Introduction & Basic Properties

• دمو: ویژگی‌های پیشرفته پس‌زمینه (Position, Size, Repeat, RGB, Opacity) Demo: Advanced Background Properties (Position, Size, Repeat, RGB, Opacity)

• مقدمه‌ای بر واحدهای CSS + پیکسل (px) Introduction to CSS Units + Pixels (px)

• واحد REM (نسبت به ریشه) REM (Root Relative Unit)

• واحد REM (نسبت به والد) REM (Parent Relative Unit)

• درصد (%) برای چیدمان‌های واکنش‌گرا Percentage (%) for Responsive Layouts

• واحدهای Viewport (vh, vw) Viewport Units (vh, vw)

• واحدهای پیشرفته (vmin, vmax, ch, ex, fr واحد Grid) Advanced Units (vmin, vmax, ch, ex, fr - Grid Unit)

• چیدمان CSS Grid CSS Grid Layout

• چیدمان CSS Flexbox CSS Flexbox Layout

• چیدمان CSS Float CSS Float Layout

• دمو: مبانی موقعیت‌دهی در CSS (Relative, Absolute, Fixed + مرکز‌سازی با Transform) Demo: CSS Positioning Basics (Relative, Absolute, Fixed + Centering using Transform)

• دمو: رفتار اسکرول، Box Shadow و موقعیت‌دهی پیشرفته (بررسی Sticky) Demo: Scroll Behavior, Box Shadow, and Advanced Positioning (Sticky Overview)

• چیدمان چند ستونه CSS CSS Multi-Column Layout

• چیدمان جدولی CSS CSS Table Layout

• چیدمان Inline Block در CSS CSS Inline-Block Layout

• چیدمان Sticky در CSS CSS Sticky Layout

• موارد استفاده از چیدمان‌های مختلف CSS CSS Layout Use Cases

CSS پیشرفته و پیش‌پردازنده‌ها Advanced CSS & Preprocessors

• پیش‌پردازنده‌های CSS: SCSS، SASS، LESS و غیره CSS Preprocessors: SCSS, SASS, LESS and More

• مقدمه‌ای بر مقایسه SCSS با CSS + Nesting، متغیرها و راه‌اندازی Live Server Introduction to SCSS vs CSS + Nesting, Variables & Live Server Setup

• دمو: نصب Node.js و درک NPM (مدیریت بسته Node) Demo: Installing Node.js & Understanding NPM (Node Package Manager)

• دمو: نصب SASS از طریق NPM + راه‌اندازی پروژه (node_modules, package.json) Demo: Installing SASS via NPM + Project Setup (node_modules, package.json)

• دمو: کامپایل SCSS به CSS (حالت Watch) + تغییرات لحظه‌ای در مرورگر Demo: SCSS to CSS Compilation (Watch Mode) + Live Changes in Browser

• نکات بهره‌وری در CSS: میان‌برها و بهترین روش‌ها CSS Productivity Tips: Shortcuts and Best Practices

• مقدمه‌ای بر Pseudo Classes + :hover (استایل‌دهی حالت‌های تعاملی) Introduction to Pseudo Classes + :hover (Styling Interactive States)

• دمو: focus و :nth child() (استایل‌دهی فرم‌ها و هدف‌گیری لیست‌ها) Demo: focus and :nth-child() (Form Styling & List Targeting)

• دمو: کلاس Pseudo از نوع not() + ترکیب انتخاب‌گرها برای استایل‌دهی پیشرفته Demo: not() Pseudo Class + Combining Selectors for Advanced Styling

• المان‌های مجازی (Pseudo Elements) در CSS CSS Pseudo-Elements

• دمo: انتقال‌ها (Transitions) و انیمیشن‌های CSS Demo: CSS Transitions and Animations

• متغیرهای CSS CSS Variables

• CSS پیشرفته (فیلترها، چک‌باکس سفارشی، Autofit، min max در Grid) Advanced CSS (Filters, Custom checkbox, Autofit, min-max in grid)

• گرادینت‌های CSS: جلوه‌های پس‌زمینه و متن CSS Gradients: Background and Text Effects

• حالت‌های ترکیبی (Blend Modes) و Clip Path در CSS CSS Blend Modes and Clip-Path

• مقدمه‌ای بر طراحی و چیدمان واکنش‌گرا Introduction to Responsive Design and Layouts

• دمو: Media Queries و استایل‌دهی نمای موبایل (480px) Demo: Media Queries & Mobile View Styling (480px)

• واکنش‌گرایی پیشرفته (Overflow, Clamp, Breakpoints) Advanced Responsiveness (Overflow, Clamp, Breakpoints)

• دمو: راه‌اندازی پروژه، ساختار پوشه‌ها و لینک کردن CSS Demo: Project Setup, Folder Structure & Linking CSS

• مبانی استایل‌دهی هدر (رنگ‌ها، فونت‌ها، Padding) Header Styling Basics (Colors, Fonts, Padding)

• دمو: چیدمان منو با استفاده از Flexbox و فاصله‌گذاری Demo: Navigation Layout using Flexbox & Spacing

• استایل‌دهی پیشرفته (Max width, Box sizing, هدر ثابت، اسکرول نرم) Advanced Styling (Max-width, Box-sizing, Fixed Header, Smooth Scroll)

پروژه پورتفولیو و پیاده‌سازی نهایی Portfolio Project & Final Implementation

• ساختار بخش پروژه‌ها، چیدمان Grid و کلاس‌های قابل استفاده مجدد Projects Section Structure, Grid Layout & Reusable Classes

• طراحی کارت‌های پروژه (تصویر، متن، دکمه‌ها و استایل نهایی) Project Cards Design (Image, Text, Buttons & Final Styling)

• وب‌سایت پورتفولیو: طراحی بخش تماس با ما Portfolio Website: Contact Section Design

• وب‌سایت پورتفولیو: طراحی فوتر Portfolio Website: Footer Design

• دمو: منوی موبایل (تغییر حالت منو، آیکون، رفتار JS) Demo:Mobile Navigation (Menu Toggle, Icon, JS Behavior)

• طراحی کارت مهارت (پس‌زمینه، Border Radius، Box Shadow) Skill Card Design (Background, Border Radius, Box Shadow)

• جلوه‌های Hover و انتقال‌ها (Transform, Animation) Hover Effects & Transitions (Transform, Animation)

• مقدمه‌ای بر کتابخانه‌های آیکون (Font Awesome, Bootstrap Icons) Introduction to Icon Libraries (Font Awesome, Bootstrap Icons)

• افزودن آیکون به مهارت‌ها (کلاس‌ها، استایل، رنگ‌ها) Adding Icons to Skills (Classes, Styling, Colors)

• دمو: تنظیمات پیشرفته (CDN، نصب محلی، استایل‌دهی یکپارچه و پاکسازی) Demo: Advanced Setup (CDN, Local Setup, Consistent Styling & Cleanup)

• ساختار بخش پروژه‌ها، چیدمان Grid و کلاس‌های قابل استفاده مجدد Projects Section Structure, Grid Layout & Reusable Classes

• طراحی کارت‌های پروژه (تصویر، متن، دکمه‌ها و استایل نهایی) Project Cards Design (Image, Text, Buttons & Final Styling)

• وب‌سایت پورتفولیو: طراحی بخش تماس با ما Portfolio Website: Contact Section Design

• وب‌سایت پورتفولیو: طراحی فوتر Portfolio Website: Footer Design

• Media Queries، چیدمان تبلت و اصلاح بخش About Media Queries, Tablet Layout & About Section Fixes

• دمو: منوی موبایل (تغییر حالت منو، آیکون، رفتار JS) Demo: Mobile Navigation (Menu Toggle, Icon, JS Behavior)

• خلاصه دوره Course Summary