آموزش CSS را از ابتدا با 5 پروژه مادیت کنید

Materialize CSS From Scratch With 5 Projects

در حال بارگزاری نمونه ویدیو، لطفا صبر کنید...
Video Player is loading.
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
    • Chapters
    • descriptions off, selected
    • subtitles off, selected
      نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
      نمونه ویدیوها:
      • در حال بارگزاری، لطفا صبر کنید...
      توضیحات دوره: استاد HTML 5 و چارچوب CSS Materialize با ساخت 5 تم مبتنی بر طراحی متریال واکنش‌گرا در دنیای واقعی، ساختار صحیح اسناد HTML 5 را با برچسب‌ها و ویژگی‌های معنایی بیاموزید و با کیفیت بالا شگفت‌انگیز ایجاد کنید. ویدجت‌های JS با استفاده از محیط sandbox سفارشی برای تعاملی‌تر کردن تم‌های خود چند جاوا اسکریپت/JQuery سفارشی بیاموزید.

      این دوره برای هرکسی است که HTML اولیه و کمی CSS را می‌داند و می‌خواهد وب‌سایت ظاهری و ایجاد رابط کاربری خود را با استفاده از چارچوب Materialize CSS که بر اساس طرح Material Design Google است، به سطح بعدی ارتقا دهد. شما تمام اجزای CSS و جاوا اسکریپت، انیمیشن ها/انتقال ها را یاد خواهید گرفت و 5 تم دنیای واقعی زیبا و کاملاً پاسخگو را از ابتدا خواهید ساخت.

      مادّی‌سازی سفارشی Sandbox

      من یک محیط یادگیری HTML کاملاً سفارشی برای چند بخش اول این دوره ایجاد کرده‌ام. هر سخنرانی یک صفحه html مرتبط با آن دارد و یک حالت شروع دارد. همانطور که در طول سخنرانی‌ها پیش می‌رویم، شما به همراه من کدنویسی می‌کنید تا همه چیزهایی را که Materialize ارائه می‌دهد از جمله اجزای CSS، ابزارهای کمکی، ویجت‌های JS و موارد دیگر را یاد بگیرید.

      5 پروژه/موضوع واقعی

      ما پروژه های زیر را از ابتدا ایجاد خواهیم کرد..

      1. Travelville -  وب‌سایت/موضوع آژانس مسافرتی  (کشویی چرخ فلک، تکمیل خودکار، پیمایش پیمایش)
      2. Quazzu - تم میزبانی ابر (SideNav، کارت‌ها، پوشش‌های CSS)
      3. Madmin  - طرح زمینه مدیریت تعاملی (لیست کارهای کاری، نمودارها، پیش بارگذاری، اسکریپت پیشخوان)
      4. BizLand - موضوع مشاوره کسب و کار با صفحه فرود تمام صفحه (Scrollfire، ادغام نقشه های گوگل)
      5. Galappear - نمونه کار طراحی گرافیک (از Sass و scrollfire برای انیمیشن های اسکرول استفاده می کند)


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

      مقدمه و شروع Intro & Getting Started

      • به دوره خوش آمدید Welcome To The Course

      • به دوره خوش آمدید Welcome To The Course

      • Materialize چیست و چرا از آن استفاده کنیم؟ What Is Materialize & Why Use It?

      • Materialize چیست و چرا از آن استفاده کنیم؟ What Is Materialize & Why Use It?

      • راه اندازی محیط Environment Setup

      • راه اندازی محیط Environment Setup

      • مادالیز کردن Sandbox Setup Materialize Sandbox Setup

      مقدمه و شروع Intro & Getting Started

      • مادالیز کردن Sandbox Setup Materialize Sandbox Setup

      اجزای CSS - قسمت 1 CSS Components - Part 1

      • تایپوگرافی و تراز Typography & Alignment

      • تایپوگرافی و تراز Typography & Alignment

      • رنگ های متن و پس زمینه Text & Background Colors

      • رنگ های متن و پس زمینه Text & Background Colors

      • دکمه ها و نمادها Buttons & Icons

      • دکمه ها و نمادها Buttons & Icons

      • دکمه های عمل شناور و ثابت Floating & Fixed Action Buttons

      • دکمه های عمل شناور و ثابت Floating & Fixed Action Buttons

      • نوار ناوبری Navbar

      • مجموعه ها و نشان ها Collections & Badges

      • مجموعه ها و نشان ها Collections & Badges

      • سیستم شبکه The Grid System

      • سیستم شبکه The Grid System

      اجزای CSS - قسمت 1 CSS Components - Part 1

      • نوار ناوبری Navbar

      اجزای CSS - قسمت 2 CSS Components - Part 2

      • کارت ها Cards

      • کارت ها Cards

      • خرده نان و پاورقی Breadcrumb & Footer

      • فرم اصلی و کنترل های ورودی Basic Form & Input Controls

      • فرم اصلی و کنترل های ورودی Basic Form & Input Controls

      • فرم فانتزی و کنترل های ورودی Fancy Form & Input Controls

      • جداول و رسانه Tables & Media

      • جداول و رسانه Tables & Media

      • چیپس و صفحه بندی Chips & Pagination

      • Preloaders Preloaders

      اجزای CSS - قسمت 2 CSS Components - Part 2

      • خرده نان و پاورقی Breadcrumb & Footer

      • فرم فانتزی و کنترل های ورودی Fancy Form & Input Controls

      • چیپس و صفحه بندی Chips & Pagination

      • Preloaders Preloaders

      اجزای تعاملی - قسمت 1 Interactive Components - Part 1

      • چرخ فلک Carousel

      • چرخ فلک Carousel

      • تاشو Collapsible

      • تاشو Collapsible

      • کشف ویژگی Feature Discovery

      • گفتگوها (نان تست و نکات ابزار) Dialogs (Toasts & Tooltips)

      • گفتگوها (نان تست و نکات ابزار) Dialogs (Toasts & Tooltips)

      • جعبه مواد و لغزنده Material Box & Slider

      • جعبه مواد و لغزنده Material Box & Slider

      • مدال ها Modals

      • مدال ها Modals

      اجزای تعاملی - قسمت 1 Interactive Components - Part 1

      • کشف ویژگی Feature Discovery

      اجزای تعاملی - قسمت 2 Interactive Components - Part 2

      • اختلاف منظر Parallax

      • ناوبری جانبی Side Navigation

      • PushPin PushPin

      • ScrollSpy Nav Scrolling ScrollSpy Nav Scrolling

      • زبانه ها Tabs

      • زبانه ها Tabs

      اجزای تعاملی - قسمت 2 Interactive Components - Part 2

      • اختلاف منظر Parallax

      • ناوبری جانبی Side Navigation

      • PushPin PushPin

      • ScrollSpy Nav Scrolling ScrollSpy Nav Scrolling

      پروژه 1 - Travelville Project 1 - Travelville

      • معرفی پروژه Project Intro

      • نوار ناوبری و Sidenav Navbar & Sidenav

      • نوار لغزنده تصویر Image Slider

      • جعبه های جستجو و نماد Search & Icon Boxes

      • مکان‌ها و گالری محبوب Popular Places & Gallery

      • تماس با بخش و ScrollSpy Contact Section & ScrollSpy

      پروژه 1 - Travelville Project 1 - Travelville

      • معرفی پروژه Project Intro

      • نوار لغزنده تصویر Image Slider

      • جعبه های جستجو و نماد Search & Icon Boxes

      • مکان‌ها و گالری محبوب Popular Places & Gallery

      • تماس با بخش و ScrollSpy Contact Section & ScrollSpy

      پروژه 2 - Quazzu Project 2 - Quazzu

      • معرفی پروژه Project Intro

      • نوار ناوبری و ویترین Navbar & Showcase

      • جعبه ها، درباره و پوشش Boxes, About & Overlay

      • جعبه ها، درباره و پوشش Boxes, About & Overlay

      • بخش پادکست و چرخ فلک توصیفات Podcast Section & Testimonials Carousel

      • بخش پادکست و چرخ فلک توصیفات Podcast Section & Testimonials Carousel

      • پاورقی و ورود به سیستم Footer & Login Modal

      • صفحه راه حل ها Solutions Page

      • صفحه راه حل ها Solutions Page

      • صفحه ثبت نام Signup Page

      • صفحه ثبت نام Signup Page

      پروژه 2 - Quazzu Project 2 - Quazzu

      • معرفی پروژه Project Intro

      • نوار ناوبری و ویترین Navbar & Showcase

      • پاورقی و ورود به سیستم Footer & Login Modal

      پروژه 3 - مدمین Project 3 - Madmin

      • معرفی پروژه Project Intro

      • نوار ناوبری و Sidenav Navbar & Sidenav

      • نوار ناوبری و Sidenav Navbar & Sidenav

      • شمارنده های آمار و پیش بارگزار Stat Counters & Preloader

      • نمایش نمودار و نظرات اخیر Display Chart & Recent Comments

      • پست های اخیر و لیست کارها Recent Posts & Todo List

      • پست های اخیر و لیست کارها Recent Posts & Todo List

      • دکمه شناور و مدال Floating Button & Modals

      • صفحات پست ها و دسته ها Posts & Categories Pages

      • نظرات و صفحات کاربران Comments & Users Pages

      • نظرات و صفحات کاربران Comments & Users Pages

      • صفحات ورود و جزئیات Login & Details Pages

      پروژه 3 - مدمین Project 3 - Madmin

      • معرفی پروژه Project Intro

      • نوار ناوبری و Sidenav Navbar & Sidenav

      • شمارنده های آمار و پیش بارگزار Stat Counters & Preloader

      • نمایش نمودار و نظرات اخیر Display Chart & Recent Comments

      • دکمه شناور و مدال Floating Button & Modals

      • صفحات پست ها و دسته ها Posts & Categories Pages

      • صفحات ورود و جزئیات Login & Details Pages

      پروژه 4 - BizLand Project 4 - BizLand

      • معرفی پروژه Project Intro

      • معرفی پروژه Project Intro

      • هدر تمام صفحه Full Screen Header

      • هدر تمام صفحه Full Screen Header

      • ScrollFire & Boxes ScrollFire & Boxes

      • ScrollFire & Boxes ScrollFire & Boxes

      • درباره، توصیفات و ScrollSpy About, Testimonials & ScrollSpy

      • درباره، توصیفات و ScrollSpy About, Testimonials & ScrollSpy

      • تماس و نقشه گوگل Contact & Google Map

      • تماس و نقشه گوگل Contact & Google Map

      پروژه 4 - BizLand Project 4 - BizLand

      • معرفی پروژه Project Intro

      پروژه 5 - Galappear (با Sass) Project 5 - Galappear (With Sass)

      • معرفی پروژه Project Intro

      • معرفی پروژه Project Intro

      • راه اندازی کوالا و ساس Koala Setup & Sass

      • راه اندازی کوالا و ساس Koala Setup & Sass

      • هدر و نوار نوار Header & Navbar

      • هدر و نوار نوار Header & Navbar

      • تغییر و استفاده از متغیرها Changing & Using Variables

      • تغییر و استفاده از متغیرها Changing & Using Variables

      • طرح بندی گالری Gallery Layout

      • Modals & ScrollFire Modals & ScrollFire

      • صفحات داخلی Inner Pages

      پروژه 5 - Galappear (با Sass) Project 5 - Galappear (With Sass)

      • معرفی پروژه Project Intro

      • طرح بندی گالری Gallery Layout

      • Modals & ScrollFire Modals & ScrollFire

      • صفحات داخلی Inner Pages

      نمایش نظرات

      نظری ارسال نشده است.

      آموزش CSS را از ابتدا با 5 پروژه مادیت کنید
      خرید اشتراک و دانلودخرید تکی و دانلود | 210,000 تومان (5روز مهلت دانلود) زمان تقریبی آماده سازی لینک دانلود این دوره آموزشی حدود 2 تا 14 ساعت می باشد.
      جزییات دوره
      10.5 hours
      63
      Udemy (یودمی) Udemy (یودمی)
      (آخرین آپدیت)
      11,250
      4.5 از 5
      دارد
      دارد
      دارد
      Brad Traversy
      جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

      Google Chrome Browser

      Internet Download Manager

      Pot Player

      Winrar

      Brad Traversy Brad Traversy

      توسعه دهنده وب Full Stack و مدرس در Traversy Media