آموزش CSS3 Flexbox Media Queries و CSS Grid Master - آخرین آپدیت

سرفصل ها و درس ها

معرفی و راه اندازی Introduction and Setup

• بررسی اجمالی دوره Course Overview

• مربی خود را بشناسید و کمک/پشتیبانی دریافت کنید Know Your Instructor & Get Help/Support

• نصب کد VS و پسوند سرور Installing VS Code and Server extension

• آشنایی با فلکس باکس Introduction to Flexbox

• فایل های index.html و style.css را راه اندازی کنید Setup index.html and style.css files

• بازنشانی اندازه جعبه بالشتک حاشیه در اپراتور جهانی Reset margin padding box-sizing on universal operator

• شکل دادن به جعبه ها Styling the Boxes

کار با Flexbox Working with Flexbox

• نمایش انعطاف پذیری را روی والد اعمال کنید Apply display flex on parent

• ردیف Flex Direction ردیف - ستون معکوس - ستون - معکوس Flex Direction row row-reverse column column-reverse

• فلکس رشد کوچک می شود Flex grow shrink

• محتوای فلکس استارت را توجیه کنید Justify Content Flex Start

• توجیه محتوا انعطاف پذیری Justify Content Flex End

• مرکز محتوا را توجیه کنید Justify Content Center

• فضای محتوا را توجیه کنید Justify Content Space-Around

• فضای بین محتوا را توجیه کنید Justify Content Space-Between

• چرا نباید از ویژگی Float استفاده کنید Why you should not use Float property

• تراز کردن مورد Flex End Align Item Flex End

• تراز کردن مورد Flex Start Align Item Flex Start

• مرکز آیتم را ترتیب دهید Align Item Center

• اساس فلکس مانند Width on Flex Item Flex Basis same as Width on Flex Item

• پاسخگویی با پرس و جو رسانه ای Responsivesness with Media Query

• ایجاد طرح بندی Flex Wrap Flex Wrap Layout Creation

• طراحی طرح فلکس Styling the Flex layout

• پاسخگو کردن صفحه نمایش با Flex Wrap Making Screen Responsive with Flex Wrap

• افزایش پاسخگویی Enhancing the responsiveness

پرسش های رسانه ای و توسعه وب پاسخگو Media Queries and Responsive Web Development

• منظور از پاسخگویی چیست What is meant by Responsiveness

• نمونه ای از وب سایت Non_responsive Example of Non_responsive website

• ایجاد اسکلت HTML برای وب سایت غیر پاسخگو Creating HTML Skeleton for non-responsive website

• استایل دادن به صفحه غیر پاسخگو Styling the non responsive page

نقطه انفصال کوئری های رسانه برای دستگاه های مختلف Media Queries Breakpoint for different devices

• نقاط شکست دستگاه های مختلف Different Device break points

• در دستگاه تا 768 پیکسل پاسخگو کنید Make Responsive in device upto 768px

• پاسخگو برای عرض دستگاه تا 468 پیکسل Make Responsive for device width upto 468px

• برای عرض دستگاه بالاتر از 1024 پیکسل پاسخگو کنید Make Responsive for device width above 1024px

• پاسخگو شدن بین 769 پیکسل تا 1023 پیکسل Making Responsive between 769px and 1023px

Git و Github Git and Github

• Git و Github Part-1 Git and Github Part-1

• Git و Github Part-2 Git and Github Part-2

• Git و Github قسمت 3 Git and Github Part-3

• git و github قسمت 4 Git and Github Part-4

شبکه CSS CSS Grid

• طرح بندی HTML و CSS تنظیم - قسمت -1 Setup Html and Css Layout - Part-1

• راه اندازی Html و Css Layout - Part-2 Setup Html and Css Layout - Part-2

• رنگ پس زمینه جعبه ها Background color to boxes

• نمایش گرید با سطر و ستون Display Grid with Rows and Columns

• واحد کسری برای اشغال تمام عرض Fractional unit for occupying full width

• فاصله بین سطر و ستون Gap between row and column

• مخفف سطرها و ستون های الگو Short hand for template rows and columns

• مخفف برای شکاف ردیف و ستون شبکه Short hand for grid row and column gap

• خطوط سطر و ستون Row and Column lines

• موقعیت عنصر شبکه متحرک Moving Grid element position

• مخفف سطر و ستون و عرض کامل Shorthand for row and column and full width

• ردیف‌های خودکار و طرح‌بندی صریح و ضمنی Auto Rows & Explicit and Implicit layout

• رفتار پاسخگو فقط با شبکه css بدون درخواست رسانه Responsive behavior only with css grid without media queries

کد منبع Source code

• کد منبع Source code