کانال تلگرام پشتیبانی تلگرام شماره تماس پشتیبانی: 0930 395 3766
ورود ثبت نام

آموزش دوره جامع توسعه‌دهنده مدرن فلکس‌باکس، گرید، Sass و انیمیشن‌ها - آخرین آپدیت

دانلود The Modern Flexbox, Grid, Sass & Animations Developer Course

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

بهترین دوره آموزش جامع CSS: فلکس‌باکس، گرید، Sass و انیمیشن‌های پیشرفته

با ساخت وب‌سایت‌های واقعی و جذاب، در CSS Flexbox، CSS Grid، Sass و انیمیشن‌های پیشرفته CSS حرفه‌ای شوید.

آنچه در این دوره خواهید آموخت:

  • آشنایی با اصول CSS Flexbox
  • تسلط بر سطح متوسط CSS Flexbox
  • مهارت در سطح پیشرفته CSS Flexbox
  • آموزش مبانی طراحی رابط کاربری وب (UI Web Design)
  • آموزش مبانی طراحی واکنش‌گرا (Responsive Web Design)
  • ساخت کامل یک وب‌سایت پورتفولیو با CSS Flexbox
  • آشنایی با اصول CSS Grid
  • تسلط بر سطح متوسط CSS Grid
  • مهارت در سطح پیشرفته CSS Grid
  • ساخت کامل یک وب‌سایت رزرو ویلا با CSS Grid
  • نحوه راه‌اندازی Sass با دو روش مختلف
  • آموزش جامع و کامل Sass
  • ساخت یک وب‌سایت تناسب اندام با CSS Flexbox، CSS Grid و Sass، همراه با قابلیت حالت تاریک (DARK MODE)

پیش‌نیازها:

  • دانش در سطح مبتدی HTML5 و CSS3 الزامی است.
  • داشتن کامپیوتر و اتصال به اینترنت.
  • تکمیل دوره "بوت‌کمپ نهایی عناصر HTML5 و خصوصیات CSS3" من اکیداً توصیه می‌شود، اما الزامی نیست.

چرا این دوره بهترین انتخاب شماست؟

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

پروژه‌های عملی دوره:

پروژه اول: وب‌سایت پورتفولیو

اولین وب‌سایتی که خواهیم ساخت، یک وب‌سایت پورتفولیو برای طراحان و توسعه‌دهندگان است. این وب‌سایت کاملاً واکنش‌گرا بوده و با استفاده کامل از CSS Flexbox ساخته شده است.

پروژه دوم: وب‌سایت رزرو ویلا

دومین وب‌سایت، یک وب‌سایت رزرو ویلا با امکانات مدرن مانند اسلایدر گالری جذاب است. این وب‌سایت نیز در تمامی دستگاه‌ها کاملاً واکنش‌گرا است و صرفاً با قدرت CSS Grid ساخته شده است.

پروژه سوم: وب‌سایت تناسب اندام با حالت تاریک

سومین پروژه، یک وب‌سایت تناسب اندام است که در آن قدرت واقعی CSS Flexbox، CSS Grid و Sass را ترکیب خواهیم کرد. این وب‌سایت اوج دستاوردهای شما در طول دوره خواهد بود. برجسته‌ترین ویژگی این وب‌سایت، قابلیت حالت تاریک (DARK MODE) است که به کاربران اجازه می‌دهد تم رنگی وب‌سایت را تنها با یک کلیک تغییر دهند.

فراتر از سطح پیشرفته

این دوره امکانات بسیار بیشتری را ارائه می‌دهد و شما را از سطح متوسط فراتر برده و به سمت سطح پیشرفته و نهایتاً تبدیل شدن به یک اسطوره در این فناوری‌ها هدایت می‌کند.

نکته آخر:

این دوره ایستا نخواهد بود و من به طور منظم آن را با محتوای جدید به‌روزرسانی خواهم کرد.

شروع یادگیری حرفه‌ای:

پس منتظر چه هستید؟ بیایید همین حالا با ثبت‌نام در این دوره این سفر حماسی را با هم آغاز کنیم!

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

