آموزش CSS

CSS Essential Training

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: Cascading Style Sheets (CSS) یک زبان صفحه سبک است که به شما امکان می دهد ظاهر صفحات وب خود را کنترل کنید. در این دوره عملی ، کریستینا تروونگ مفاهیمی را که پایه و اساس CSS را تشکیل می دهند ، برای شما توضیح می دهد که برای تغییر دادن CSS موجود و نوشتن خودتان چه چیزی باید بدانید. کریستینا توضیح می دهد که چگونه می توان رنگ ها و سایر عناصر طراحی را اضافه کرد تا صفحات وب شما فقط از متن سیاه در پس زمینه سفید فراتر برود. وی نحوه استفاده از سلکتورها ، نحوه تعریف فاصله و اندازه عناصر صفحه توسط مدل جعبه و نحوه سبک بندی متن و مدیریت طرح بندی های اصلی را با Flexbox و Grid نشان می دهد. وی همچنین کار با انتخابگرهای پیشرفته ، ایجاد طرح های مایع و تعیین زمان استفاده از ویژگی های شناور و موقعیت را پوشش می دهد. بعلاوه ، در پایان دوره ، با یک پروژه واقعی - یک صفحه رزومه آنلاین - دور خواهید شد.
موضوعات شامل:
  • نوشتن گزینشگرهای اساسی
  • تنظیم خصوصیات
  • آبشار و وراثت
  • تنظیم خانواده قلم ، اندازه قلم ، رنگ متن و موارد دیگر
  • کار با مدل جعبه
  • شبکه اهرم و Flexbox
  • استفاده از ویژگی های شناور و موقعیت
  • کار با انتخاب کنندگان پیشرفته
  • ایجاد طرح های سیال

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

مقدمه Introduction

  • اسناد یک ظاهر طراحی شده به طور مداوم Styling documents consistently

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

  • ابزارها و نمونه پروژه ها Tools and sample projects

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

  • HTML و CSS HTML and CSS

  • ابزارهای برنامه نویس مرورگر Browser developer tools

  • ارجاع CSS Referencing CSS

  • نمای کلی پروژه و راه اندازی Project overview and setup

  • بهینه سازی تصاویر و نمایشگرهای شبکیه Optimizing images and retina displays

  • پروژه: مسیرهای نسبی Project: Relative paths

  • مسیرهای مطلق Absolute paths

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

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

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

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

  • رنگ و مقادیر خاصیت The color and property values

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

  • کلاس و شناسه انتخاب کننده ها Class and ID selectors

  • تمرین انتخاب کلاس و شناسه Class and ID selector exercise

  • انتخاب کننده های فرزندان Descendant selectors

  • گروه بندی کننده ها Grouping selectors

  • وراثت و ویژگی Inheritance and specificity

  • آبشار و اهمیت The cascade and importance

  • پروژه: اضافه کردن رنگ Project: Adding colors

  • انتخاب کنندگان و پیوندهای شبه کلاس Pseudo-class selectors and links

  • پروژه: پیوندهای یک ظاهر طراحی شده Project: Styling links

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

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

  • خط ، نمایش و نمایش Inline, block, and display

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

  • جعبه دارای ویژگی و نحو استفاده است The box properties syntax and usage

  • اشکال زدایی مدل جعبه Debugging the box model

  • بالشتک ، حاشیه و مرز Padding, margin, and border

  • حاشیه و چیدمان Margin and layouts

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

  • پروژه: حاشیه و بالشتک Project: Margin and padding

4- تایپوگرافی 4. Typography

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

  • تغییر خانواده قلم Changing the font-family

  • سبک قلم و سبک قلم Font-weight and font-style

  • قلمهای وب با @ font-face Web fonts with @font-face

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

  • پروژه: Google Fonts Project: Google Fonts

  • خاصیت قلم The font-size property

  • قلم کوتاه Font shorthand

  • دکوراسیون متن ، تراز متن و ارتفاع خط Text-decoration, text-align, and line-height

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

