آموزش بخش دوم: چیدمان و ساختار CSS - آخرین آپدیت
دانلود Part 2: CSS Layout and Structure
در این دوره، ما از استایلدهیهای پایه CSS فراتر رفته و وارد مهمترین بخش توسعه وب مدرن میشویم: کنترل ساختار و چیدمان (Layout).
اگر تا به حال با رفتار غیرمنتظره المانها دست و پنجه نرم کردهاید
اگر وسطچین کردن یک div برایتان مانند یک معمای پیچیده بود
یا اگر Flexbox و Grid برایتان گیجکننده یا دشوار به نظر میرسیدند.
ما با درک این موضوع شروع میکنیم که چرا المانها به شکل خاصی رفتار میکنند —بررسی display، position و مشکلات تاریخی که سیستمهای چیدمان CSS را شکل دادند. سپس، Flexbox و CSS Grid را از مفاهیم بنیادی، با تمرکز بر محور اصلی (Main Axis)، محور متقاطع (Cross Axis)، تفکر ساختاری و منطق طراحی ریسپانسیو تحلیل میکنیم.
این یک آموزش مبتنی بر میانبرهای سریع نیست
بلکه درکی ساختارمند و سیستماتیک از چیدمان وب است.
آنچه خواهید آموخت:
-
چرا المانها در CSS رفتارهای متفاوتی دارند (block، inline، inline-block)
-
چگونه display و position واقعاً ساختار چیدمان را کنترل میکنند
-
دلیل واقعی دشوار بودن وسطچین کردن المانها در گذشته
-
مفاهیم بنیادی عملکرد Flexbox (شفافسازی محور اصلی و متقاطع)
-
نحوه ساخت چیدمانهای ساختارمند با استفاده از Flexbox
-
درک عمیق سیستم CSS Grid
-
نحوه عملکرد grid-template-columns در سطح ساختاری
-
چگونه یک وبسایت کاملاً ریسپانسیو (واکنشگرا) طراحی و پیادهسازی کنیم
-
تغییر دیدگاه از استفاده از ترفندها (Hacks) به تفکر سیستمی در چیدمان
چه چیزی خواهیم ساخت:
در پایان این دوره، شما قادر خواهید بود:
-
یک وبسایت واقعی را با استفاده از Flexbox بسازید
-
چیدمانها را با استفاده از Grid سازماندهی کنید
-
یک وبسایت کاملاً ریسپانسیو را از صفر ایجاد کنید
-
به جای کپی کردن کدها، معماری چیدمان را درک کنید
این دوره برای چه کسانی است:
-
دانشجویانی که با HTML و CSS پایه آشنا هستند
-
مبتدیانی که میخواهند کنترل واقعی روی چیدمان صفحات داشته باشند
-
توسعهدهندگانی که در درک Flexbox و Grid دچار مشکل هستند
-
برنامهنویسان خودآموزی که به دنبال یادگیری ساختاریافته و شفاف هستند
پیشنیازها:
-
دانش پایه HTML
-
آشنایی اولیه با سینتکس CSS
-
یک ویرایشگر کد (پیشنهاد ما VS Code است)
درسها Lessons
-
معرفی دوره: چه چیزی خواهیم ساخت و چرا CSS Grid اهمیت دارد Course Introduction: What You'll Build and Why CSS Grid Matters
-
درس ۱: Display و Position (چرا المانها طبق انتظار رفتار نمیکنند) Lesson 1 - Display and Position (Why Element Don’t Behave)
-
درس ۲: بزرگترین چالشهای تاریخ CSS (وسطچین کردن المانها) Lesson 2 - Biggest Issues in CSS History (Centring Element)
-
درس ۳: یادگیری محور اصلی و محور متقاطع Lesson 3 - Learning Main Axis and Cross
-
درس ۴: ساخت یک وبسایت واقعی با استفاده از Flexbox Lesson 4 - Building a Real Website Using Flex Box
-
درس ۵: یادگیری عمیق CSS Grid Lesson 5 - Learning CSS Grid Deeply
-
درس ۶: درک مفهوم Grid Template Column Lesson 6 - Understanding The Grid Template Column
-
درس ۷: نحوه ساخت وبسایت کاملاً ریسپانسیو Lesson 7- How To Build Full Responsive Website
-
درس ۸: یادگیری ساختار اصلی Grid Lesson 8 - Learning Main Grid Structure
https://donyad.com/d/034ba8
Anish Kumar
توسعهدهنده وب
نمایش نظرات