معرفی دوره Course Introduction

  • معرفی دوره Course Introduction

  • مروری بر سرفصل‌های دوره Course Curriculum at a Glance

  • معرفی وب‌سایت پورتفولیو Scarlett Scarlett Portfolio Website Introduction

  • معرفی وب‌سایت Vision Luxury Villas Vision Luxury Villas Website Introduction

  • معرفی وب‌سایت gYmantic gYmantic Website Introduction

  • نصب نرم‌افزارهای لازم Setting Up Necessary Software

تسلط بر خصوصیات و مفاهیم CSS Flexbox (سطح متوسط) Master The CSS Flexbox Properties & Concepts (Intermediate-level)

  • معرفی فصل Chapter Introduction

  • فلکس‌باکس چیست؟ What is Flexbox

  • چرا فلکس‌باکس؟ Why Flexbox

  • خصوصیت Flex Direction - خصوصیات کانتینر فلکس Flex Direction Property - The Flex Container Properties

  • خصوصیت Flex Wrap - خصوصیات کانتینر فلکس Flex Wrap Property - The Flex Container Properties

  • خصوصیت Flex Flow - خصوصیات کانتینر فلکس Flex Flow Property - The Flex Container Properties

  • خصوصیت Justify Content - خصوصیات کانتینر فلکس Justify Content Property - The Flex Container Properties

  • خصوصیت Align Items - خصوصیات کانتینر فلکس Align Items Property - The Flex Container Properties

  • خصوصیت Align Content - خصوصیات کانتینر فلکس Align Content Property - The Flex Container Properties

  • خصوصیت Order - خصوصیات آیتم‌های فلکس Order Property - The Flex Items Properties

  • خصوصیت Flex Grow - خصوصیات آیتم‌های فلکس Flex Grow Property - The Flex Items Properties

  • خصوصیت Flex Shrink - خصوصیات آیتم‌های فلکس Flex Shrink Property - The Flex Items Properties

  • خصوصیت Flex Basis - خصوصیات آیتم‌های فلکس Flex Basis Property - The Flex Items Properties

  • خصوصیت ترکیبی Flex - خصوصیات آیتم‌های فلکس Flex Shorthand Property - The Flex Items Properties

  • خصوصیت Align Self - خصوصیات آیتم‌های فلکس Align Self Property - The Flex Items Properties

  • منابع فلکس‌باکس Flexbox Resources

اصول طراحی رابط کاربری (سطح متوسط) The Fundamentals of UI Design (Intermediate-level)

  • معرفی فصل Chapter Introduction

  • فضای خالی به عنوان اصل طراحی UI The White Space UI Design Fundamental

  • تراز بندی به عنوان اصل طراحی UI The Alignment UI Design Fundamental

  • چالش اول اصول طراحی UI UI Design Fundamentals Challenge 1

  • کنتراست و مقیاس به عنوان اصول طراحی UI The Contrast & Scale UI Design Fundamentals

  • تایپوگرافی به عنوان اصل طراحی UI The Typography UI Design Fundamental

  • رنگ به عنوان اصل طراحی UI The Color UI Design Fundamental

  • چالش دوم اصول طراحی UI UI Design Fundamentals Challenge 2

  • سلسله مراتب بصری به عنوان اصل طراحی UI The Visual Hierarchy UI Design Fundamental

  • چالش نهایی اصول طراحی UI UI Design Fundamentals Final Challenge

