آموزش ساخت وب سایت های واکنش گرا با HTML5، CSS3، Bootstrap و SASS [ویدئو]

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

معرفی Introduction

• معرفی دوره و بررسی برنامه درسی Course Introduction and Curriculum Walkthrough

منابع و راه اندازی Resources and Setup

• منابع Resources

• وب چگونه کار می کند؟ How Web Works?

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

اصول HTML HTML Fundamentals

• مقدمه HTML HTML Introduction

• بخش سر Head Section

• تگ های HTML HTML tags

• تگ های رسانه ای Media Tags

• صفحه پیوند دادن Linking page

• فرم های I Forms I

• فرم II Form II

• نظرات Comments

• فهرست کنید List

• جداول Tables

• درون خطی و مسدود کردن Inline and Block

• شناسه و کلاس ها ID and Classes

معناشناسی HTML HTML Semantics

• معناشناسی I Semantics I

• معناشناسی I Semantics I

• معناشناسی II Semantics II

• معناشناسی II Semantics II

• موجودیت HTML HTML Entity

• موجودیت HTML HTML Entity

معناشناسی HTML HTML Semantics

CSS Fundamentals 1.0 CSS Fundamentals 1.0

• مقدمه ای بر CSS Introduction to CSS

• مقدمه ای بر CSS Introduction to CSS

• انواع CSS و سفارش CSS types and Order

• انواع CSS و سفارش CSS types and Order

• انتخابگرها Selectors

• انتخابگرها Selectors

• انتخابگر بازی I Selector Game I

• انتخابگر بازی I Selector Game I

• انتخابگر بازی II Selector Game II

• انتخابگر بازی II Selector Game II

• اختصاصی Specificity

• اختصاصی Specificity

• خواص مشترک Common Properties

• خواص مشترک Common Properties

CSS Fundamentals 1.0 CSS Fundamentals 1.0

CSS Fundamentals 2.0 CSS Fundamentals 2.0

• مدل جعبه Box Model

• مدل جعبه Box Model

• اندازه جعبه Box Sizing

• اندازه جعبه Box Sizing

• مقادیر مدل جعبه Box Model Values

• مقادیر مدل جعبه Box Model Values

• مقادیر واحد Unit Values

• مقادیر واحد Unit Values

CSS Fundamentals 2.0 CSS Fundamentals 2.0

CSS Fundamentals 3.0 (نمایش و موقعیت ها) CSS Fundamentals 3.0 (Display and Positions)

• نمایش دادن Display

• نمایش دادن Display

• نمایش در مقابل دید Display Versus Visibility

• نمایش در مقابل دید Display Versus Visibility

• موقعیت Position

• موقعیت Position

• شاخص Z Z Index

• شاخص Z Z Index

• عناصر شبه و کلاس های شبه Pseudo Elements and Pseudo Classes

• عناصر شبه و کلاس های شبه Pseudo Elements and Pseudo Classes

CSS Fundamentals 3.0 (نمایش و موقعیت ها) CSS Fundamentals 3.0 (Display and Positions)

CSS Fundamentals 4.0 (طراحی وب واکنشگرا) CSS Fundamentals 4.0 (Responsive Web Design)

• پاسخگویی: پرسش رسانه ای Responsiveness: Media Query

• پاسخگویی: پرسش رسانه ای Responsiveness: Media Query

• واحدهای نما: ارتفاع و عرض Viewport Units: Height and Width

• واحدهای نما: ارتفاع و عرض Viewport Units: Height and Width

CSS Fundamentals 4.0 (طراحی وب واکنشگرا) CSS Fundamentals 4.0 (Responsive Web Design)

پروژه 1 - کارت پروفایل Project 1 – Profile Card

• تبدیل Transform

• تبدیل Transform

• موقعیت Position

• موقعیت Position

• فونت گوگل Google Font

• فونت گوگل Google Font

• طراحی دکمه Button Design

• طراحی دکمه Button Design

• حاشیه خودکار در مقابل مرکز تراز متن Margin Auto Versus Text Align Center

• حاشیه خودکار در مقابل مرکز تراز متن Margin Auto Versus Text Align Center

