دوره آموزشی آن را تمرین کن: طرح بندی CSS
1 ساعت 53 دقیقهمتوسط2023-08-21
مدرسین
Julia Dyck
جزئیات دوره
توی این دوره، مربی جولیا دایک بهت نشون میده چطور میتونی طرحهای وب ریسپانسیو بسازی که به هر سایز صفحهای سازگار بشن و تجربه کاربری بدون مشکل رو فراهم کنن. با جولیا همراه شو و یاد بگیر چطور با استفاده از CSS Grid و Flexbox طرحهای مدولار بسازی و اونها رو با استفاده از مدیا کوئریها برای اندازههای مختلف صفحه تطبیق بدی. جولیا بهت اصول اولیه طراحی با Grid رو معرفی میکنه، توضیح میده چطور طرحها رو ریسپانسیو کنی و بعد راهنماییت میکنه چطور یه طرح سهستونه و دوازدهستونه بسازی.
مهارت ها
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off
سرفصل ها
مقدمه
- ایجاد طرح بندی شبکه پاسخگو
- آنچه باید بدانید
- استفاده از GitHub Codespaces با این دوره
مقدمه ای بر Grid Layouts
- طراحی طرح شبکه ای
- تعریف عناصر شبکه
- کار با سلکتورهای پیشرفته
- گرید در مقابل فلکس باکس
- آن را امتحانکنید - یک طرح بندی شبکه ای اولیه ایجاد کنید
- بررسیکنید - یک طرح بندی شبکه ای اولیه ایجاد کنید
پاسخگو کردن
- استفاده از رویکرد اول موبایل
- استفاده از پرسشهای رسانه ای
- تغییر طرح
- در دسترس قرار دادن آن
- آن را امتحانکنید - طراحی شبکه پاسخگو
- بررسیکنید - طراحی شبکه پاسخگو
ایجاد یک طرح سه ستونی
- طراحی یک طرح ریسپانسیو با فلکس باکس
- امتحانکنید - طراحی طرح با Flexbox و Grid
- بررسیکنید - طراحی طرح سه ستونی با Flexbox
- بررسیکنید - طراحی طرح سه ستونی با Grid
ایجاد یک طرح دوازده ستونی
- تنظیم چیدمان دوازده ستونی
- طرح دوازده ستونی برای نماهای مختلف
- امتحانکنید - طراحی یک چیدمان دوازده ستونی
- بررسیکنید - طراحی طرح دوازده ستونی
نتیجه
- مراحل بعدی - چیدمانهای پیشرفته و UX