اصول طراحی وب واکنش‌گرا (سطح متوسط) The Fundamentals of Responsive Web Design (Intermediate-level)

  • معرفی فصل Chapter Introduction

  • ابزارهای توسعه‌دهنده فایرفاکس Firefox Dev Tools

  • پیکسل‌ها، پیکسل‌ها و باز هم پیکسل‌ها Pixels, Pixels and Pixels

  • حداکثر عرض و حداقل عرض Max Width & Min Width

  • واحدهای نمایش (Viewport Units) Viewport Units

  • مقدمه‌ای بر Media Queries Introduction to Media Queries

  • چالش Media Queries Media Queries Challenge

  • بخش اول رابط کاربری اپلیکیشن آب و هوا Weather App UI Part -1

  • بخش دوم رابط کاربری اپلیکیشن آب و هوا Weather App UI Part -2

  • موارد استفاده از واحدهای نمایش - بخش اول اندازه فونت Viewport Units Use Cases Part -1 Font Size

  • موارد استفاده از واحدهای نمایش - بخش دوم بخش‌های تمام صفحه Viewport Units Use Cases Part -2 Full Screen Sections

  • موارد استفاده از واحدهای نمایش - بخش سوم فوتر چسبنده Viewport Units Use Cases Part -3 Sticky Footer

  • موارد استفاده از واحدهای نمایش - بخش چهارم مارجین و پدینگ Viewport Units Use Cases Part -4 Margins & Paddings

  • موارد استفاده از واحدهای نمایش - بخش پنجم حاشیه بالایی Viewport Units Use Cases Part -5 The Top Border

وب‌سایت پورتفولیو Scarlett -- CSS Flexbox (سطح متوسط) Scarlett Portfolio Website -- CSS Flexbox (Intermediate-level)

  • معرفی وب‌سایت پورتفولیو Scarlett Tyler Scarlett Tyler Portfolio Website Introduction

  • تنظیمات پایه وب‌سایت پورتفولیو Scarlett Tyler Scarlett Tyler Portfolio Website Basic Setup

  • بحث درباره Box Sizing Box Sizing Discussion

  • ساخت نوار کناری Building The Side Nav

  • ساخت نوار ناوبری اصلی - بخش ۱ Building The Main Nav Part 1

  • ساخت نوار ناوبری اصلی - بخش ۲ Building The Main Nav Part 2

  • واکنش‌گرا کردن نوار ناوبری اصلی - بخش ۱ Making The Main Nav Responsive Part 1

  • واکنش‌گرا کردن نوار ناوبری اصلی - بخش ۲ Making The Main Nav Responsive Part 2

  • ساخت بخش Hero - بخش ۱ Building The Hero Section Part 1

  • ساخت بخش Hero - بخش ۲ Building The Hero Section Part 2

  • ساخت بخش کارها Building The Work Section

  • ساخت بخش درباره من Building The About Me Section

  • ساخت بخش خدمات - بخش ۱ Building The Services Section Part -1

  • ساخت بخش خدمات - بخش ۲ Building The Services Section Part -2

  • ساخت بخش مهارت‌ها - بخش ۱ Building The Skills Section Part -1

  • ساخت بخش مهارت‌ها - بخش ۲ Building The Skills Section Part -2

  • ساخت بخش نظرات - بخش ۱ Building The Testimonials Section Part -1

  • ساخت بخش نظرات - بخش ۲ Building The Testimonials Section Part -2

  • ساخت بخش تماس Building The Contact Section

تسلط بر خصوصیات و مفاهیم CSS Grid (سطح پیشرفته) Master The CSS Grid Properties & Concepts (Advanced-level)

  • معرفی فصل Chapter Introduction

  • مقدمه چیدمان CSS Grid - بخش ۱ CSS Grid Layout Introduction Part -1

  • مقدمه چیدمان CSS Grid - بخش ۲ CSS Grid Layout Introduction Part -2

  • فاصله ستون گرید، فاصله ردیف گرید و فاصله گرید -- خصوصیات کانتینر گرید Grid Column Gap, Grid Row Gap & Grid Gap -- The Grid Container Properties

  • تابع تکرار و واحد fr -- خصوصیات کانتینر گرید The Repeat Function & The fr Unit -- The Grid Container Properties

  • تغییر موقعیت آیتم‌های گرید -- خصوصیات آیتم‌های گرید Changing The Position of Grid Items -- The Grid Items Properties

  • گسترش دادن آیتم‌های گرید -- خصوصیات آیتم‌های گرید Spanning The Grid Items -- The Grid Items Properties

  • تغییر نام خطوط گرید -- خصوصیات آیتم‌های گرید Changing The Grid Line Names -- The Grid Items Properties

  • خصوصیت Grid Template Areas -- خصوصیات کانتینر گرید The Grid Template Areas Property -- The Grid Container Properties

  • خصوصیات Justify، Align و Place Items -- خصوصیات کانتینر گرید The Justify, Align & Place Items Properties -- The Grid Container Properties

  • خصوصیات Justify، Align و Place Content -- خصوصیات کانتینر گرید The Justify, Align & Place Content Properties -- The Grid Container Properties

  • مقادیر Grid Auto Rows، Flow و Columns -- خصوصیات کانتینر گرید The Grid Auto Rows, Flow & Columns Values -- The Grid Container Properties

  • خصوصیات Justify، Align و Place Self -- خصوصیات آیتم‌های گرید The Justify, Align & Place Self Properties -- The Grid Items Properties

  • مقادیر Max-Content، Min-Content و تابع MinMax -- خصوصیات کانتینر گرید The Max-Content, Min-Content & MinMax Function Values -- The Grid Container Prop

  • مقادیر Auto-Fill و Auto-Fit -- خصوصیات کانتینر گرید The Auto-Fill & Auto-Fit Values -- The Grid Container Properties

  • منبع CSS Grid CSS Grid Resource

