آموزش CSS Layouts Masterclass: ساخت وب سایت های پاسخگو-تطبیقی

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

معرفی Introduction

• مقدمه مسترکلاس Masterclass Introduction

• نمای کلی مستر کلاس Masterclass overview

• چگونه از این مستر کلاس بهترین استفاده را ببریم How to make the best of this Masterclass

• بررسی اجمالی پروژه های مسترکلاس Masterclass Projects Overview

• بررسی اجمالی چیدمان های Masterclass Masterclass Layouts Overview

• بررسی اجمالی تمرینات مسترکلاس Masterclass Exercises Overview

• بیایید نگاهی به یک مثال واقعی از HTML و CSS بیندازیم Let's take a look at a real-world example of HTML and CSS

• بیا شروع کنیم LET’S GET STARTED

مسیر یادگیری مبتدی Beginner Learning Path

• بررسی اجمالی Overview

برپایی Setup

• نصب کد ویژوال استودیو (VS Code) Installing Visual Studio Code (VS Code)

• باز کردن یک پوشه Opening a Folder

• ایجاد یک فایل Creating a File

• نصب برنامه های افزودنی مفید Installing Useful Extensions

• باز کردن مرورگر Opening the Browser

ملزومات HTML HTML Essentials

• بخش مقدمه Section Introduction

• ایجاد اولین صفحه وب Creating Your First Webpage

• سلام دنیا Hello World

• ایجاد محتوا Creating Content

• پیوندها Links

• تصاویر Images

• ورودی ها Inputs

• مفاهیم Semantics

• Block در مقابل Inline Block vs Inline

• Container vs Contained Container vs Contained

• تمرین - صفحه وب Phoxul را کدنویسی کنید (راه حل موجود است) Exercise - Code the Phoxul Webpage (Solution Included)

CSS Essentials CSS Essentials

• بخش مقدمه Section Introduction

• پیوند دادن CSS به HTML Linking CSS to HTML

• درک CSS Understanding CSS

• اعمال یک استایل پایه Applying a Basic Styling

• کلاس های CSS CSS Classes

• مرزهای CSS CSS Borders

• پس زمینه های CSS CSS Backgrounds

• انتخابگرهای ساده CSS CSS Simple Selectors

• ویژگی های قلم CSS CSS Font Properties

• ارتفاع و عرض CSS CSS Height and Width

• واحدهای CSS CSS Units

• ویژگی های متن CSS CSS Text Properties

• انتخابگرهای شبه کلاس CSS CSS Pseudo-Class Selectors

• موقعیت های CSS CSS Positions

• CSS Padding CSS Padding

• حاشیه CSS CSS Margin

• مدل جعبه CSS CSS Box Model

• انتخابگرهای شبه عنصر CSS CSS Pseudo-Element Selectors

• ویژگی CSS CSS Specificity

• انتخابگرهای ویژگی CSS CSS Attribute Selectors

• ویژگی های نمایش CSS CSS Display Properties

• تمرین 1 - به یک عنصر لنگر سبک دهید Exercise 1 – Style an Anchor Element

• تمرین 2 - به یک تصویر سبک دهید Exercise 2 – Style an Image

مسیر یادگیری متوسط Intermediate Learning Path

• بررسی اجمالی Overview

CSS Flexbox – وایت برد و کدنویسی طرح‌بندی‌های CSS CSS Flexbox – Whiteboarding & Coding CSS Layouts

• بخش مقدمه Section Introduction

• طرح 1 - وایت برد پست های وبلاگ در کنار هم Layout 1 – Whiteboarding Blog Posts Side by Side

• طرح 1 – کدنویسی پست های وبلاگ در کنار هم Layout 1 – Coding Blog Posts Side by Side

• طرح 2 - تخته سفید با فاصله پیوندهای ناوبری Layout 2 – Whiteboarding Spaced out Navigation Links

• طرح 2 - کدگذاری پیوندهای ناوبری با فاصله Layout 2 – Coding Spaced out Navigation Links

• طرح 3 - کارت اطلاعات شخصی تخته سفید Layout 3 – Whiteboarding Personal Info Card

• طرح 3 - کدگذاری کارت اطلاعات شخصی Layout 3 – Coding Personal Info Card

• طرح 4 - صفحه ورود به سیستم تخته سفید Layout 4 – Whiteboarding Sign in Page

• طرح 4 - صفحه ورود به سیستم کدنویسی Layout 4 – Coding Sign in Page

• طرح 5 - گالری پاسخگو تخته سفید Layout 5 – Whiteboarding Responsive Gallery

• طرح 5 - کدنویسی گالری پاسخگو Layout 5 – Coding Responsive Gallery

• طرح 6 - فرم خبرنامه تخته سفید Layout 6 – Whiteboarding Newsletter Form

