آموزش جعبه ابزار 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

نمایش نظرات

Skillshare (اسکیل شیر)

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

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

آموزش جعبه ابزار CSS خود را با Flexbox گسترش دهید
جزییات دوره
1h 22m
16
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
99
4 از 5
ندارد
دارد
دارد
J Silverstein
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

J Silverstein J Silverstein

توسعه دهنده رابط کاربری

. من یک کارگردان هنری هستم که تبدیل به توسعه‌دهنده فرانت‌اند شده‌ام که در شهر نیویورک قرار دارد. در حال حاضر، من توسعه وب را در مجمع عمومی تدریس می کنم و توسعه رابط کاربری را برای ; در گذشته، من به عنوان مدیر هنری یک آژانس وب بر طراحان و توسعه دهندگان نظارت داشته ام.

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