آموزش راهنمای کامل CSS Flexbox با یک پروژه کامل 2022
The Complete CSS Flexbox Guide With a Complete Project 2022
آیا از استفاده از شناورها و پاکسازی این شناورها خسته شده اید؟
آیا از استفاده از موقعیت‌یابی برای دستیابی به چیدمان مورد نظر خود خسته شده‌اید و سپس متوجه می‌شوید که وقتی آن را در اندازه‌های مختلف صفحه نمایش می‌بینید همه چیز خراب می‌شود؟
آیا راهی کارآمد برای ایجاد طرح‌بندی‌های پیچیده آسان و سریع می‌خواهید؟
آیا می‌خواهید طرح‌بندی‌های پاسخگوی پیشرفته را با استفاده از css فقط با خطوط ساده کد ایجاد کنید؟
اگر چنین است، پس این دوره برای شما مناسب است!
در این دوره شما همه چیزهایی را که برای شروع استفاده از flexbox در پروژه های آینده خود نیاز دارید، یاد خواهید گرفت
ما با یادگیری و درک نحوه عملکرد flexbox شروع می‌کنیم، زیرا فکر می‌کنم اگر قبل از اینکه از flexbox استفاده کرده باشید ممکن است تحت تأثیر تعداد ویژگی‌های جدید قرار بگیرید، ما حدود 11 یا 12 ویژگی جدید با میانگین 4 مقدار بالقوه داریم. می تواند کمی طاقت فرسا باشد که با همه چیز به درستی بپرید،
اما در این دوره به وضوح خواهید فهمید که هر ویژگی چگونه کار می کند و چگونه می توان از یک ویژگی خاص برای کنترل طرح به روش های مختلف استفاده کرد
من به یادگیری با انجام این کار معتقدم پس از درک و یادگیری تمام ویژگی های flexbox، دستمان را کثیف خواهیم کرد و با ساخت دو منو، یک منوی ساده تک سطحی و یک منوی پیشرفته و در این بخش از دوره شروع می کنیم. هر چیزی را که یاد گرفتید مرحله به مرحله خواهید دید
یک چیزی که در هنگام ساختن این دوره به ذهنم رسید این بود که می خواستم این دوره از دوره های دیگر متمایز باشد، بنابراین متوجه شدم که در سایر دوره های فلکس باکس شما همیشه تعدادی جعبه را روی صفحه نمایش خواهید دید و مربی فقط با استفاده از فلکس باکس آنها را جابجا می کند و در پایان دوره به پایان می رسد و شما اینگونه می شوید که "بسیار خوب بود من اصول فلکس باکس را یاد گرفتم اما حالا چی؟ چگونه می توانم از این دانش در نمونه های دنیای واقعی استفاده کنم"
چون بعد از همه صفحات وب، برخی از جعبه‌ها در حال حرکت نیستند، درست است؟ و دقیقاً به همین دلیل است که آخرین بخش دوره را ایجاد کردم.
بنابراین در این بخش آخر ما یک پروژه کامل را از ابتدا می سازیم که من برای شما ساخته ام، و تمرکز اصلی من در زمان ساخت این پروژه این است که چگونه هر ویژگی را که در این پروژه در مورد flexbox یاد می گیریم پیاده سازی کنیم، بنابراین شما یک درک کاملی از آنچه می توانیم با استفاده از این ویژگی ها در زندگی واقعی انجام دهیم!
بنابراین در این پروژه یاد خواهید گرفت که چگونه بسیاری از طرح‌بندی‌های مختلف پیشرفته مانند
ایجاد کنید1 - طرح هولیگریل
2 - شما یاد خواهید گرفت که چگونه عناصر را به راحتی به صورت عمودی در مرکز قرار دهید
3 - چگونه با استفاده از flexbox
مقالات پستی با ارتفاع مساوی بسازیم4 - طرح‌بندی کارت‌های بسیار پیشرفته که دستیابی به آن بدون flexbox تقریباً غیرممکن است
5 - طرح بنایی افقی که بسیار جالب است
پس از درک و یادگیری تمام ویژگی‌های flexbox، دستمان را کثیف می‌کنیم و با ساختن دو منو شروع می‌کنیم، یک منوی ساده تک سطحی و یک منوی پیشرفته و در این بخش از دوره شما همه موارد را مشاهده خواهید کرد. چیزی که در عمل گام به گام یاد گرفتید.
در بخش آخر ما یک پروژه کامل را از ابتدا می سازیم که برای شما ساخته ام، و تمرکز اصلی من در زمان ساخت این پروژه این است که چگونه هر ویژگی را که در مورد flexbox در این پروژه یاد می گیریم پیاده سازی کنیم تا شما درک کاملی از آنچه می توانیم با استفاده از این ویژگی ها در زندگی واقعی انجام دهیم، به دست آورید!
درس ها Lessons
-
19 ساخت طرح هولیگریل 19 building the holygrail layout
-
24 افزودن flexbox به بخش ساعت 24 adding flexbox to the watch section
-
26 افزودن flexbox به بخش دانلود 26 adding flexbox to the download section
-
9 تراز کردن یک عنصر با ویژگی align self 9 aligning a single element with align self property
-
7 بیشتر در مورد توجیه محتوا 7 more about justify content
-
1 معرفی دوره و آنچه که قرار است یاد بگیرید 1 course introduction and what you're going to learn
-
25 ساخت و طراحی بخش دانلود 25 building and styling the download section
-
23 ساخت و طراحی بخش ساعت 23 building and styling the watch section
-
14 flexbasis 14 flexbasis
-
5 یادگیری خاصیت flex wrap 5 learning the flex wrap property
-
11 یادگیری خاصیت سفارش 11 learning the order property
-
2 اولین کانتینر flexbox خود را ایجاد می کنیم 2 creating our first flexbox container
-
8 المان تراز با ویژگی align items 8 aligning elements with align items property
-
16 ساخت یک منوی ساده با فلکس باکس 16 building a simple menu with flexbox
-
18 مروری بر پروژه نهایی ما 18 overview of our final project
-
27 ساختن گالری ما با طرح بنایی افقی با استفاده از فلکس باکس 27 building our gallery with the horizontal masonry layout using flexbox
-
10 تراز کردن چندین خط با ویژگی align content 10 aligning multiple lines with align content property
-
6 تراز کردن عناصر با ویژگی justify content 6 aligning elements with justify content property
-
29 ساخت نوار کناری خود با استفاده از flexbox 29 building our sidebar using flexbox
-
21 ساخت و طراحی بخش پست های ما 21 building and styling our posts section
-
12 فلکس رشد 12 flex grow
-
28 افزودن پلاگین لایت باکس گالری به گالری ما 28 adding gallery lightbox plugin to our gallery
-
20 ساخت هدر ما با استفاده از flexbox 20 building our header using flexbox
-
4 مورد بیشتر در مورد ویژگی فلکس جریان 4 more about flex flow property
-
نمای کلی 15 بخش و شروع فایل ها 15 section overview and starting files
-
3 درک محورهای اصلی و متقاطع 3 understanding main and cross axes
-
13 فلکس شرینک 13 flex shrink
-
17 ساخت منوی پیشرفته با فلکس باکس 17 building an advanced menu with flexbox
-
30 ساخت منو و پاورقی ما 30 building our menu and our footer
-
22 افزودن flexbox به پست های ما 22 adding flexbox to our posts
https://donyad.com/d/b38b5f
Ahmed Sadek
توسعه دهنده وب فول استک، فریلنسر و تی
سلام، احمد است، خوشحالم که به اینجا رسیدی!
من یک توسعه دهنده ارشد وب هستم که در 7 سال گذشته به عنوان فریلنسر کار می کنم، صدها پروژه وب را توسعه داده ام و ده ها مشتری خوشحال دارم!
من به شرکت‌هایی در هر اندازه کمک کرده‌ام تا تجارت خود را بهبود بخشند.
من نمی‌توانم صبر کنم تا تمام دانش توسعه وب را که در اینجا با دانش‌آموزان در اشتراک مهارت دارم به اشتراک بگذارم، بنابراین اگر به یادگیری فن‌آوری‌های توسعه وب مدرن علاقه دارید، در دوره‌های من یکدیگر را خواهیم دید!
نمایش نظرات