• طرح 6 – کدگذاری فرم خبرنامه Layout 6 – Coding Newsletter Form

• چیدمان 7 – جدول وظایف وایت برد Layout 7– Whiteboarding To-do Schedule

• طرح 7 – برنامه نویسی کارهای انجام شده Layout 7 – Coding To-do Schedule

• طرح 8 - وایت برد یک مدال Layout 8 – Whiteboarding a Modal

• طرح 8 - کدگذاری یک مدال Layout 8 – Coding a Modal

• طرح 9 - ناوبری پاسخگو تخته سفید Layout 9 – Whiteboarding Responsive Navigation

• طرح 9 - کدنویسی ناوبری پاسخگو Layout 9 – Coding Responsive Navigation

• طرح 10 – کارت محصول تخته سفید Layout 10 – Whiteboarding Product Card

• طرح 10 – کدگذاری کارت محصول Layout 10 – Coding Product Card

• طرح 11 - خدمات تخته سفید Layout 11 – Whiteboarding Services

• طرح 11 - خدمات کدگذاری Layout 11 – Coding Services

CSS Grid – Whiteboarding & Coding Layouts CSS CSS Grid –Whiteboarding & Coding CSS Layouts

• بخش مقدمه Section Introduction

• طرح 1 - گالری تمام عرض تخته سفید Layout 1 – Whiteboarding Full-Width Gallery

• طرح 1 - کدگذاری گالری تمام عرض Layout 1 – Coding Full-Width Gallery

• طرح 2 – پاورقی چسبنده تخته سفید Layout 2 – Whiteboarding Sticky Footer

• طرح 2 - کدنویسی پاورقی چسبنده Layout 2 – Coding Sticky Footer

• طرح 3 - وایت برد پست های وبلاگ Layout 3 – Whiteboarding Blog Posts

• طرح 3 - کدگذاری پست های وبلاگ Layout 3 – Coding Blog Posts

• طرح 4 - جداول قیمت گذاری تخته سفید Layout 4 – Whiteboarding Pricing Tables

• طرح 4 - جدول های قیمت گذاری کدگذاری Layout 4 – Coding Pricing Tables

• طرح 5 - وایت برد یک جزء قیمت گذاری Layout 5 – Whiteboarding A Pricing Component

• طرح 5 - کدگذاری یک جزء قیمت گذاری Layout 5 – Coding A Pricing Component

• طرح 6 - شبکه گالری تخته سفید Layout 6 – Whiteboarding Gallery Grid

• طرح 6 - شبکه گالری کدگذاری Layout 6 – Coding Gallery Grid

• طرح 7 - شبکه محصول پاسخگو تخته سفید Layout 7 – Whiteboarding Responsive Product Grid

• Layout 7 – Coding Product Grid Responsive – Part 1 Layout 7 – Coding Responsive Product Grid – Part 1

• Layout 7 – Coding Product Grid Responsive – قسمت 2 Layout 7 – Coding Responsive Product Grid – Part 2

• طرح 8 - صفحه ثبت نام تخته سفید Layout 8 – Whiteboarding Sign Up Page

• طرح 8 – صفحه ثبت نام کدنویسی Layout 8 – Coding Sign Up Page

• طرح 9 - تخته سفید محصولات ویژه Layout 9 – Whiteboarding Featured Products

• طرح 9 - کدگذاری محصولات ویژه Layout 9 – Coding Featured Products

• Layout 10 – Whiteboarding About بخش Layout 10 – Whiteboarding About Section

• Layout 10 – Coding About بخش Layout 10 – Coding About Section

کدنویسی رابط کاربری وب سایت Phoxul Coding the UI of the Phoxul Website

• سازماندهی کد HTML بخش هدر Organizing The Header Section HTML Code

• سازماندهی کد HTML بخش قهرمان Organizing The Hero Section HTML Code

• سازماندهی کد HTML بخش اطلاعات شخصی Organizing The Personal Info Section HTML Code

• سازماندهی کد HTML بخش خدمات Organizing The Services Section HTML Code

• سازماندهی کد HTML بخش اخبار Organizing The News Section HTML Code

• سازماندهی کد HTML بخش Works Organizing The Works Section HTML Code

• سازماندهی کد HTML بخش تماس Organizing The Contact Section HTML Code

• سازماندهی کد HTML بخش مشتریان Organizing The Clients Section HTML Code

• سازماندهی کد HTML بخش پاورقی Organizing The Footer Section HTML Code

• راه اندازی - منابع خارجی Setup – External Resources

• راه اندازی – ایجاد سبک های عمومی قسمت 1 Setup – Creating General Styles Part 1

• راه اندازی – ایجاد سبک های عمومی قسمت 2 Setup – Creating General Styles Part 2

• راه اندازی – ایجاد سبک های عمومی قسمت 3 Setup – Creating General Styles Part 3