5. چیدمان: شناور و موقعیت 5. Layouts: Float and Position

  • مقدمه شناور Introduction to float

  • شناور و ویژگی های شفاف The float and clear properties

  • ظرف شناور و فرو ریخته Float and collapsed container

  • چیدمان و مدل جعبه Layouts and the box model

  • پروژه: رفع float و box model Project: Float and box model fix

  • موقعیت Position

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

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

  • آشنایی با شبکه و Flexbox Introduction to Grid and Flexbox

  • آشنایی با Flexbox Introduction to Flexbox

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

  • اندازه انعطاف پذیر Flexible sizing

  • ورزش Flexbox Flexbox exercise

  • Flexbox: تراز Flexbox: Alignment

  • پروژه: تراز Flexbox Project: Flexbox alignment

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

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

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

  • ویژگی های قرار دادن شبکه Grid placement properties

  • پروژه: ستونهای شبکه و بازرس شبکه Firefox Project: Grid columns and Firefox Grid Inspector

7. انتخاب های پیشرفته 7. Advanced Selectors

  • آشنایی با انتخاب کنندگان پیشرفته Introduction to advanced selectors

  • انتخابگرهای عقلانی: ترکیبی Relational selectors: Combinators

  • پروژه: به روزرسانی ها با ترکیب دهنده ها Project: Updates with combinators

  • انتخاب کننده های کلاس شبه: اول و آخر Pseudo-class selectors: First and last

  • پروژه: انتخاب های پیشرفته Project: Advanced selectors

8- چیدمان های سیال و پاسخگو 8. Fluid and Responsive Layouts

  • آشنایی با طراحی پاسخگو Introduction to responsive design

  • پروژه: ایجاد طرح بندی سیال Project: Creating fluid layouts

  • تصاویر پس زمینه انعطاف پذیر Flexible background images

  • پروژه: تصویر پس زمینه انعطاف پذیر Project: Flexible background image

  • معرفی سؤالات رسانه Introduction to media queries

  • نمایش داده شد ، عرض ، و نقاط شکست رسانه Media queries, widths, and breakpoints

  • طرح بندی پاسخگو را آزمایش کنید Testing responsive layouts

  • پروژه: نمایش داده شد رسانه ها و طرح پاسخگو Project: Media queries and responsive layout

نتیجه Conclusion

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

نمایش نظرات

Linkedin (لینکدین)

لینکدین: شبکه اجتماعی حرفه‌ای برای ارتباط و کارآفرینی

لینکدین به عنوان یکی از بزرگترین شبکه‌های اجتماعی حرفه‌ای، به میلیون‌ها افراد در سراسر جهان این امکان را می‌دهد تا ارتباط برقرار کنند، اطلاعات حرفه‌ای خود را به اشتراک بگذارند و فرصت‌های شغلی را کشف کنند. این شبکه اجتماعی به کاربران امکان می‌دهد تا رزومه حرفه‌ای خود را آپدیت کنند، با همکاران، دوستان و همکاران آینده ارتباط برقرار کنند، به انجمن‌ها و گروه‌های حرفه‌ای ملحق شوند و از مقالات و مطالب مرتبط با حوزه کاری خود بهره‌مند شوند.

لینکدین همچنین به کارفرمایان امکان می‌دهد تا به دنبال نیروهای با تجربه و مهارت مورد نیاز خود بگردند و ارتباط برقرار کنند. این شبکه حرفه‌ای به عنوان یک پلتفرم کلیدی برای بهبود دسترسی به فرصت‌های شغلی و گسترش شبکه حرفه‌ای خود، نقش مهمی را ایفا می‌کند. از این رو، لینکدین به عنوان یکی از مهمترین ابزارهای کارآفرینی و توسعه حرفه‌ای در دنیای امروز مورد توجه قرار دارد.

آموزش CSS
جزییات دوره
4h 28m
76
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
249,949
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Christina Truong Christina Truong

مربی، توسعه دهنده Front-End

کریستینا تروونگ یک مربی است که بیش از 10 سال تجربه به عنوان یک توسعه دهنده فرانت اند دارد.

کریستینا برای آژانس های دیجیتال کار کرده است. مانند Teehan+Lax و SapientRazorfish (Nurun سابق). او به عنوان یک مربی، بیش از 1000 دانش‌آموز را در دوره‌های کالج، برنامه‌های بوت کمپ و کارگاه‌ها آموزش داده است.

در نقش قبلی خود به عنوان مدیر برنامه درسی برای کد یادگیری بانوان، برنامه درسی را بازنگری کرد و کارگاه‌های جدید و بخشی را ایجاد کرد. برنامه زمان مورد استفاده بیش از 20 فصل کانادایی. او همچنین برای تمام مربیان اصلی آموزش ارائه کرد.

کریستینا اکنون به طور مستقل کار می کند و بر آموزش فراگیر فناوری، توسعه برنامه درسی و خدمات مشاوره فنی تمرکز دارد.