آموزش CSS - راهنمای کامل 2023 (شامل Flexbox، Grid و Sass) - آخرین آپدیت

سرفصل ها و درس ها

شروع شدن Getting Started

• معرفی Introduction

• CSS چیست؟ What is CSS?

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• تاریخچه CSS، حال و آینده CSS History, Present & Future

• طرح کلی دوره Course Outline

• مسیر خود را انتخاب کنید Choose Your Track

• پیش نیازهای دوره Course Prerequisites

• چگونه از این دوره بیشترین بهره را ببرید How To Get The Most Out Of This Course

• ابزارهای توصیه شده Recommended Tools

• کجا کد منبع را پیدا کنیم Where to Find the Source Code

• منابع و لینک های مفید Useful Resources & Links

غواصی در اصول CSS Diving Into the Basics of CSS

• معرفی ماژول Module Introduction

• آشنایی با راه اندازی پروژه دوره Understanding the Course Project Setup

• افزودن CSS به پروژه ما با سبک های درون خطی Adding CSS to our Project with Inline Styles

• درک تگ <style> و ایجاد یک فایل css Understanding the <style> Tag & Creating a .css File

• اعمال سبک های اضافی و وارد کردن فونت های گوگل Applying Additional Styles & Importing Google Fonts

• زمان تئوری - انتخاب کنندگان Theory Time - Selectors

• درک سبک و ویژگی "Cascading". Understanding the "Cascading" Style & Specificity​

• درک وراثت Understanding Inheritance

• اضافه کردن ترکیب کننده ها Adding Combinators

• زمان تئوری - ترکیب کننده ها Theory Time - Combinators

• خلاصه کردن خواص و انتخابگرها Summarizing Properties & Selectors

• انتخابگرها و ترکیب کننده ها Selectors & Combinators

• زمان برای تمرین - مبانی Time to Practice - The Basics

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

غواصی عمیق تر در CSS Diving Deeper into CSS

• معرفی ماژول Module Introduction

• معرفی مدل جعبه CSS Introducing the CSS Box Model

• درک مدل جعبه Understanding the Box Model

• درک کاهش حاشیه و حذف حاشیه های پیش فرض Understanding Margin Collapsing and Removing Default Margins

• شیرجه عمیق در "حاشیه فروپاشی" Deep Dive on "Margin Collapsing"

• زمان تئوری - کار با ویژگی های مختصر Theory Time - Working with Shorthand Properties

• استفاده از حروف کوتاه در عمل Applying Shorthands in Practice

• شیرجه به ویژگی های ارتفاع و عرض Diving Into the Height & Width Properties

• درک اندازه جعبه Understanding Box Sizing

• اضافه کردن هدر به پروژه ما Adding the Header to our Project

• آشنایی با ویژگی نمایشگر Understanding the Display Property

• نمایش: هیچ در مقابل دید: پنهان display: none vs visibility: hidden

• HTML Refresher: در سطح بلوک در مقابل عناصر درون خطی HTML Refresher: Block-level vs Inline Elements

• اعمال ویژگی نمایش و استایل کردن نوار پیمایش ما Applying the Display Property & Styling our Navigation Bar

• درک یک رفتار غیرمنتظره "بلاک درون خطی". Understanding an Unexpected "inline-block" Behaviour

• کار با "تزیین متن" و "تراز عمودی" Working with "text-decoration" & "vertical-align"

• تگ های لنگر استایل Styling Anchor Tags

• اضافه کردن کلاس های شبه Adding Pseudo Classes

• زمان تئوری - کلاس های شبه و عناصر شبه Theory Time - Pseudo Classes & Pseudo Elements

• قوانین گروه بندی Grouping Rules

• کار با "وزن فونت" و "حاشیه" Working with "font-weight" & "border"

• اضافه کردن و استایل دادن به یک دکمه CTA Adding & Styling a CTA-Button

• اضافه کردن یک تصویر پس زمینه به پروژه ما Adding a Background Image to our Project

• خواصی که ارزش به خاطر سپردن دارد Properties Worth to Remember

• زمان تمرین - غواصی عمیق تر در CSS Time to Practice - Diving Deeper into CSS

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

بیشتر در مورد انتخابگرها و ویژگی های CSS More on Selectors & CSS Features

• معرفی ماژول Module Introduction

• استفاده از چندین کلاس CSS و انتخابگرهای ترکیبی Using Multiple CSS Classes & Combined Selectors

• کلاس ها یا شناسنامه ها؟ Classes or IDs?

• (نه) با استفاده از !important (Not) using !important

• انتخاب نقطه مقابل با :not() Selecting the Opposite with :not()

