آموزش CSS Essential Training

معرفی Introduction

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

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

• آنچه شما باید بدانید What you should know

1. شروع به کار 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

2. مفاهیم اصلی 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

• ارث و آبشار Inheritance and the cascade

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

• انتخاب کنندگان کلاس Class selectors

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

• اختصاصی Specificity

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

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

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

• ویژگی پس زمینه The background property

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

3. مدل جعبه CSS 3. The CSS Box Model

• پروژه: سبک ها و نمادهای پاورقی Project: Footer styles and icons

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

• درون خطی، مسدود کردن، و نمایش Inline, block, and display

• مدل جعبه مدیریت عجیب و غریب Managing box model quirks

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

• اشکال زدایی با ابزارهای توسعه دهنده Debugging with developer tools

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

• اصلاح اندازه جعبه و مدل جعبه Box-sizing and the box model fix

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

• تراز وسط با حاشیه Center aligning with margin

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

• معرفی مدل جعبه CSS Intro to the CSS box model

4. طرح بندی: شناور و موقعیت 4. Layouts: Float and Position

• طرح بندی با خاصیت float Layouts with the float property

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

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

• ویژگی موقعیت The position property

• مقدمه ای بر CSS Layout Intro to CSS Layout

• پاکسازی شناورها Clearing floats

• موقعیت و z-index Position and z-index

5. طرح بندی: Flexbox و Grid 5. Layouts: Flexbox and Grid

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

• تراز کردن اقلام انعطاف پذیر Aligning flex items

• سایز بندی با ویژگی های انعطاف پذیر Sizing with flex properties

• Flexbox: جهت گیری و سفارش Flexbox: Orientation and ordering

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

• شبکه صریح The explicit grid

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

• شبکه ضمنی The implicit grid

• معرفی Grid و Flexbox Intro to Grid and Flexbox

• معرفی فلکس باکس Intro to Flexbox

• افزودن ناودان با خاصیت شکاف Adding gutters with the gap property

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

• معرفی CSS Grid Intro to CSS Grid

6. تایپوگرافی 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

• فونت های وب با فونت های گوگل Web fonts with Google Fonts

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

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

• اندازه قلم و دسترسی Font-size and accessibility

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

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

7. چیدمان: سیال و پاسخگو 7. Layouts: Fluid and Responsive

• متا تگ viewport The viewport meta tag

• تست طرح‌بندی‌های واکنش‌گرا Testing responsive layouts

• مقدمه ای بر طراحی واکنشگرا Intro to responsive design

• پروژه: پرسش های رسانه ای: قسمت 2 Project: Media queries: Part 2

• مقدمه ای بر پرسش های رسانه ای Intro to media queries

• چیدمان های سیال Fluid layouts

• پروژه: پرسش های رسانه ای: قسمت 3 Project: Media queries: Part 3

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

• پروژه: پرسش های رسانه ای: قسمت 1 Project: Media queries: Part 1

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

نتیجه Conclusion

• با CSS فراتر از موارد ضروری ادامه دهید Continuing beyond the essentials with CSS