آموزش آن را تمرین کنید: CSS Layout
Practice It: CSS Layout
در این دوره، مربی جولیا دایک به شما نشان می‌دهد که چگونه می‌توانید طرح‌بندی‌های وب واکنشگرا ایجاد کنید که با هر اندازه صفحه تطبیق داده شود و یک تجربه کاربری یکپارچه را ارائه دهد. به جولیا بپیوندید تا به شما نشان دهد که چگونه با استفاده از شبکه‌های CSS و Flexbox طرح‌بندی‌های مدولار طراحی کنید و با استفاده از پرس و جوهای رسانه‌ای، آنها را با عرض صفحه‌های مختلف تطبیق دهید. او مقدمه‌ای بر اصول اولیه چیدمان‌های شبکه‌ای ارائه می‌کند، توضیح می‌دهد که چگونه طرح‌بندی‌های خود را واکنشگرا کنید، و سپس شما را از طریق ایجاد یک طرح‌بندی سه ستونی و دوازده ستونی راهنمایی می‌کند.
این دوره با GitHub Codespaces یکپارچه شده است، یک محیط توسعه دهنده ابر فوری که تمام عملکردهای IDE مورد علاقه شما را بدون نیاز به هیچ گونه راه اندازی ماشین محلی ارائه می دهد. با GitHub Codespaces، می‌توانید در هر زمان و در هر زمانی از هر ماشینی تمرین عملی داشته باشید، در حالی که از ابزاری استفاده میکنید که احتمالاً در محل کار با آن مواجه خواهید شد. برای یادگیری نحوه شروع، ویدیوی «استفاده از فضاهای کد GitHub با این دوره» را بررسی کنید.
معرفی Introduction
-
ایجاد طرح‌بندی شبکه‌ای پاسخگو (در حال انجام) Creating responsive grid layouts (In progress)
-
آنچه شما باید بدانید What you should know
-
استفاده از GitHub Codespaces با این دوره Using GitHub Codespaces with this course
1. مقدمه ای بر Grid Layouts 1. Introduction to Grid Layouts
-
طراحی طرح شبکه ای Designing a grid layout
-
تعریف عناصر شبکه Defining grid elements
-
کار با انتخابگرهای پیشرفته Working with advanced selectors
-
گرید در مقابل فلکس باکس Grid vs. Flexbox
-
آن را امتحان کنید: یک طرح بندی شبکه ای اولیه ایجاد کنید Try it: Create a basic grid layout
-
بررسی کنید: یک طرح بندی شبکه ای اولیه ایجاد کنید Check it: Create a basic grid layout
2. پاسخگو کردن 2. Making It Responsive
-
استفاده از رویکرد اول موبایل Using a mobile-first approach
-
استفاده از پرسش های رسانه ای Using media queries
-
تغییر طرح Changing the layout
-
در دسترس قرار دادن آن Making it accessible
-
آن را امتحان کنید: طراحی شبکه پاسخگو Try it: Responsive grid design
-
بررسی کنید: طراحی شبکه پاسخگو Check it: Responsive grid design
3. ایجاد یک طرح سه ستونی 3. Creating a Three-Column Layout
-
طراحی یک چیدمان واکنشگرا با Flexbox Designing a responsive layout with Flexbox
-
آن را امتحان کنید: طراحی یک طرح با Flexbox و Grid Try it: Designing a layout with Flexbox and Grid
-
بررسی کنید: طراحی یک طرح بندی سه ستونی با Flexbox Check it: Designing a three-column layout with Flexbox
-
بررسی کنید: طراحی یک طرح سه ستونی با Grid Check it: Designing a three-column layout with Grid
4. ایجاد یک طرح دوازده ستونی 4. Creating a Twelve-Column Layout
-
راه اندازی طرح بندی دوازده ستونی Twelve-column layout setup
-
طرح دوازده ستونی برای نمای های مختلف Twelve-column layout for different viewports
-
آن را امتحان کنید: طراحی یک طرح دوازده ستونی Try it: Designing a twelve-column layout
-
بررسی کنید: طراحی یک چیدمان دوازده ستونی Check it: Designing a twelve-column layout
نتیجه Conclusion
-
مراحل بعدی: طرح‌بندی‌های پیشرفته و UX Next steps: Advanced layouts and UX
https://donyad.com/d/caf778
Julia Dyck
برنامه نویس، تهیه کننده، هنرمند وب Full-Stack
به عنوان یک توسعه دهنده وب تمام پشته، دانش جولیا از توسعه وب مدرن شامل HTML5، CSS، JavaScript ES6، React.js، MongoDB، Express، Node.js و PHP است. او همچنین یک تهیه کننده رسانه با تجربه با سابقه کار در تمام جنبه های ارتباطات و هنر دیجیتال است.
قبل از مطالعه توسعه وب، او درباره فناوری از دیدگاه انتقادی و خلاقانه برای انتشاراتی از جمله Vice Motherboard نوشت. جولیا همچنین مجری قدیمی برنامه رادیویی فایل‌ها است که در آن با هنرمندان و متخصصان درگیر در تمام جنبه‌های فناوری مصاحبه می‌کند.
نمایش نظرات