وب‌سایت Vision Luxury Villas -- CSS Grid (سطح پیشرفته) Vision Luxury Villas Website -- CSS Grid (Advanced-level)

  • معرفی وب‌سایت VLV VLV Website Introduction

  • راه‌اندازی وب‌سایت VLV Setting Up the VLV Website

  • ساخت چیدمان کلی - بخش ۱ Crafting The Overall Layout Part -1

  • ساخت چیدمان کلی - بخش ۲ Crafting The Overall Layout Part -2

  • ساخت چیدمان کلی - بخش ۳ Crafting The Overall Layout Part -3

  • ساخت نوار ناوبری - بخش ۱ Building The Nav Part -1

  • ساخت نوار ناوبری - بخش ۲ Building The Nav Part -2

  • ساخت نوار ناوبری - بخش ۳ Building The Nav Part -3

  • ساخت هدر Building The Header

  • ساخت بخش محتوای رزرو - بخش ۱ Building The Booking Content Part -1

  • ساخت بخش محتوای رزرو - بخش ۲ Building The Booking Content Part -2

  • ساخت بخش تاریخ رزرو - بخش ۱ Building The Booking Date Part -1

  • ساخت بخش تاریخ رزرو - بخش ۲ Building The Booking Date Part -2

  • واکنش‌گرا کردن محتوا و تاریخ رزرو Making The Booking Content and Date Responsive

  • ساخت بخش ویلاها - بخش ۱ Building The Villas Part -1

  • ساخت بخش ویلاها - بخش ۲ Building The Villas Part -2

  • ساخت بخش ویلاها - بخش ۳ Building The Villas Part -3

  • ساخت شعار Building The Motto

  • ساخت محتوای رویدادها Building The Events Content

  • ساخت متن رویدادها Building The Events Text

  • ساخت متن گالری Building The Gallery Text

  • ساخت گالری چرخشی - بخش ۱ (نشانه گذاری) Building The Gallery Carousel Part -1 (Markup)

  • ساخت گالری چرخشی - بخش ۲ (استایل دهی) Building The Gallery Carousel Part -2 (Styling)

  • ساخت گالری چرخشی - بخش ۳ (استایل دهی) Building The Gallery Carousel Part -3 (Styling)

  • ساخت گالری چرخشی - بخش ۴ (جاوا اسکریپت) Building The Gallery Carousel Part -4 (JavaScript)

  • ساخت گالری چرخشی - بخش ۵ (جاوا اسکریپت) Building The Gallery Carousel Part -5 (JavaScript)

  • ساخت گالری چرخشی - بخش ۶ (جاوا اسکریپت) Building The Gallery Carousel Part -6 (JavaScript)

  • ساخت گالری چرخشی - بخش ۷ (جاوا اسکریپت) Building The Gallery Carousel Part -7 (JavaScript)

  • ساخت گالری چرخشی - بخش ۸ (جاوا اسکریپت) Building The Gallery Carousel Part -8 (JavaScript)

  • ساخت گالری چرخشی - بخش ۹ (جاوا اسکریپت) Building The Gallery Carousel Part -9 (JavaScript)

  • ساخت گالری چرخشی - بخش ۱۰ (جاوا اسکریپت) Building The Gallery Carousel Part -10 (JavaScript)

  • ساخت گالری چرخشی - بخش ۱۱ (جاوا اسکریپت) Building The Gallery Carousel Part -11 (JavaScript)

  • ساخت گالری چرخشی - بخش ۱۲ (جاوا اسکریپت) Building The Gallery Carousel Part -12 (JavaScript)

  • ساخت گالری چرخشی - بخش ۱۳ (جاوا اسکریپت) Building The Gallery Carousel Part -13 (JavaScript)

  • ساخت گالری چرخشی - بخش ۱۴ (جاوا اسکریپت) Building The Gallery Carousel Part -14 (JavaScript)

  • ساخت محتوا و متن ویژگی‌ها Building The Features Content and Text

  • ساخت بخش نظرات - بخش ۱ Building The Testimonials Part -1

  • ساخت بخش نظرات - بخش ۲ Building The Testimonials Part -2

  • ساخت فوتر Building The Footer

