آموزش چیدمان های CSS: از Float به Flexbox و Grid

CSS Layouts: From Float to Flexbox and Grid

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: برای دهه ها ، توسعه دهندگان CSS با float ها تلاش کردند تا طرح های انعطاف پذیر ایجاد کنند که در مرورگرها کار می کنند. اما هک درخشان آنها نقاط منفی زیادی داشت. آخرین نسل مشخصات CSS مجموعه ای بهتر و کاملاً بصری تر از ابزارها را ارائه می دهد ، اما حرکت از شناورها به Grid ، Flexbox یا هر دو به معنای تنظیم نحوه تفکر شماست. در این دوره ، کریستینا تروونگ ، از مفاهیم اولیه تا تبدیل کامل ، شما را راهنمایی می کند ، روشهای مختلف ایجاد صفحه آرایی با CSS مدرن را برجسته می کند. نحوه کار با ویژگی های صفحه نمایش و شناور را کاوش کنید. از موقعیت نسبی ، مطلق و ثابت برای تعیین اجزا استفاده کنید. طرح های اساسی Grid و Flexbox را ایجاد کنید. و بیشتر.
موضوعات شامل:
  • چیدمان هایی با HTML و CSS
  • استفاده از نمایشگر و خصوصیات شناور
  • استفاده از موقعیت نسبی و مطلق
  • طرح بندی صفحه ساخت با Flexbox
  • تفاوت شبکه با Flexbox
  • ایجاد یک طرح اولیه شبکه
  • موقعیت یابی با شبکه

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

مقدمه Introduction

  • خوش آمدی Welcome

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

  • با استفاده از پرونده های تمرینی Using the exercise files

1. نمای کلی از طرح بندی صفحه 1. An Overview of Page Layouts

  • طرح بندی با HTML Layouts with HTML

  • طرح بندی با CSS Layouts with CSS

  • پشتیبانی از مرورگر و استانداردهای CSS Browser support and CSS standards

2. شناور ، نمایش و موقعیت 2. Float, Display, and Position

  • عناصر درون خطی و بلوک Inline and block elements

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

  • خاصیت نمایشگر The display property

  • مدل جعبه و طرح بندی The box model and layouts

  • خاصیت شناور The float property

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

  • پروژه خود را تنظیم کنید Setting up your project

  • ورزش: یک طرح با float بسازید Exercise: Build a layout with float

  • موقعیت: نسبی و مطلق Position: Relative and absolute

  • موقعیت: ثابت ، چسبنده و استاتیک Position: Fixed, sticky, and static

3. Flexbox 3. Flexbox

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

  • جهت گیری با فلكس جهت و بسته بندی فلكس Orientation with flex-direction and flex-wrap

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

  • اندازه چندین مورد فلکس Sizing multiple flex items

  • خاصیت سفارش The order property

  • ظروف فلکس تودرتو Nesting flex containers

  • ورزش: یک طرح با Flexbox بسازید Exercise: Build a layout with Flexbox

  • ورزش: یک طرح با Flexbox بسازید Exercise: Build a layout with Flexbox

4. شبکه 4. Grid

  • شبکه در مقابل Flexbox Grid vs. Flexbox

  • شبکه ، سیستم های گرید و شبکه CSS Grid, grid systems, and CSS Grid

  • یک طرح اولیه Grid ایجاد کنید Create a basic Grid layout

  • ستون ها ، ردیف ها و روده ها با شبکه Columns, rows, and gutters with Grid

  • موقعیت با شبکه Positioning with Grid

  • تمرین: یک طرح با Grid بسازید Exercise: Build a layout with Grid

  • بازرس شبکه Firefox Firefox Grid Inspector

نتیجه Conclusion

  • مراحل بعدی و منابع Next steps and resources

نمایش نظرات

Linkedin (لینکدین)

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

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

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

آموزش چیدمان های CSS: از Float به Flexbox و Grid
جزییات دوره
1h 46m
32
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
37,854
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Christina Truong Christina Truong

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

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

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

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

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