• سایه جعبه Box Shadow

• سایه جعبه Box Shadow

• نمادها Icons

• نمادها Icons

• پیشنهاد رنگ Color Suggestion

• پیشنهاد رنگ Color Suggestion

• دنباله CSS: مشاوره CSS Sequence: Advise

• دنباله CSS: مشاوره CSS Sequence: Advise

پروژه 1 - کارت پروفایل Project 1 – Profile Card

پروژه 2 - صفحه ورود Project 2 – Login Page

• گرادیان پس زمینه Background Gradient

• گرادیان پس زمینه Background Gradient

• فیلدهای ورودی Input fields

• فیلدهای ورودی Input fields

• رمز عبور را فراموش کرده اید Forgot Password

• رمز عبور را فراموش کرده اید Forgot Password

• دکمه ورود Login Button

• دکمه ورود Login Button

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

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

پروژه 2 - صفحه ورود Project 2 – Login Page

طرح 1 - Flexbox Layout 1 – Flexbox

• معرفی فلکس باکس Flexbox Introduction

• معرفی فلکس باکس Flexbox Introduction

• ویژگی های والدین Parent Properties

• ویژگی های والدین Parent Properties

• اموال کودک Child Properties

• اموال کودک Child Properties

• ابزار Flexbox Flexbox Tool

• ابزار Flexbox Flexbox Tool

• بازی فلکس باکس Flexbox Game

• بازی فلکس باکس Flexbox Game

طرح 1 - Flexbox Layout 1 – Flexbox

پروژه 3 - Spotify Clone با استفاده از Flexbox Project 3 – Spotify Clone Using Flexbox

• پروژه فلکس باکس Flexbox Project

• پروژه فلکس باکس Flexbox Project

• هدر I Header I

• هدر I Header I

• هدر II - لوگو Header II - Logo

• هدر II - لوگو Header II - Logo

• من اصلی Main I

• من اصلی Main I

• اصلی II Main II

• اصلی II Main II

• تصویر پس زمینه Background Image

• تصویر پس زمینه Background Image

• پاورقی I Footer I

• پاورقی I Footer I

• پاورقی II Footer II

• پاورقی II Footer II

• پاورقی III Footer III

• پاورقی III Footer III

• پاورقی IV Footer IV

• پاورقی IV Footer IV

• طراحی واکنشگرا: اصلی Responsive Design: Main

• طراحی واکنشگرا: اصلی Responsive Design: Main

• طراحی واکنشگرا: سربرگ Responsive Design: Header

• طراحی واکنشگرا: سربرگ Responsive Design: Header

• طراحی واکنشگرا: پاورقی Responsive Design: Footer

• طراحی واکنشگرا: پاورقی Responsive Design: Footer

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

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

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

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

پروژه 3 - Spotify Clone با استفاده از Flexbox Project 3 – Spotify Clone Using Flexbox

CSS Advanced 1.0 CSS Advanced 1.0

• پس زمینه ها Backgrounds

• پس زمینه ها Backgrounds

• کلیپ پس زمینه Background Clip

• کلیپ پس زمینه Background Clip

• مخفف پس زمینه Background Shorthand

• مخفف پس زمینه Background Shorthand

• تبدیل Transform

• تبدیل Transform

• CSS Art: Border and Border Radius CSS Art: Border and Border Radius

• CSS Art: Border and Border Radius CSS Art: Border and Border Radius

• هنر CSS: شعاع مرزی CSS Art: Border Radius

• هنر CSS: شعاع مرزی CSS Art: Border Radius

• هنر CSS: طراحی اشکال CSS Art: Designing Shapes

• هنر CSS: طراحی اشکال CSS Art: Designing Shapes

CSS Advanced 1.0 CSS Advanced 1.0

CSS Advanced 2.0 (SVG – گرافیک برداری مقیاس پذیر) CSS Advanced 2.0 (SVG – Scalable Vector Graphics)

• SVG: اصول SVG: Fundamentals

• SVG: اصول SVG: Fundamentals

• SVG: طراحی و ابزار SVG: Design and Tools