تسلط بر Sass (سطح پیشرفته) Sass Mastery (Advanced-level)

  • معرفی فصل Chapter Introduction

  • نصب Sass با استفاده از Node-Sass - بخش ۱ -- روش ۱ Installing Sass Using Node-Sass Part -1 -- Method -1

  • نصب Sass با استفاده از Node-Sass - بخش ۲ -- روش ۱ Installing Sass Using Node-Sass Part -2 -- Method -1

  • نصب Sass با استفاده از Node-Sass - بخش ۳ -- روش ۱ Installing Sass Using Node-Sass Part -3 -- Method -1

  • نصب Sass با استفاده از افزونه VS Code -- روش ۲ Installing Sass Using a VS Code Extension -- Method -2

  • بررسی تفاوت بین فایل‌های .sass و .scss Exploring the Difference Between .sass & .scss Files

  • متغیرهای Sass Sass Variables

  • مپ‌های Sass Sass Maps

  • تو در تو کردن Sass (Nesting) Sass Nesting

  • پارتیشن‌ها و ایمپورت‌های Sass Sass Partials & Imports

  • توابع Sass Sass Functions

  • میکسین‌های Sass - بخش ۱ Sass Mixins Part -1

  • میکسین‌های Sass - بخش ۲ Sass Mixins Part -2

  • قانون @extend در Sass Sass @extend Rule

  • قانون @each در Sass Sass @each Rule

  • شرط‌ها در Sass Sass Conditionals

  • حلقه‌های for در Sass Sass For Loops

  • حلقه‌های while در Sass Sass While Loops

  • عملگرهای حسابی Sass Sass Arithmetic Operators