• راه اندازی – ایجاد کلاس های کاربردی Setup – Creating Utility Classes

• راه اندازی - ایجاد طرح بندی کلی Setup – Creating Overall Layout

• حالت دادن به بخش سرصفحه Styling The Header Section

• سبک دادن به بخش قهرمان Styling The Hero Section

• سبک دادن به بخش اطلاعات شخصی Styling The Personal Info Section

• استایل بخشیدن به بخش خدمات Styling The Services Section

• سبک دادن به بخش اخبار Styling The News Section

• سبک دادن به بخش آثار Styling The Works Section

• حالت دادن به بخش تماس Styling The Contact Section

• سبک دادن به بخش مشتریان Styling The Clients Section

• حالت دادن به بخش پاورقی Styling The Footer Section

ریسپانسیو کردن وب سایت Phoxul Making the Phoxul Website Responsive

• بخش مقدمه Section Introduction

• پاسخگو کردن بخش هدر Making The Header Section Responsive

• پاسخگو ساختن بخش قهرمان Making The Hero Section Responsive

• پاسخگو کردن بخش اطلاعات شخصی Making The Personal Info Section Responsive

• پاسخگو کردن بخش خدمات Making The Services Section Responsive

• پاسخگو کردن بخش اخبار Making The News Section Responsive

• پاسخگو کردن بخش آثار Making The Works Section Responsive

• پاسخگو کردن بخش تماس Making The Contact Section Responsive

• پاسخگو کردن بخش پاورقی Making The Footer Section Responsive

CSS Flexbox Exercis – Layouts & Components رایج CSS Flexbox Exercises – Common Layouts & Components

• بخش مقدمه Section Introduction

• صفحه پرداخت Checkout Page

• بخش نوار ناوبری Navbar Section

• بخش سرصفحه Header Section

• بخش پاورقی Footer Section

• نظرات مشتریان Customer Reviews

• چرخ فلک محصول Product Carousel

• خلاصه سفارش Order Summary

• جزئیات محصول Product Details

• سبد محصولات Product Portfolio

• بخش تیم ها Teams Section

تمرینات شبکه CSS – چیدمان ها و اجزای رایج CSS Grid Exercises – Common Layouts & Components

• بخش مقدمه Section Introduction

• بخش Call to Action Call to Action Section

• بخش تیم Team Section

• بخش تماس Contact Section

• بخش نوار ناوبری Navbar Section

• بخش سرصفحه Header Section

• چرخ فلک محصول Product Carousel

• سبد خرید Shopping Cart

• بخش پاورقی Footer Section

• فرم ثبت نام Sign Up Form

• گالری واکنش گرا Responsive Gallery

مسیر یادگیری پیشرفته Advanced Learning Path

• بررسی اجمالی Overview

پروژه EventGrids – ساخت یک وب سایت پاسخگو (از جمله Sass) EventGrids Project – Building a Responsive Website (Including Sass)

• بخش مقدمه Section Introduction

• شروع کار با Sass Getting Started with Sass

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

• گردش کار پروژه قسمت 1 - سازمان Project Workflow Part 1 – Organization

• گردش کار پروژه قسمت 2 - Sass Partals Project Workflow Part 2 – Sass Partials

• گردش کار پروژه قسمت 3 - سبک های عنصر Project Workflow Part 3 – Element Styles

• گردش کار پروژه قسمت 4 - متغیرهای رنگ Project Workflow Part 4 – Color Variables

• گردش کار پروژه قسمت 5 - متغیرهای گرادیان Project Workflow Part 5 – Gradient Variables

• گردش کار پروژه قسمت 6 - متغیرهای padding Project Workflow Part 6 – Padding Variables

• گردش کار پروژه قسمت 7 - متغیرهای تایپوگرافی Project Workflow Part 7 – Typography Variables

• گردش کار پروژه قسمت 8 - طرح کلی + تنظیم مجدد Project Workflow Part 8 – Overall Layout + Reset

• کدگذاری بخش سرصفحه Coding the Header Section

• سبک دادن به بخش هدر - قسمت 1 Styling the Header Section - Part 1

• سبک دادن به بخش هدر - قسمت 2 Styling the Header Section - Part 2

• حالت دادن به بخش هدر - قسمت 3 Styling the Header Section - Part 3

• پاسخگو کردن بخش هدر قسمت 1 Making the Header Section Responsive Part 1

• پاسخگو کردن بخش هدر قسمت 2 Making the Header Section Responsive Part 2

• کدگذاری بخش شمارش معکوس Coding the Countdown Section

• حالت دادن به بخش شمارش معکوس Styling the Countdown Section

• پاسخگو کردن بخش شمارش معکوس Making the Countdown Section Responsive

• کدگذاری بخش ویژگی ها Coding the Features Section