• SVG: طراحی و ابزار SVG: Design and Tools

CSS Advanced 2.0 (SVG – گرافیک برداری مقیاس پذیر) CSS Advanced 2.0 (SVG – Scalable Vector Graphics)

CSS Advanced 3.0 (انتقال و انیمیشن) CSS Advanced 3.0 (Transition and Animation)

• انتقال Transition

• انتقال Transition

• انیمیشن های I Animations I

• انیمیشن های I Animations I

• انیمیشن II Animations II

• انیمیشن II Animations II

CSS Advanced 3.0 (انتقال و انیمیشن) CSS Advanced 3.0 (Transition and Animation)

Layout 2 – CSS Grid Layout 2 – CSS Grid

• CSS Grid معرفی CSS Grid Introduction

• CSS Grid معرفی CSS Grid Introduction

• سطرها و ستون ها Rows and Columns

• سطرها و ستون ها Rows and Columns

• خواص مشترک Common Properties

• خواص مشترک Common Properties

• اموال مختصر Shorthand Property

• اموال مختصر Shorthand Property

• منطقه قالب شبکه Grid Template Area

• منطقه قالب شبکه Grid Template Area

• شبکه تو در تو Nested Grid

• شبکه تو در تو Nested Grid

• ویژگی های تراز کردن Align Properties

• ویژگی های تراز کردن Align Properties

• بازی شبکه CSS CSS Grid Game

• بازی شبکه CSS CSS Grid Game

• تنظیم خودکار در مقابل تکمیل خودکار Autofit Versus Autofill

• تنظیم خودکار در مقابل تکمیل خودکار Autofit Versus Autofill

Layout 2 – CSS Grid Layout 2 – CSS Grid

سازگاری مرورگر Browser Compatibility

• سازگاری مرورگر - کد پیشوند فروشنده Browser Compatibility - Vendor Prefix Code

• سازگاری مرورگر - کد پیشوند فروشنده Browser Compatibility - Vendor Prefix Code

سازگاری مرورگر Browser Compatibility

پروژه 4 - صفحه گواهی با استفاده از شبکه CSS Project 4 – Testimonial Page Using CSS Grid

• پروژه شبکه CSS CSS Grid Project

• پروژه شبکه CSS CSS Grid Project

• کارت بازخورد Feedback Card

• کارت بازخورد Feedback Card

• CSS ابزار Utility CSS

• CSS ابزار Utility CSS

• کارت بازخورد - قسمت 2 Feedback Card – Part 2

• کارت بازخورد - قسمت 2 Feedback Card – Part 2

• موبایل ریسپانسیو Mobile Responsive

• موبایل ریسپانسیو Mobile Responsive

پروژه 4 - صفحه گواهی با استفاده از شبکه CSS Project 4 – Testimonial Page Using CSS Grid

SASS – پیش پردازنده CSS SASS – CSS Preprocessor

• SCSS/SASS مقدمه SCSS/SASS Introduction

• SCSS/SASS مقدمه SCSS/SASS Introduction

• مفاهیم - متغیرها و تودرتو Concepts - Variables and Nesting

• مفاهیم - متغیرها و تودرتو Concepts - Variables and Nesting

• مفاهیم - جزئی و ماژول Concepts - Partials and Modules

• مفاهیم - جزئی و ماژول Concepts - Partials and Modules

• مفاهیم - گسترش/ارث بردن Concepts - Extend/Inheritance

• مفاهیم - گسترش/ارث بردن Concepts - Extend/Inheritance

• مفاهیم - ترکیبات و اپراتورها Concepts - Mixins and Operators

• مفاهیم - ترکیبات و اپراتورها Concepts - Mixins and Operators

SASS – پیش پردازنده CSS SASS – CSS Preprocessor

راه اندازی پروژه Project Setup

• معرفی بوت استرپ - نسخه ی نمایشی پروژه Bootstrap Introduction - Project Demo

• معرفی بوت استرپ - نسخه ی نمایشی پروژه Bootstrap Introduction - Project Demo

• خدمات رفاهی Utilities

• خدمات رفاهی Utilities