• پشتیبانی از CSS و مرورگر CSS & Browser Support

• بسته شدن Wrap Up

• جمع کردن اصول اولیه Rounding up the Basics

• منابع و لینک های مفید Useful Resources & Links

تمرین اصول Practicing the Basics

• معرفی ماژول Module Introduction

• اضافه کردن سبک به برنامه های ما Adding Style to our Plans

• کار بر روی طرح پیشنهادی Working on the Recommended Plan

• سبک دادن به نشان با "شعاع مرزی" Styling the Badge with "border-radius"

• یک ظاهر طراحی شده به لیست ما Styling our List

• کار بر روی عنوان و قیمت بسته های ما Working on the Title and the Price of our Packages

• بهبود دکمه عمل ما Improving our Action Button

• درک خطوط کلی Understanding Outlines

• ارائه ویژگی های اصلی به کاربر Presenting the Core Features to the User

• سبک دادن به عنوان بخش ویژگی های اصلی Styling the Headline of the Core Features Section

• آماده سازی محتوای ناحیه ویژگی کلیدی Preparing the Content of the Key Feature Area

• اضافه کردن پاورقی Adding the Footer

• آنچه تاکنون به دست آورده ایم What we Achieved so Far

• افزودن صفحه بسته ها Adding the Packages Page

• چالش شما Your Challenge

• سبک دادن به پیوندها Styling the Links

• طراحی جعبه های بسته ما Styling our Package Boxes

• اضافه کردن "شناور" به بسته ما Adding "float" to our Package

• رفع افکت Hover Fixing the Hover Effect

• اضافه کردن آخرین لمس Adding the Final Touches

• منابع و لینک های مفید Useful Resources & Links

تعیین موقعیت عناصر با CSS Positioning Elements with CSS

• معرفی ماژول Module Introduction

• چرا موقعیت یابی وب سایت ما را بهبود می بخشد؟ Why Positioning will Improve our Website

• درک موقعیت یابی - نظریه Understanding Positioning - The Theory

• کار با مقدار "ثابت" Working with the "fixed" Value

• ایجاد یک نوار ناوبری ثابت Creating a Fixed Navigation Bar

• استفاده از "موقعیت" برای افزودن تصویر پس زمینه Using "position" to Add a Background Image

• آشنایی با شاخص Z Understanding the Z-Index

• اضافه کردن یک نشان به بسته ما Adding a Badge to our Package

• طراحی و قرار دادن نشان ما با "مطلق" و "نسبی" Styling & Positioning our Badge with "absolute" and "relative"

• غواصی عمیق تر در موقعیت یابی نسبی Diving Deeper into Relative Positioning

• آیا شما یک متخصص "موقعیت" هستید؟ Are you a "position" expert?

• کار با "سرریز" و موقعیت یابی نسبی Working with "overflow" and Relative Positioning

• معرفی موقعیت یابی "چسبنده". Introducing "sticky" Positioning

• درک زمینه Stacking Understanding the Stacking Context

• زمان تمرین - موقعیت یابی Time to Practice - Positioning

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

درک تصاویر و تصاویر پس زمینه Understanding Background Images & Images

• اختیاری: معرفی آهنگ پیشرفته Optional: Advanced Track Introduction

• معرفی ماژول Module Introduction

• درک "اندازه پس زمینه" Understanding "background-size"

• کار با "موقعیت پس زمینه" Working with "background-position"

• خلاصه نویسی "پس زمینه" - نظریه The "background" Shorthand - Theory

• استفاده از مبدا، کلیپ و پیوست "پس زمینه". Applying "background" Origin, Clip & Attachment

• استفاده از "پس زمینه" کوتاه نوشته در پروژه ما Using the "background" Shorthand on our Project

• استایل کردن تصاویر Styling Images

• افزودن صفحه مشتریان به وب سایت ما Adding the Customers Page to our Website

• کار بر روی طرح بندی تصویر Working on the Image Layout

• درک گرادیان های خطی Understanding Linear Gradients

• استفاده از گرادیان های شعاعی Applying Radial Gradients

• انباشتن پس زمینه های متعدد Stacking Multiple Backgrounds

• آشنایی با فیلترها Understanding Filters

• اضافه کردن و یک ظاهر طراحی SVG - اصول Adding & Styling SVGs - The Basics

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

اندازه ها و واحدها Sizes & Units

• معرفی ماژول Module Introduction

• مشکل واحدهای پروژه ما چیست؟ What's Wrong With Our Project Units?

• جایی که واحدها اهمیت دارند Where Units Matter

• مروری بر اندازه ها و واحدهای موجود An Overview of Available Sizes & Units

