آموزش جامع و ضروری CSS - آخرین آپدیت

مقدمه Introduction

• چرا باید CSS یاد بگیریم؟ Why should you learn CSS?

1. شروع به کار 1. Getting Started

• پروژه: شخصی‌سازی محتوا Project: Customizing the content

• ساخت تصاویر مناسب وب Creating web-ready images

• پروژه: بررسی کلی Project: Overview

• پروژه: مشاهده فایل‌ها با Live Server Project: Viewing files with Live Server

• منابع یافتن تصاویر Where to find images

• پروژه: افزودن تصاویر Project: Adding images

• رابطه HTML و CSS HTML and CSS

• تنظیم ویرایشگر متن Setting up your text editor

• کار با فایل‌های وب‌سایت Working with website files

2. مفاهیم بنیادی CSS 2. CSS Core Concepts

• انتخاب‌گرهای نوع و سراسری Type and universal selectors

• پروژه: ایجاد فایل CSS Project: Create a CSS file

• انتخاب‌گرهای ID ID selectors

• ترکیب‌کننده‌ها و لیست انتخاب‌گرها Combinators and selector lists

• کلاس‌های کاذب و المان‌های کاذب Pseudo-classes and pseudo-elements

• مشخصات CSS و سازمان W3C CSS specifications and the W3C

• وراثت، آبشار و اولویت (Specificity) Inheritance, cascade, and specificity

• انواع داده‌ها در CSS CSS data types

• انتخاب‌گرهای کلاس Class selectors

• سینتکس و اصطلاحات CSS CSS syntax and terminology

• ویژگی‌های سفارشی (Custom Properties) Custom properties

• ارجاع به CSS Referencing CSS

3. استایل‌های رنگ و پس‌زمینه 3. Color and Background Styles

• ساخت پالت رنگی Creating a color palette

• پروژه: رنگ‌های متن و پس‌زمینه Project: Background and text colors

• استفاده از استایل‌های متعدد پس‌زمینه Using multiple background styles

• ویژگی background The background property

• ویژگی color و مقادیر آن The color property and value

• پروژه: تعریف ویژگی‌های سفارشی Project: Defining custom properties

• پروژه: استایل‌های تصویر پس‌زمینه Project: Background image styles

4. مدل باکس CSS 4. The CSS Box Model

• ادغام حاشیه و فاصله‌گذاری داخلی Margin collapse and inline spacing

• پروژه: وسط‌چین کردن محتوا با margin Project: Centering content with margin

• Padding، Margin و Border Padding, margin, and border

• ساخت چیدمان‌های تمام‌قد Creating full-height layouts

• پروژه: ریست کردن لیست‌ها و به‌روزرسانی هدر Project: List reset and header updates

• تراز وسط با استفاده از margin Center-aligning with margin

• آشنایی با مدل باکس CSS Introduction to the CSS box model

• عرض، ارتفاع و display Width, height, and display

• اندازه‌گیری باکس و اصلاح مدل باکس Box-sizing and the box model fix

• پروژه: ریست کردن تیترها و استایل‌های Border Project: Heading resets and border styles

• کار با ابزارهای توسعه‌دهنده (DevTools) Working with developer tools

5. چیدمان با Flexbox 5. Layouts with Flexbox

• تراز کردن آیتم‌های flex Aligning flex items

• تمرین اندازه‌گذاری Flexbox Flexbox sizing exercise

• اندازه‌گذاری با ویژگی‌های flex Sizing with flex properties

• پروژه: تراز کردن عناصر با Flexbox Project: Aligning elements with Flexbox

• کار با آیتم‌های flex Working with flex items

• مقدمه‌ای بر Flexbox Introduction to Flexbox

6. چیدمان با Grid 6. Layouts with Grid

• مقدمه‌ای بر CSS Grid Introduction to CSS Grid

• جای‌گذاری با خطوط گرید Positioning with grid lines

• گرید ضمنی (Implicit Grid) The implicit grid

• پروژه: چیدمان گرید Project: Grid layout

• گرید صریح (Explicit Grid) The explicit grid

• پروژه: گرید و ابزارهای توسعه Project: Grid and dev tools

• ویژگی gap The gap property

• پروژه: جای‌گذاری با خطوط گرید Project: Grid line positioning

7. چیدمان با Float و Position 7. Layouts with Float and Position

• Position و z-index Position and z-index

• پروژه: ناوبری ثابت و به‌روزرسانی هدر Project: Fixed navigation and header updates

• چیدمان با Float Layouts with float

• ویژگی position The position property

8. تایپوگرافی 8. Typography

• تغییر فونت‌ها با font-family Changing fonts with font-family

• پروژه: استایل‌های فونت و متن Project: Font and text styles

• پروژه: استایل‌های دکمه Project: Button styles

• تراز متن، تغییر حالت متن و تزئین متن Text-align, text-transform, and text-decoration

• فونت‌های وب با @font-face Web fonts with @font-face

• ارتفاع خط و فاصله بین حروف Line-height and letter-spacing

• پروژه: افزودن فونت‌های سفارشی Project: Add custom fonts

• سرویس‌های آنلاین فونت Online font services

• تایپوگرافی برای وب Typography for the web

• پروژه: حاشیه‌ها، فاصله‌ها و رنگ Project: Borders, spacing, and color

• کار با وزن و استایل فونت Working with font-weight and font-style

• ویژگی font-size The font-size property

• اندازه فونت و دسترسی‌پذیری Font size and accessibility

9. چیدمان‌های ریسپانسیو 9. Responsive Layouts

• تگ متا viewport The viewport meta tag

• ساخت چیدمان‌های منعطف Creating fluid layouts

• پروژه: Media Queries Project: Media queries

• مقدمه‌ای بر Media Queries Introduction to media queries

• تست چیدمان‌های ریسپانسیو Testing responsive layouts

• نقاط شکست (Breakpoints) و Media Queries Breakpoints and media queries

• مقدمه‌ای بر طراحی ریسپانسیو Introduction to responsive design

• پروژه: نقاط شکست Project: Breakpoints

جمع‌بندی Conclusion

• گام‌های بعدی Next steps