آموزش جامع و ضروری CSS (۲۰۲۳) - آخرین آپدیت

مقدمه Introduction

• نحوه انجام تمرینات How to complete the exercises

• شروع کار با CSS Getting started with CSS

• پیش‌نیازها و دانسته‌های لازم What you should know

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

• ارجاع‌دهی به CSS Referencing CSS

• پروژه: بررسی کلی و آماده‌سازی Project: Overview and setup

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

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

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

• مسیرهای نسبی و مطلق Relative and absolute paths

• پروژه: افزودن تصاویر و آیکون‌ها Project: Adding images and icons

• کدنویسی با ویرایشگر متن Writing code with a text editor

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

• بهینه‌سازی تصاویر برای وب Optimizing images for the web

• شخصی‌سازی ویرایشگر متن Customizing your text editor

۲. مفاهیم اصلی CSS 2. CSS Core Concepts

• پروژه: آماده‌سازی فایل CSS Project: Prepping the CSS file

• مقادیر و واحدهای CSS CSS values and units

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

• کلاس‌های مجازی و عناصر مجازی Pseudo-classes and pseudo-elements

• پروژه: افزودن استایل‌های پس‌زمینه Project: Adding background styles

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

• وراثت و آبشاری بودن (Cascade) Inheritance and the cascade

• پروژه: استایل‌دهی به لینک‌ها Project: Styling links

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

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

• اولویت انتخاب‌گرها (Specificity) Specificity

• ترکیب‌کننده‌های فرزند و لیست‌های انتخاب‌گر Descendant combinators and selector lists

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

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

• ویژگی پس‌زمینه (Background) The background property

• ایجاد پالت رنگی Creating a color palette

۳. مدل جعبه‌ای CSS 3. The CSS Box Model

• پروژه: استایل‌ها و آیکون‌های فوتر Project: Footer styles and icons

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

• مفاهیم Inline، Block و Display Inline, block, and display

• مدیریت پیچیدگی‌های مدل جعبه‌ای Managing box model quirks

• پروژه: افزودن Wrapperهای محتوایی Project: Adding content wrappers

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

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

• سایز جعبه و اصلاح مدل جعبه‌ای (Box Sizing) Box-sizing and the box model fix

• ویژگی‌های مدل جعبه‌ای The box model properties

• ترازبندی مرکزی با Margin Center aligning with margin

• استفاده از مقادیر منفی در Margin Using negative margin values

• آشنایی با مدل جعبه‌ای CSS Intro to the CSS box model

۴. چیدمان‌ها: Float و Position 4. Layouts: Float and Position

• چیدمان با ویژگی Float Layouts with the float property

• پروژه: شناور کردن تصاویر و متن Project: Float images and text

• پروژه: موقعیت‌دهی ثابت (Fixed) Project: Fixed positioning

• ویژگی Position The position property

• آشنایی با چیدمان CSS Intro to CSS Layout

• پاک‌سازی Floatها (Clearing) Clearing floats

• موقعیت و شاخص Z (z-index) Position and z-index

۵. چیدمان‌ها: Flexbox و Grid 5. Layouts: Flexbox and Grid

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

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

• سایزدهی با ویژگی‌های فلکس Sizing with flex properties

• فلکس‌باکس: جهت‌گیری و ترتیب Flexbox: Orientation and ordering

• پروژه: فوتر چسبان با فلکس‌باکس Project: Sticky footer with flexbox

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

• تمرین فلکس‌باکس Flexbox exercise

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

• آشنایی با Grid و Flexbox Intro to Grid and Flexbox

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

• افزودن فاصله‌ها با ویژگی Gap Adding gutters with the gap property

• پروژه: افزودن ستون‌ها با Grid Project: Adding columns with Grid

• آشنایی با CSS Grid Intro to CSS Grid

۶. تایپوگرافی 6. Typography

• پروژه: استایل‌های تایپوگرافی Project: Typography styles

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

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

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

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

• ضخامت و استایل فونت font-weight and font-style

• استفاده از Google Fonts Web fonts with Google Fonts

• پروژه: دکمه‌ها و فاصله‌گذاری Project: Buttons and spacing

• پروژه: کار با گوگل فونت Project: Google Fonts

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

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

• ویژگی اندازه فونت (font-size) The font-size property

۷. چیدمان‌ها: سیال و واکنش‌گرا 7. Layouts: Fluid and Responsive

• تگ متای Viewport The viewport meta tag

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

• آشنایی با طراحی واکنش‌گرا (Responsive Design) Intro to responsive design

• پروژه: مدیا کوئری‌ها - بخش دوم Project: Media queries: Part 2

• آشنایی با مدیا کوئری‌ها (Media Queries) Intro to media queries

• چیدمان‌های سیال (Fluid Layouts) Fluid layouts

• پروژه: مدیا کوئری‌ها - بخش سوم Project: Media queries: Part 3

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

• پروژه: مدیا کوئری‌ها - بخش اول Project: Media queries: Part 1

• نقاط شکست و مدیا کوئری‌ها Breakpoints and media queries

جمع‌بندی Conclusion

• ادامه مسیر پس از یادگیری مبانی CSS Continuing beyond the essentials with CSS