• قوانینی که باید به خاطر بسپارید: موقعیت یابی ثابت و "%" Rules to Remember: Fixed Positioning & "%"

• قوانینی که باید به خاطر بسپارید: موقعیت یابی مطلق و "%" Rules to Remember: Absolute Positioning & "%"

• قوانینی که باید به خاطر بسپارید: موقعیت یابی نسبی/ایستا و "%" Rules to Remember: Relative / Static Positioning & "%"

• رفع مشکل قد 100٪ Fixing the Height 100% Issue

• تعریف اندازه فونت در عنصر ریشه Defining the Font Size in the Root Element

• استفاده از "min-width/height" و "max-width/height" Using "min-width/height" & "max-width/height"

• کار با "rem" و "em" Working with "rem" & "em"

• افزودن "rem" به ویژگی های اضافی Adding "rem" to Additional Properties

• اتمام "رم" Finishing "rem"

• درک واحدهای Viewport "vw" & "vh" Understanding the Viewport Units "vw" &"vh"

• Windows، Viewport Units & Scrollbars Windows, Viewport Units & Scrollbars

• انتخاب واحد مناسب Choosing the Right Unit

• استفاده از "خودکار" برای وسط عناصر Using "auto" to Center Elements

• پاک کردن کد ما Cleaning Up our Code

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

کار با جاوا اسکریپت و CSS Working with JavaScript & CSS

• معرفی ماژول Module Introduction

• اضافه کردن یک مدال Adding a Modal

• انتخاب و دستکاری سبک ها با جاوا اسکریپت Selecting & Manipulating Styles with JavaScript

• افزودن شنونده رویداد Adding an Event Listener

• زمان تمرین - اضافه کردن سبک ها با جاوا اسکریپت Time to Practice - Adding Styles with JavaScript

• اضافه کردن یک نوار ناوبری جانبی Adding a Side Navigation Bar

• باز و بسته شدن منوی همبرگر Opening and Closing the Hamburger Menu

• دستکاری کلاس های عنصر Manipulating Element Classes

• درک نمادهای دارایی Understanding Property Notations

• پاک کردن کد ما Cleaning Up our Code

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

ریسپانسیو کردن وب سایت ما Making our Website Responsive

• معرفی ماژول Module Introduction

• چرا پروژه ما باید پاسخگو شود؟ Why our Project Should Become Responsive

• درک پیکسل های سخت افزاری در مقابل پیکسل های نرم افزاری Understanding Hardware Pixels vs. Software Pixels

• مقایسه متاتگ Viewport (HTML) و Media Queries (CSS) Comparing the Viewport Metatag (HTML) and Media Queries (CSS)

• درک متاتگ "viewport". Understanding the "viewport" Metatag

• طراحی وب سایت "ابتدا موبایل" Designing Websites "Mobile First"

• افزودن اولین پرسش های رسانه ای ما Adding our First Media Queries

• مواردی که هنگام کار با پرسش های رسانه ای باید در نظر داشته باشید Things to Keep in Mind when Working with Media Queries

• پیدا کردن نقاط شکست مناسب Finding the Right Breaking Points

• ایجاد اولین طرح موبایل برای برنامه های ما Creating the Mobile First Design for our Plans

• پاسخگو بودن برنامه ها Making the Plans Responsive

• چالش شما Your Challenge

• زمان برای تمرین - ایجاد یک طراحی پاسخگو با پرسش های رسانه ای Time to Practice - Creating a Responsive Design with Media Queries

• کار با عملگرهای منطقی Working with Logical Operators

• بهبود صفحه مشتریان Improving the Customers Page

• بهبود صفحه بسته ها Improving the Packages Page

• پاک کردن نوار ناوبری Cleaning Up the Navigation Bar

• قرار دادن پاورقی به درستی Positioning our Footer Correctly

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

افزودن و استایل دادن به فرم ها Adding & Styling Forms

• معرفی ماژول Module Introduction

• افزودن فرم Unstyled Adding the Unstyled Form

• مقداردهی اولیه صفحه Page Initialization

• آشنایی با انتخابگرهای ویژگی پیشرفته Understanding Advanced Attribute Selectors

• کار بر روی طرح بندی عمومی Working on the General Layout

• بازسازی عناصر فرم Restyling the Form Elements

• شکل دادن به چک باکس Styling the Checkbox

• ارائه بازخورد اعتبارسنجی Providing Validation Feedback

• شکل دادن به دکمه ثبت نام Styling the Signup Button

• رفع خرابی لینک Fixing a Broken Link

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

کار با متن و فونت Working with Text and Fonts

• معرفی ماژول Module Introduction