وب‌سایت gYmantic -- Sass + Grid + Flexbox (سطح پیشرفته) gYmantic Website -- Sass + Grid + Flexbox (Advanced-level)

  • معرفی وب‌سایت gYmantic gYmantic Website Introduction

  • راه‌اندازی وب‌سایت gYmantic gYmantic Website Setup

  • ساخت چیدمان کلی Crafting the Overall Layout

  • ساخت هدر - بخش ۱ (نشانه گذاری) Building the Header Part -1 (Markup)

  • ساخت هدر - بخش ۲ (نشانه گذاری) Building the Header Part -2 (Markup)

  • ساخت هدر - بخش ۳ (استایل دهی) Building the Header Part -3 (Styling)

  • ساخت هدر - بخش ۴ (استایل دهی) Building the Header Part -4 (Styling)

  • ساخت هدر - بخش ۵ (استایل دهی) Building the Header Part -5 (Styling)

  • ساخت هدر - بخش ۶ (استایل دهی) Building the Header Part -6 (Styling)

  • واکنش‌گرا کردن هدر - بخش ۷ (قابلیت اجرایی) Making the Header Responsive Part -7 (Functionality)

  • پیاده‌سازی حالت تاریک (قابلیت اجرایی) Implementing the Dark Mode (Functionality)

  • ساخت بخش نمایش - بخش ۱ (نشانه گذاری) Building the Showcase Part -1 (Markup)

  • ساخت بخش نمایش - بخش ۲ (استایل دهی) Building the Showcase Part -2 (Styling)

  • ساخت بخش نمایش - بخش ۳ (استایل دهی) Building the Showcase Part -3 (Styling)

  • ساخت بخش شعار - بخش ۱ (نشانه گذاری + استایل دهی) Building the Motto Part -1 (Markup + Styling)

  • ساخت بخش شعار - بخش ۲ (استایل دهی) Building the Motto Part -2 (Styling)

  • ساخت بخش ویژگی‌ها - بخش ۱ (نشانه گذاری) Building the Features Part -1 (Markup)

  • ساخت بخش ویژگی‌ها - بخش ۲ (استایل دهی) Building the Features Part -2 (Styling)

  • ساخت بخش مربیان - بخش ۱ (نشانه گذاری) Building the Trainers Part -1 (Markup)

  • ساخت بخش مربیان - بخش ۲ (استایل دهی) Building the Trainers Part -2 (Styling)

  • ساخت بخش نظرات - بخش ۱ (نشانه گذاری) Building the Testimonials Part -1 (Markup)

  • ساخت بخش نظرات - بخش ۲ (استایل دهی) Building the Testimonials Part -2 (Styling)

  • ساخت بخش نظرات - بخش ۳ (قابلیت اجرایی) Building the Testimonials Part -3 (Functionality)

  • ساخت بخش مشتریان - بخش ۱ (نشانه گذاری) Building the Clients Part -1 (Markup)

  • ساخت بخش مشتریان - بخش ۲ (استایل دهی) Building the Clients Part -2 (Styling)

  • ساخت دکمه بازگشت به بالا Building the Scroll to Top Button

  • ساخت بخش ثبت نام - بخش ۱ (نشانه گذاری) Building the Register Part -1 (Markup)

  • ساخت بخش ثبت نام - بخش ۲ (استایل دهی) Building the Register Part -2 (Styling)

  • ساخت بخش ثبت نام - بخش ۳ (استایل دهی) Building the Register Part -3 (Styling)

  • ساخت بخش ثبت نام - بخش ۴ (قابلیت اجرایی) Building the Register Part -4 (Functionality)

  • ساخت بخش ثبت نام - بخش ۵ (قابلیت اجرایی) Building the Register Part -5 (Functionality)

  • ساخت بخش فوتر - بخش ۱ (نشانه گذاری) Building the Footer Part -1 (Markup)

  • ساخت بخش فوتر - بخش ۲ (استایل دهی) Building the Footer Part -2 (Styling)

  • ساخت بخش فوتر - بخش ۳ (استایل دهی) Building the Footer Part -3 (Styling)

جمع‌بندی دوره Course Wrap Up

  • جمع‌بندی و گام‌های بعدی Wrap Up & Next Steps

70-528: TS: Microsoft .NET Framework 2.0 Practice Test 2024

70-528: TS: Microsoft .NET Framework 2.0 Practice Test 2024

70-528: TS: Microsoft .NET Framework 2.0 Practice Test 2024

آموزش محافظت از نرم افزار خود با تجزیه و تحلیل کامپوننت

آموزش محافظت از نرم افزار خود با تجزیه و تحلیل کامپوننت

Protecting Your Software with Component Analysis

آموزش آدرس IP و پیاده سازی LAN WAN با مثال های عملی

آموزش آدرس IP و پیاده سازی LAN WAN با مثال های عملی

IP Address and LAN WAN Implementation with Practical Examples

نمایش نظرات

آموزش دوره جامع توسعه‌دهنده مدرن فلکس‌باکس، گرید، Sass و انیمیشن‌ها
جزییات دوره
48.5 hours
174
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
5,503
4.5 از 5
دارد
دارد
دارد

https://donyad.com/d/e16784

جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Muslim Helalee Muslim Helalee

برنامه نویس و مدرس وب Full Stack