• بخش 1 استایل دادن به ویژگی ها Styling the Features Section Part 1

• بخش 2 استایل دادن به ویژگی ها Styling the Features Section Part 2

• کدنویسی بخش About Coding the About Section

• استایل دادن به بخش درباره Styling the About Section

• پاسخگو کردن بخش درباره Making the About Section Responsive

• کدگذاری بخش سخنرانان Coding the Speakers Section

• استایل بخشیدن به بخش بلندگوها Styling the Speakers Section

• کدگذاری بخش رویدادها Coding the Events Section

• سبک دادن به بخش رویدادها Styling the Events Section

• پاسخگو کردن بخش رویدادها Making the Events Section Responsive

• کدگذاری بخش قیمت گذاری Coding the Pricing Section

• سبک دادن به بخش قیمت گذاری Styling the Pricing Section

• کدگذاری بخش توصیفات Coding the Testimonials Section

• سبک بخشیدن به بخش توصیفات Styling the Testimonials Section

• کدگذاری بخش وبلاگ ها Coding the Blogs Section

• استایل بخشیدن به بخش وبلاگ ها Styling the Blogs Section

• کدگذاری بخش CTA Coding the CTA Section

• حالت دادن به بخش CTA Styling the CTA Section

• کدگذاری بخش پاورقی Coding the Footer Section

• حالت دادن به بخش پاورقی Styling the Footer Section

• پاسخگو کردن بخش پاورقی Making the Footer Section Responsive

• کدگذاری صفحه گالری Coding the Gallery Page

• طراحی صفحه گالری Styling the Gallery Page

• ترتیب صفحه قیمت گذاری Arranging the Pricing Page

• تنظیم صفحه زمانبندی Arranging the Schedule Page

• تنظیم صفحه سخنرانان Arranging the Speakers Page

• کدگذاری صفحه وبلاگ Coding the Blog Page

• طراحی صفحه وبلاگ Styling the Blog Page

• ریسپانسیو کردن صفحه وبلاگ Making the Blog Page Responsive

• کدگذاری صفحه تماس Coding the Contact Page

• طراحی صفحه تماس Styling the Contact Page

• ریسپانسیو کردن صفحه تماس Making the Contact Page Responsive

پروژه طراحی Mobile First – ساخت یک وب سایت تطبیقی ​​(از جمله Sass) Mobile First Design Project – Building an Adaptive Website (Including Sass)

• بخش مقدمه Section Introduction

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

• گردش کار پروژه قسمت 1 - سازمان Project Workflow Part 1 – Organization

• گردش کار پروژه قسمت 2 - متغیرهای سفارشی Project Workflow Part 2 – Custom Variables

• کدگذاری بخش سرصفحه Coding the Header Section

• حالت دادن به بخش هدر Styling the Header Section

• تطبیق بخش هدر Making the Header Section Adaptive

• کدگذاری بخش قهرمان Coding the Hero Section

• سبک دادن به بخش قهرمان Styling the Hero Section

• ساختن بخش قهرمان تطبیقی Making the Hero Section Adaptive

• کدگذاری بخش ترینر Coding the Trainer Section

• سبک دادن به بخش مربی Styling the Trainer Section

• تطبیق بخش ترینر Making the Trainer Section Adaptive

• کدگذاری بخش ویژگی ها Coding the Features Section

• حالت دادن به بخش ویژگی ها Styling the Features Section

• تطبیق بخش ویژگی ها Making the Features Section Adaptive

• کدنویسی بخش About Coding the About Section

• استایل دادن به بخش درباره Styling the About Section

• تطبیقی ​​بخش درباره Making the About Section Adaptive

• کدگذاری بخش گالری Coding the Gallery Section

• استایل بخشیدن به بخش گالری Styling the Gallery Section

• تطبیق بخش گالری Making the Gallery Section Adaptive

• کدگذاری بخش قیمت گذاری Coding the Pricing Section

• سبک دادن به بخش قیمت گذاری Styling the Pricing Section

• تطبیق بخش قیمت گذاری Making the Pricing Section Adaptive

• کدگذاری بخش گواهی Coding the Testimonial Section

• مدل دادن به بخش گواهینامه Styling the Testimonial Section

• تطبیق بخش گواهینامه Making the Testimonial Section Adaptive

• کدگذاری بخش تماس Coding the Contact Section

• استایل بخشیدن به بخش تماس Styling the Contact Section

• تطبیق بخش تماس Making the Contact Section Adaptive

• کدگذاری بخش پاورقی Coding the Footer Section

• حالت دادن به بخش پاورقی Styling the Footer Section

• ساخت بخش پاورقی تطبیقی Making the Footer Section Adaptive

• گسترش Deployment

بسته شدن Wrap Up

• جمع بندی + مراحل بعدی Wrap Up + Next Steps