• مقایسه خانواده‌های عمومی و خانواده‌های فونت Comparing Generic Families & Font Families

• آشنایی با تنظیمات مرورگر Understanding the Browser Settings

• استفاده از خانواده فونت های پیش فرض Using the Default Font Families

• درک نحو "فونت-خانواده". Understanding the "font-family" Syntax

• کار با فونت های ذخیره شده محلی Working with Locally Saved Fonts

• کار با فونت های گوگل Working with Google Fonts

• درک چهره های قلم و "سبک فونت" Understanding Font Faces & "font-style"

• وارد کردن فونت های سفارشی ما Importing our Custom Fonts

• آشنایی با فرمت های فونت Understanding Font Formats

• غواصی در ویژگی های فونت Diving into Font Properties

• اضافه کردن "فاصله حروف" Adding "letter-spacing"

• تغییر ارتفاع خط Changing the Line Height

• استفاده از "تزیین متن" و "سایه متن" Applying "text-decoration" & "text-shadow"

• درک کوتاه نویسی "فونت". Understanding the "font" Shorthand

• عملکرد بارگیری و "نمایش فونت" Loading Performance & "font-display"

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

افزودن Flexbox به پروژه ما Adding Flexbox to our Project

• اختیاری: معرفی آهنگ خبره Optional: Expert Track Introduction

• معرفی ماژول Module Introduction

• چگونه می توانیم پروژه خود را بهبود بخشیم How we Could Improve our Project

• آشنایی با Flexbox Understanding Flexbox

• ایجاد یک ظرف فلکس Creating a Flex Container

• استفاده از "flex-direction" و "flex-wrap" Using "flex-direction" & "flex-wrap"

• درک اهمیت محور اصلی و محور متقاطع Understanding the Importance of Main Axis & Cross Axis

• کار با "تراز کردن آیتم ها" و "توجیه کردن محتوا" Working with "align-items" & "justify-content"

• و در مورد "تراز کردن محتوا" چطور؟ And What About "align-content"?

• زمان برای مسابقه دیگری است - آیا قبلاً یک متخصص Flexbox هستید؟ Time for another quiz - are you a Flexbox expert already?

• بهبود نوار ناوبری با Flexbox Improving the Navigation Bar with Flexbox

• چالش شما - کار بر روی نوار ناوبری موبایل Your Challenge - Working on the Mobile Navigation Bar

• بهبود پاورقی Improving the Footer

• Flexbox و Z-Index Flexbox and the Z-Index

• زمان تمرین - Flexbox Time to Practice - Flexbox