• چیدمان ها - کانتینر، شبکه Layouts - Container, Grid

• چیدمان ها - کانتینر، شبکه Layouts - Container, Grid

• Layouts - Container, Grid Part 2 Layouts - Container, Grid part 2

• Layouts - Container, Grid Part 2 Layouts - Container, Grid part 2

• اجزاء Components

• اجزاء Components

• پروژه نمونه کارها: بخش اصلی Portfolio Project: Main Section

• پروژه نمونه کارها: بخش اصلی Portfolio Project: Main Section

• پروژه نمونه کارها: بخش درباره/وبلاگ Portfolio Project: About/Blog Section

• پروژه نمونه کارها: بخش درباره/وبلاگ Portfolio Project: About/Blog Section

• پروژه نمونه کارها: بخش تماس Portfolio Project: Contact Section

• پروژه نمونه کارها: بخش تماس Portfolio Project: Contact Section

• پروژه نمونه کارها: پاورقی Portfolio Project: Footer

• پروژه نمونه کارها: پاورقی Portfolio Project: Footer

• پروژه نمونه کارها: بخش پروژه Portfolio Project: Project Section

• پروژه نمونه کارها: بخش پروژه Portfolio Project: Project Section

• تکمیل پروژه Project Completion

• تکمیل پروژه Project Completion

راه اندازی پروژه Project Setup

پروژه 6 – صفحه فرود راه اندازی EdTech Project 6 – EdTech Startup Landing Page

• صفحه فرود EdTech EdTech Landing Page

• صفحه فرود EdTech EdTech Landing Page

• راه اندازی اولیه پروژه Initial Project Setup

• راه اندازی اولیه پروژه Initial Project Setup

• جهت یابی Navigation

• جهت یابی Navigation

• بنر بخش I Banner Section I

• بنر بخش I Banner Section I

• بنر بخش دوم Banner Section II

• بنر بخش دوم Banner Section II

• انتقال، تبدیل، انیمیشن Transition, Transform, Animation

• انتقال، تبدیل، انیمیشن Transition, Transform, Animation

• تم ساختمان Building Theme

• تم ساختمان Building Theme

• بخش اول آمار Stats Section I

• بخش اول آمار Stats Section I

• بخش دوم آمار (Flexbox) Stats Section II (Flexbox)

• بخش دوم آمار (Flexbox) Stats Section II (Flexbox)

• بخش اطلاعات Information Section

• بخش اطلاعات Information Section

• بخش کاری (شبکه CSS) Working Section (CSS Grid)

• بخش کاری (شبکه CSS) Working Section (CSS Grid)

• پاورقی (SVG) Footer (SVG)

• پاورقی (SVG) Footer (SVG)

• متحرک سازی CSS (کتابخانه CSS) Animate CSS (CSS Library)

• متحرک سازی CSS (کتابخانه CSS) Animate CSS (CSS Library)

• نوارهای اسکرول Scroll Bars

• نوارهای اسکرول Scroll Bars

• پاسخگویی I - پرسش های رسانه ای Responsiveness I - Media Queries

• پاسخگویی I - پرسش های رسانه ای Responsiveness I - Media Queries

• پاسخگویی II - پرسش های رسانه ای Responsiveness II - Media Queries

• پاسخگویی II - پرسش های رسانه ای Responsiveness II - Media Queries

• منوی همبرگر I Hamburger Menu I

• منوی همبرگر I Hamburger Menu I

• منوی همبرگر II Hamburger Menu II

• منوی همبرگر II Hamburger Menu II

پروژه 6 – صفحه فرود راه اندازی EdTech Project 6 – EdTech Startup Landing Page

استقرار - وب سایت شما در وب Deployment – Your Website on the Web

• استقرار پروژه با استفاده از Netlify Project Deployment Using Netlify

• استقرار پروژه با استفاده از Netlify Project Deployment Using Netlify

استقرار - وب سایت شما در وب Deployment – Your Website on the Web

نتیجه گیری دوره Course Conclusion

• بسته شدن Wrap Up

• بسته شدن Wrap Up

نتیجه گیری دوره Course Conclusion