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

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

مقدمه و شروع 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