آموزش جعبه ابزار CSS خود را با Flexbox گسترش دهید
Expand Your CSS Toolkit with Flexbox
این دوره CSS3 Flexbox را معرفی می کند. Flexbox یک سیستم طرح‌بندی جدید است که طراحی سایت‌های واکنش‌گرای موبایل را بسیار ساده می‌کند. طراحی اولین موبایل آینده وب است و یادگیری flexbox شما را در مسیر طراحی سایت های سازگار با موبایل به راحتی قرار می دهد.
این دوره ضمن پوشش ویژگی‌ها و مقادیر تشکیل‌دهنده flexbox، ابزارهای توسعه‌دهنده مانند خط فرمان و ویرایشگرهای متن و همچنین فلسفه طراحی واکنش‌گرا را نیز معرفی می‌کند. سپس، تمام دانش جدید ما برای ساخت یک سایت با استفاده از CSS3 Flexbox استفاده می‌شود.
در طول دوره، من به طور مکرر به مطالب منابع دوره اشاره می کنم. توصیه می کنم از آنها استفاده کنید!
آنچه خواهید آموخت
- اصول اولیه خط فرمان و نحوه استفاده از ویرایشگر متن
- ویژگی های Flexbox: align-item، justify-content و موارد دیگر.
- نظریه طراحی پاسخگو و نحو درخواست رسانه
آنچه خواهید ساخت
شما یک سایت یک صفحه ای در مورد موضوعی که انتخاب می کنید می سازید - برای مثال، یک کافه یا سایر مشاغل کوچک، نمونه کارها، چیزی که به آن علاقه دارید، و غیره. سپس، شما قالب بندی، ساختار و با استفاده از CSS Flexbox به آن استایل دهید.
سایر جزئیات دوره
- این دوره برای افرادی که قبلاً با HTML و CSS آشنایی دارند بهترین است.
- این دوره برای افرادی که با پیمایش در سیستم فایل خود راحت هستند، بهترین است.
- من در طول دوره از MacOS استفاده می‌کنم و دستورالعمل‌هایی را برای افرادی که از ویندوز یا لینوکس استفاده می‌کنند، ارائه می‌کنم.
پروژه این کلاس ساخت یک وب‌سایت کوچک تک صفحه‌ای است که دارای یک پیمایش، یک بخش قهرمان و چند بخش کپی جداگانه باشد.
- شما طرحی را برای سایت تک صفحه ای خود قاب خواهید کرد.
- سپس، قاب سیمی خود را حاشیه نویسی میکنید تا مشخص شود که چه بخش‌های مختلف HTML باید ایجاد و سبک‌دهی شود - سرصفحه، پاورقی، هر بخش و غیره.
- سپس شروع به کار روی HTML و CSS صفحه میکنید که با reset.css و ساختار سایت ثابت شروع می‌شود
- در نهایت، شما سایت خود را بر اساس Wireframe خواهید ساخت!
- اختیاری: در صورت تمایل، سایت خود را در یک سرویس میزبانی مانند آپلود کنید.
درس ها Lessons
-
Flexbox Froggy Flexbox Froggy
-
طراحی تعاملی Responsive Design
-
طرح 101 Layout 101
-
نمایش کامل ساخت Full Build Demonstration
-
راه اندازی و ابزار Setup & Tooling
-
ویژگی‌های انعطاف‌پذیر: تراز کردن آیتم‌ها، توجیه محتوا Flex Properties: align-items, justify-content
-
ویژگی‌های انعطاف‌پذیر: جهت انعطاف‌پذیری، انعطاف‌پذیری Flex Properties: flex-direction, flex-wrap
-
Outro Outro
-
تجدید کننده HTML و عناصر معنایی HTML5 HTML Refresher & HTML5 Semantic Elements
-
ویژگی‌های فلکس: رشد انعطاف‌پذیر، بر اساس انعطاف، سفارش Flex Properties: flex-grow, flex-basis, order
-
محور اصلی، محور متقاطع Main Axis, Cross Axis
-
پیاده سازی طراحی پاسخگو: پرسش های رسانه ای Implementing Responsive Design: Media Queries
-
بررسی CSS و reset.css CSS Review & reset.css
-
معرفی Introduction
-
طرح جام مقدس The Holy Grail Layout
-
Flexbox: یک زمینه جدید Flexbox: A New Context
https://donyad.com/d/231800
J Silverstein
توسعه دهنده رابط کاربری
. من یک کارگردان هنری هستم که تبدیل به توسعه‌دهنده فرانت‌اند شده‌ام که در شهر نیویورک قرار دارد. در حال حاضر، من توسعه وب را در مجمع عمومی تدریس می کنم و توسعه رابط کاربری را برای ; در گذشته، من به عنوان مدیر هنری یک آژانس وب بر طراحان و توسعه دهندگان نظارت داشته ام.
من به‌عنوان یک هنرمند آموزش‌دیده و یک توسعه‌دهنده تمرین‌کننده، از کاوش در راه‌های درهم تنیدگی هنر و کد لذت می‌برم. من به پیچ و خم ها، نقشه ها و پازل ها علاقه دارم. فهرستی برای خواندن از متون علمی تخیلی تا متون فلسفی. و تمایل واقعی برای تبدیل اینترنت به مکانی بهتر و قابل دسترس تر. کد خوب به همه خوش آمد می گوید.
نمایش نظرات