• [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

• افزودن Flexbox به صفحه مشتریان Adding Flexbox to the Customers Page

• استفاده از ویژگی "order" برای یک آیتم Flex Using the "order" Property for a Flex Item

• کار با "همسویی خود" Working with "align-self"

• درک "flex-grow" Understanding "flex-grow"

• استفاده از "flex-shrink" Applying "flex-shrink"

• مقایسه "پایه انعطاف" در مقابل "عرض" و "ارتفاع" Comparing "flex-basis" vs "width" & "height"

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

با استفاده از CSS Grid Using the CSS Grid

• معرفی ماژول Module Introduction

• CSS Grid چیست؟ What is the CSS Grid?

• شروع شدن Getting Started

• تبدیل کانتینر به شبکه Turning a Container into a Grid

• تعریف ستون ها و ردیف ها Defining Columns & Rows

• تعیین موقعیت عناصر کودک در یک شبکه Positioning Child Elements in a Grid

• استفاده از "اندازه عنصر"، "repeat" و "minmax" Using "element-sizing", "repeat" & "minmax"

• موقعیت یابی عناصر پیشرفته Advanced Element Positioning

• کار با خطوط نامگذاری شده Working with Named Lines

• زمان برای تمرین - شبکه Time to Practice - Grid

• درک ستون و ردیف کوتاه Understanding Column & Row Shorthands

• کار با Gaps Working with Gaps

• افزودن مناطق قالب نامگذاری شده Adding Named Template Areas

• زمان تمرین - غواصی عمیق تر در شبکه CSS Time to Practice - Diving deeper into the CSS Grid

• ایجاد مناطق شبکه ای تولید شده به صورت خودکار Creating Automatically Generated Grid Areas

• استفاده از Grid در پروژه ما Using the Grid on our Project

• کار با محتوای مناسب Working with "fit-content"

• تعیین موقعیت عناصر شبکه Positioning Grid Elements

• قرار دادن کل محتوای شبکه Positioning the Entire Grid Content

• تعیین موقعیت عناصر به صورت جداگانه Positioning Elements Individually

• درک شبکه های پاسخگو Understanding Responsive Grids

• اعمال جریان خودکار Applying Autoflow

• مقایسه شبکه آشکار و ضمنی Comparing the Explicit & Implicit Grid

• آشنایی با «پر کردن خودکار» و «تناسب خودکار» Understanding "auto-fill" & "auto-fit"

• ایجاد یک شبکه متراکم Creating a Dense Grid

• استایل دادن به فرم پروژه با گرید Styling the Project Form with Grid

• مقایسه گرید و فلکس باکس Comparing Grid & Flexbox

• مراحل بعدی Next Steps

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

تبدیل عناصر با تبدیل CSS Transforming Elements with CSS Transforms

• معرفی ماژول Module Introduction

• چرخش عناصر و تنظیم مبدا تبدیل Rotating Elements and setting transform-origin

• با استفاده از چرخش و ترجمه Using Rotate and Translate

• کار با "کج" و "مقیاس" Working with "skew" and "scale"

• به کار بردن کوتاه‌نویسی تبدیل Applying Transformation Shorthands

• عناصر چرخشی در 3 بعدی Rotating Elements in 3 Dimensions

• درک ویژگی "چشم انداز". Understanding the "perspective" Property

• حرکت عناصر در امتداد محور Z با "translateZ" Moving Elements along the Z-Axis with "translateZ"

• چرخاندن کانتینر با "سبک تبدیل" Rotating the Container with "transform style"

• عناصر چرخاندن و "پشت چهره" Flipping Elements & "backface-visibility"

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

انتقال و انیمیشن در CSS Transitions & Animations in CSS

• معرفی ماژول Module Introduction

• درک و استفاده از انتقال Understanding and Applying Transitions

• CSS "transition" Property Deep Dive CSS "transition" Property Deep Dive

• کار با توابع زمان بندی Working with Timing Functions

• انتقال و "نمایش" Transitions & "display"

• زمان تمرین - انتقال CSS Time to Practice - CSS Transitions

• استفاده از انیمیشن های CSS Using CSS Animations

• CSS "انیمیشن" Property Deep Dive CSS "animation" Property Deep Dive

• افزودن چند فریم کلیدی Adding Multiple Keyframes

• افزودن انیمیشن به صفحه مشتریان ما Adding Animations to our Customers Page

• زمان تمرین - انیمیشن های CSS Time to Practice - CSS Animations

• استفاده از شنوندگان رویداد انیمیشن جاوا اسکریپت Using JavaScript Animation Event Listeners

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

نوشتن کدهای CSS اثبات آینده Writing Future-Proof CSS Code

• معرفی ماژول Module Introduction

• ماژول های CSS و گروه های کاری آنها CSS Modules & Their Working Groups

• استفاده از متغیرهای CSS Using CSS Variables

• درک و استفاده از پیشوندهای فروشنده Understanding & Using Vendor Prefixes

• از کدام پیشوندها باید استفاده کنید؟ Which Prefixes Should You Use?

• شناسایی پشتیبانی مرورگر با @supports Detecting Browser Support with @supports

• پلی پرها Polyfills

• از بین بردن تناقضات بین مرورگرها Eliminating Cross-Browser Inconsistencies

• نحوه نام گذاری کلاس های CSS How to Name CSS Classes

• Vanilla CSS vs Frameworks Vanilla CSS vs Frameworks

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

معرفی Sass (Style Sheets از لحاظ نحوی عالی) Introducing Sass (Syntactically Awesome Style Sheets)

• معرفی ماژول Module Introduction

• Sass & Scss چیست؟ What is Sass & Scss?

• مهم: نصب Sass Important: Installing Sass

• نصب Sass Installing Sass

• چیزهایی که باید با Sass بهبود یابد Things to be Improved with Sass

• انتخابگرهای تودرتو Nesting Selectors

• افزودن ویژگی های تودرتو Adding Nested Properties

• درک متغیرها Understanding Variables

• ذخیره لیست ها و نقشه ها در متغیرها Storing Lists & Maps in Variables

• توابع داخلی Built-In Functions

• زمان تمرین - Sass Time to Practice - Sass

• اضافه کردن محاسبات ساده Adding Simple Arithmetics

• اضافه کردن واردات بهتر و جزئی Adding Better Import and Partials

• بهبود پرسش های رسانه ای Improving Media Queries

• درک وراثت Understanding Inheritance

• افزودن مخلوط ها Adding Mixins

• با استفاده از اپراتور Ampersand Using the Ampersand Operator

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

خلاصه دوره Course Roundup

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

• امتیاز: محتوای بیشتر! Bonus: More Content!