ایجاد وب سایت های پاسخگو با HTML5، CSS3، بوت استرپ و SASS

بنیاد توسعه وب: ساخت 6 وب سایت های خیره کننده با HTML5 و CSS3 (Flexbox، CSS Grid، انیمیشن، SVG، بوت استرپ)

عنوان اصلی : Build Responsive Websites with HTML5, CSS3, Bootstrap & SASS

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

معرفی دوره:
خوش آمدید - بیایید شروع کنیم!
منابع و راه‌اندازی:
منابع [مهم]
منابع [مهم]
اصول HTML :
برچسب های رسانه ای
پیوند صفحه
فرم I
فرم های II
نظرات
لیست
جداول
Inline و Block
شناسه و کلاس ها
معناشناسی HTML:
معناشناسی I
معناشناسی II
موجودیت HTML
CSS Fundamentals 1.0:
انتخاب کنندگان
انتخاب کننده بازی I
Selector Game II
ویژگی / R029
خواص مشترک
CSS Fundamentals 2.0:
مدل جعبه
اندازه جعبه
مقدار مدل جعبه
مقادیر واحد
CSS Fundamentals 3.0 (نمایش و موقعیت ها):
نمایش
نمایش در مقابل دید
موقعیت / R041
شاخص Z
عناصر شبه و کلاس های شبه / R042
CSS Fundamentals 4.0 (طراحی وب واکنشگرا):
پاسخگویی: پرسش رسانه / R043
واحدهای دید: ارتفاع و عرض / R044
پروژه 1 - کارت نمایه:
کد منبع پروژه - Github
Transform / R045
موقعیت / R046
فونت گوگل
طراحی دکمه
Margin Auto در مقابل Text Align Center
سایه جعبه
نمادها
پیشنهاد رنگ
CSS Sequence: Advise
پروژه 2 - صفحه ورود:
کد منبع پروژه - Github
گرادیان پس زمینه
فیلدهای ورودی
رمز عبور را فراموش کرده اید
دکمه ورود
حداقل حداکثر عرض
Layout 1 - Flexbox :
معرفی Flexbox
خواص والدین
املاک کودک
ابزار Flexbox
بازی Flexbox / R063
پروژه 3 - Spotify Clone با استفاده از Flexbox:
کد منبع پروژه - Github
پروژه Flexbox / R075
هدر I
Header II - نشان‌واره
I اصلی / R078
اصلی II / R079
تصویر پس زمینه / R080
پاورقی I / R081
Footer II / R082
پاورقی III
Foter IV / R084
طراحی واکنشگرا: اصلی / R085
طراحی واکنشگرا: سربرگ / R086
طراحی واکنشگرا: پاورقی / R087
متغیرهای I / R088
متغیرهای II / R089
CSS Advanced 1.0:
پس زمینه
کلیپ پس زمینه / R091
خلاصه پس زمینه
Transform / R093
CSS Art: Border and Border Radius
CSS Art: Border Radius / R095
CSS Art: Designing Shapes / R096
CSS Advanced 2.0 (SVG - گرافیک برداری مقیاس پذیر):
SVG: Fundamentals / R098
SVG: طراحی و ابزار
CSS Advanced 3.0 (Transition & Animation):
Transition / R101
انیمیشن I
انیمیشن II / R103
Layout 2 - CSS Grid:
CSS Grid Introduction / R104
سطر و ستون
خواص مشترک
املاک مختصر
منطقه الگوی شبکه
شبکه تودرتو
خواص تراز
CSS Grid Game / R114
Autofit در مقابل تکمیل خودکار / R116
سازگاری مرورگر:
سازگاری مرورگر - کد پیشوند فروشنده
پروژه 4 - صفحه گواهی با استفاده از شبکه CSS:
کد منبع پروژه - Github
پروژه شبکه CSS
کارت بازخورد
CSS ابزار
کارت بازخورد
پاسخگوی تلفن همراه
SASS - پیش پردازنده CSS:
مقدمه SCSS/SASS
مفاهیم - متغیرها، تودرتو
مفاهیم - جزئی، ماژول ها
مفاهیم - گسترش/ارث
مفاهیم - ترکیبات و اپراتورها / R129
پروژه 5 - وب سایت نمونه کارها با استفاده از بوت استرپ:
کد منبع پروژه - Github
معرفی بوت استرپ - نسخه ی نمایشی پروژه
ابزارهای کمکی
چیدمان ها - کانتینر، شبکه
چیدمان ها - کانتینر، شبکه
اجزاء
پروژه نمونه کارها: بخش اصلی
پروژه نمونه کارها: بخش درباره/وبلاگ
پروژه نمونه کارها: بخش تماس
پروژه نمونه کارها: پاورقی
پروژه نمونه کارها: بخش پروژه
تکمیل پروژه
پروژه 6 - صفحه فرود راه اندازی EdTech:
کد منبع پروژه - Github
EdTech Landing Page / R151
راه اندازی اولیه پروژه
ناوبری
بنر بخش I
بنر بخش دوم
انتقال، تبدیل، انیمیشن / R157
تم ساختمان
بخش آمار I / R159
بخش دوم آمار (Flexbox)
بخش اطلاعات / R161
بخش کاری (شبکه CSS) / R162
پاورقی (SVG) / R163
CSS متحرک (کتابخانه CSS)
نوارهای پیمایش / R166
پاسخگویی I - پرسش‌های رسانه / R167
Responsiveness II - Media Queries / R168
منوی همبرگر I
منوی همبرگر II / R170
استقرار - وب سایت شما در وب:
استقرار پروژه با استفاده از Netlify
پاداش: بعد چه؟ :
پاداش: بعد چه؟