آموزش طراحی وب سایت مدرن واکنش گرا CSS - ایجاد پنج وب سایت مختلف [ویدئو]

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

اطلاعات دوره CSS CSS Course Information

• مقدمه ای بر شروع طراحی وب CSS برای دوره مبتدی Introduction to Getting Started with CSS Web Design for a Beginner's Course

• مقدمه ای بر شروع طراحی وب CSS برای دوره مبتدی Introduction to Getting Started with CSS Web Design for a Beginner's Course

• افزودن CSS به صفحه HTML خود از فایل CSS Adding CSS to Your HTML Page from CSS File

• افزودن CSS به صفحه HTML خود از فایل CSS Adding CSS to Your HTML Page from CSS File

• نحوه انتخاب عناصر صفحه CSS HTML صفحه انتخاب عنصر How to Select Page Elements CSS HTML Page Element Selection

• نحوه انتخاب عناصر صفحه CSS HTML صفحه انتخاب عنصر How to Select Page Elements CSS HTML Page Element Selection

• تنظیم رنگ برای متن و پس زمینه با CSS افزودن تصاویر به رنگ عناصر Setting Colors for Text and Backgrounds with CSS Adding Images to Elements Color

• تنظیم رنگ برای متن و پس زمینه با CSS افزودن تصاویر به رنگ عناصر Setting Colors for Text and Backgrounds with CSS Adding Images to Elements Color

• مدل جعبه CSS چیست و چگونه می توان حاشیه حاشیه برای عناصر را تنظیم کرد What Is the CSS Box Model and How to Set Border Margin Padding for Elements

• مدل جعبه CSS چیست و چگونه می توان حاشیه حاشیه برای عناصر را تنظیم کرد What Is the CSS Box Model and How to Set Border Margin Padding for Elements

• نحوه اعمال CSS برای تنظیم متن، طراحی و تغییر شکل قلم به متن How to Apply CSS to Text Setting Font Styling Text Decoration and Transformation

• نحوه اعمال CSS برای تنظیم متن، طراحی و تغییر شکل قلم به متن How to Apply CSS to Text Setting Font Styling Text Decoration and Transformation

• چگونه مقادیر نمایش عنصر را تنظیم کنیم و چه چیزی را نمایش نمی‌دهد در مقابل ویژگی دید How to Set the Element Display Values and What Display None Does Versus Visibility Property

• چگونه مقادیر نمایش عنصر را تنظیم کنیم و چه چیزی را نمایش نمی‌دهد در مقابل ویژگی دید How to Set the Element Display Values and What Display None Does Versus Visibility Property

• روش موقعیت CSS برای عنصر صفحه HTML مطلق نسبی ثابت استاتیک CSS Position Method for HTML Page Element Absolute Relative Fixed Static

• روش موقعیت CSS برای عنصر صفحه HTML مطلق نسبی ثابت استاتیک CSS Position Method for HTML Page Element Absolute Relative Fixed Static

• نحوه استفاده از Float برای تنظیم تصاویر در یک خط با متن و قرار دادن عناصر با CSS How to Use Float to Set Images in Line with Text and Position Elements with CSS

• نحوه استفاده از Float برای تنظیم تصاویر در یک خط با متن و قرار دادن عناصر با CSS How to Use Float to Set Images in Line with Text and Position Elements with CSS

• کلاس‌های شبه CSS برای جلوه‌های شناور و موارد دیگر. محتوای تعاملی CSS ایجاد کنید CSS Pseudo-Classes for Hover Effects and More; Create Interactive Content CSS

• کلاس‌های شبه CSS برای جلوه‌های شناور و موارد دیگر. محتوای تعاملی CSS ایجاد کنید CSS Pseudo-Classes for Hover Effects and More; Create Interactive Content CSS

• CSS شبه عناصر افزودن محتوا به عناصر صفحه با CSS Pseudo-Elements CSS Adding Content to Page Elements with CSS

• CSS شبه عناصر افزودن محتوا به عناصر صفحه با CSS Pseudo-Elements CSS Adding Content to Page Elements with CSS

• نحوه ایجاد یک قالب ساده با استفاده از طرح بندی شناور CSS با وب سایت سه ستونی CSS How to Create a Simple Template Using CSS Float Layout with CSS Three-Column Website

• نحوه ایجاد یک قالب ساده با استفاده از طرح بندی شناور CSS با وب سایت سه ستونی CSS How to Create a Simple Template Using CSS Float Layout with CSS Three-Column Website

• یک طرح بندی وب سایت سه ستونی با طراحی ساده طرح بندی CSS Flexbox ایجاد کنید Create a Three-column Website Layout with CSS Flexbox Simple Layout Design

• یک طرح بندی وب سایت سه ستونی با طراحی ساده طرح بندی CSS Flexbox ایجاد کنید Create a Three-column Website Layout with CSS Flexbox Simple Layout Design

• قالب وب سایت سه ستونی مدرن ریسپانسیو با طراحی طرح بندی سریع شبکه CSS Modern Responsive Three-Column Website Template with CSS Grid Quick Layout Design

• قالب وب سایت سه ستونی مدرن ریسپانسیو با طراحی طرح بندی سریع شبکه CSS Modern Responsive Three-Column Website Template with CSS Grid Quick Layout Design

ایجاد پنج وب سایت از ابتدا با استفاده از طراحی وب مدرن - HTML، CSS، جاوا اسکریپت Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript

• معرفی Introduction

• معرفی Introduction

• ابزار و منابع دوره Tools and Resources for the Course

• ابزار و منابع دوره Tools and Resources for the Course

ایجاد پنج وب سایت از ابتدا با استفاده از طراحی وب مدرن - HTML، CSS، جاوا اسکریپت Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript

وب سایت های واکنش گرا مدرن با استفاده از Float و CSS برای ایجاد شبکه های قابل استفاده مجدد Modern Responsive Websites Using Float and CSS to Create Reusable Grids

• ایجاد یک وب سایت شناور تک صفحه ای با ساختار شبکه با استفاده از CSS Creating a Single-Page Float Website with a Grid Structure Using CSS

• ایجاد یک وب سایت شناور تک صفحه ای با ساختار شبکه با استفاده از CSS Creating a Single-Page Float Website with a Grid Structure Using CSS

• راه اندازی محیط توسعه وب شما Setting Up Your Web Development Environment

• راه اندازی محیط توسعه وب شما Setting Up Your Web Development Environment

• ایجاد یک وب سایت Wireframe برای برنامه ریزی سایت شما Creating a Website Wireframe to Plan Your Site

• ایجاد یک وب سایت Wireframe برای برنامه ریزی سایت شما Creating a Website Wireframe to Plan Your Site

• اضافه کردن ساختار اصلی HTML Adding the HTML Main Structure

• اضافه کردن ساختار اصلی HTML Adding the HTML Main Structure

• به روز رسانی HTML با Styles Updating HTML with Styles

• به روز رسانی HTML با Styles Updating HTML with Styles

• ایجاد یک نوار ناوبری پاسخگو Creating a Responsive Navbar

• ایجاد یک نوار ناوبری پاسخگو Creating a Responsive Navbar

• ایجاد نوار ناوبری پاسخگو برای موبایل Creating a Mobile-Ready Responsive Navbar

• ایجاد نوار ناوبری پاسخگو برای موبایل Creating a Mobile-Ready Responsive Navbar

• افزودن محتوای بیشتر به بخش بالای وب سایت شما Adding More Content to Your Website's Top Section

• افزودن محتوای بیشتر به بخش بالای وب سایت شما Adding More Content to Your Website's Top Section

• ایجاد یک شبکه CSS برای وب سایت خود با استفاده از Float Creating a CSS Grid for Your Website Using Float

• ایجاد یک شبکه CSS برای وب سایت خود با استفاده از Float Creating a CSS Grid for Your Website Using Float

• افزودن گالری تصاویر Adding an Image Gallery

• افزودن گالری تصاویر Adding an Image Gallery

• ایجاد مناطق محتوا - منطقه محتوای چند ستونی Creating Content Areas – Multiple Columns Content Area

• ایجاد مناطق محتوا - منطقه محتوای چند ستونی Creating Content Areas – Multiple Columns Content Area

• اضافه کردن یک ستون به یک شبکه Adding a Single Column to a Grid

• اضافه کردن یک ستون به یک شبکه Adding a Single Column to a Grid

• ایجاد فرم تماس با استفاده از CSS و HTML Creating a Contact Form Using CSS and HTML

• ایجاد فرم تماس با استفاده از CSS و HTML Creating a Contact Form Using CSS and HTML

• اضافه کردن Mailto به فرم تماس شما Adding Mailto to Your Contact Form

• اضافه کردن Mailto به فرم تماس شما Adding Mailto to Your Contact Form

• اضافه کردن یک سبک به وب سایت شما Adding a Style to Your Website

• اضافه کردن یک سبک به وب سایت شما Adding a Style to Your Website

• افزودن و جابجایی بخش ها در یک وب سایت تک صفحه ای Adding and Moving Sections in a Single-Page Website

• افزودن و جابجایی بخش ها در یک وب سایت تک صفحه ای Adding and Moving Sections in a Single-Page Website

• بررسی وب سایت تک صفحه ای Single-Page Website Review

• بررسی وب سایت تک صفحه ای Single-Page Website Review

وب سایت های واکنش گرا مدرن با استفاده از Float و CSS برای ایجاد شبکه های قابل استفاده مجدد Modern Responsive Websites Using Float and CSS to Create Reusable Grids

وب سایت Flexbox تک صفحه ای با جاوا اسکریپت اسکرول خودکار Single-Page Flexbox Website with Auto-scroll JavaScript

• معرفی وب سایت تک صفحه ای فلکس باکس Single-Page Flexbox Website Introduction

• معرفی وب سایت تک صفحه ای فلکس باکس Single-Page Flexbox Website Introduction

• وب سایت Flexbox: راه اندازی یک صفحه وب Flexbox Website: Setting Up a Webpage

• وب سایت Flexbox: راه اندازی یک صفحه وب Flexbox Website: Setting Up a Webpage

• ایجاد بخش ها در یک وب سایت تک صفحه ای با استفاده از Flexbox Creating Sections in a Single-Page Website Using Flexbox

• ایجاد بخش ها در یک وب سایت تک صفحه ای با استفاده از Flexbox Creating Sections in a Single-Page Website Using Flexbox

• ایجاد نوار ناوبری با استفاده از Flexbox Creating a Navbar Using Flexbox

• ایجاد نوار ناوبری با استفاده از Flexbox Creating a Navbar Using Flexbox

• طراحی و افزودن محتوا به بخش صفحه اصلی Designing and Adding Content to the Home Screen Section

• طراحی و افزودن محتوا به بخش صفحه اصلی Designing and Adding Content to the Home Screen Section

• استفاده از ستون های شبکه سفارشی خود با Flexbox Applying Your Own Custom Grid Columns with Flexbox

• استفاده از ستون های شبکه سفارشی خود با Flexbox Applying Your Own Custom Grid Columns with Flexbox

• ایجاد کارت های صفحه CSS Flexbox با Flexbox Creating CSS Flexbox Page Cards with Flexbox

• ایجاد کارت های صفحه CSS Flexbox با Flexbox Creating CSS Flexbox Page Cards with Flexbox

• ایجاد یک فرم CSS با استفاده از CSS Flexbox Creating a CSS Form Using CSS Flexbox

• ایجاد یک فرم CSS با استفاده از CSS Flexbox Creating a CSS Form Using CSS Flexbox

• ایجاد پاورقی Creating a Footer

• ایجاد پاورقی Creating a Footer

• ایجاد اسکرول صاف با استفاده از جاوا اسکریپت Creating Smooth Scrolling Using JavaScript

• ایجاد اسکرول صاف با استفاده از جاوا اسکریپت Creating Smooth Scrolling Using JavaScript

• افزودن اسکرول روان به وب سایت خود با استفاده از جاوا اسکریپت Adding Smooth Scrolling to Your Website Using JavaScript

• افزودن اسکرول روان به وب سایت خود با استفاده از جاوا اسکریپت Adding Smooth Scrolling to Your Website Using JavaScript

• بررسی وب سایت Flexbox تک صفحه ای Single-Page Flexbox Website Review

• بررسی وب سایت Flexbox تک صفحه ای Single-Page Flexbox Website Review

وب سایت Flexbox تک صفحه ای با جاوا اسکریپت اسکرول خودکار Single-Page Flexbox Website with Auto-scroll JavaScript

چک باکس "بدون جاوا اسکریپت" – وب سایت نوار ناوبری پاسخگو از ابتدا در بخش وب سایت شبکه CSS "No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section

• معرفی وب سایت CSS Grid CSS Grid Website Introduction

• معرفی وب سایت CSS Grid CSS Grid Website Introduction

• آماده سازی طراحی شما – راه اندازی شبکه CSS Preparing Your Design – CSS Grid Setup

• آماده سازی طراحی شما – راه اندازی شبکه CSS Preparing Your Design – CSS Grid Setup

• ایجاد یک وب سایت – CSS Grid Creating a Website – CSS Grid

• ایجاد یک وب سایت – CSS Grid Creating a Website – CSS Grid

• ایجاد یک CSS Grid Responsive Navbar Creating a CSS Grid Responsive Navbar

• ایجاد یک CSS Grid Responsive Navbar Creating a CSS Grid Responsive Navbar

• اضافه کردن یک نوار ناوبری پاسخگو به وب سایت شما Adding a Responsive Navbar to Your Website

• اضافه کردن یک نوار ناوبری پاسخگو به وب سایت شما Adding a Responsive Navbar to Your Website

• ایجاد یک نوار ناوبری تاشو کاملاً پاسخگو Creating a Fully Responsive Collapsible Navbar

• ایجاد یک نوار ناوبری تاشو کاملاً پاسخگو Creating a Fully Responsive Collapsible Navbar

• افزودن محتوای جایگیر Adding Placeholder Content

• افزودن محتوای جایگیر Adding Placeholder Content

• به روز رسانی پاورقی صفحه Updating the Page Footer

• به روز رسانی پاورقی صفحه Updating the Page Footer

• بررسی وب سایت CSS Grid CSS Grid Website Review

• بررسی وب سایت CSS Grid CSS Grid Website Review

چک باکس "بدون جاوا اسکریپت" – وب سایت نوار ناوبری پاسخگو از ابتدا در بخش وب سایت شبکه CSS "No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section

منوی جمع‌شونده جاوا اسکریپت – وب‌سایت CSS Float آماده برای موبایل و کاملاً پاسخگو JavaScript Collapsible Menu – Mobile-Ready and Fully Responsive CSS Float Website

• مقدمه: وب سایت Float واکنش گرا Introduction: Responsive Float Website

• مقدمه: وب سایت Float واکنش گرا Introduction: Responsive Float Website

• وب سایت مدرن: راه اندازی و برنامه ریزی وب سایت Modern Website: Website Setup and Planning

• وب سایت مدرن: راه اندازی و برنامه ریزی وب سایت Modern Website: Website Setup and Planning

• ایجاد یک وب سایت مدرن: راه اندازی HTML اصلی Creating a Modern Website: Set Up Main HTML

• ایجاد یک وب سایت مدرن: راه اندازی HTML اصلی Creating a Modern Website: Set Up Main HTML

• ساخت نوار ناوبری پاسخگو با استفاده از CSS Navbar Styling Making a Responsive Navigation bar Using CSS Navbar Styling

• ساخت نوار ناوبری پاسخگو با استفاده از CSS Navbar Styling Making a Responsive Navigation bar Using CSS Navbar Styling

• ایجاد یک منوی جمع‌بندی پویا با استفاده از نوار ناوبری پاسخگو CSS Making a Dynamic Collapse Menu Using Responsive CSS Navbar

• ایجاد یک منوی جمع‌بندی پویا با استفاده از نوار ناوبری پاسخگو CSS Making a Dynamic Collapse Menu Using Responsive CSS Navbar

• منوی نوار ناوبری آماده برای موبایل با استفاده از نوار ناوبری پاسخگو CSS Mobile-Ready Navbar Menu Using Responsive CSS Navbar

• منوی نوار ناوبری آماده برای موبایل با استفاده از نوار ناوبری پاسخگو CSS Mobile-Ready Navbar Menu Using Responsive CSS Navbar

• افزودن جاوا اسکریپت را انتخاب کنید و به موارد منوی نوار نوار خود تغییر دهید Adding JavaScript Select and Toggle to Your Navbar Menu Items

• افزودن جاوا اسکریپت را انتخاب کنید و به موارد منوی نوار نوار خود تغییر دهید Adding JavaScript Select and Toggle to Your Navbar Menu Items

• شبکه پویا سفارشی - ایجاد یک وب سایت و ستون Custom Dynamic Grid – Creating a Website and Column

• شبکه پویا سفارشی - ایجاد یک وب سایت و ستون Custom Dynamic Grid – Creating a Website and Column

• افزودن محتوا و منابع متغیر مکان Adding Placeholder Content and Resources

• افزودن محتوا و منابع متغیر مکان Adding Placeholder Content and Resources

• بهترین منابع برای طراحی وب – افزودن محتوای متغیر Best Resources for Web Design – Adding Placeholder Content

• بهترین منابع برای طراحی وب – افزودن محتوای متغیر Best Resources for Web Design – Adding Placeholder Content

• تغییرات و تنظیمات وب سایت Website Tweaks and Adjustments

• تغییرات و تنظیمات وب سایت Website Tweaks and Adjustments

• بررسی وب سایت پاسخگو Float Float Responsive Website Review

• بررسی وب سایت پاسخگو Float Float Responsive Website Review

منوی جمع‌شونده جاوا اسکریپت – وب‌سایت CSS Float آماده برای موبایل و کاملاً پاسخگو JavaScript Collapsible Menu – Mobile-Ready and Fully Responsive CSS Float Website

وب سایت CSS Flexbox با موارد زیر منوی نوار ناوبری پاسخگو CSS Flexbox Website with Responsive Navbar Sub-Menu Items

• Complex Responsive Navbar معرفی Complex Responsive Navbar Introduction

• Complex Responsive Navbar معرفی Complex Responsive Navbar Introduction

• برنامه ریزی و راه اندازی وب سایت برای طراحی وب سایت مدرن – Flexbox Website Planning and Setup for Modern Website Design – Flexbox

• برنامه ریزی و راه اندازی وب سایت برای طراحی وب سایت مدرن – Flexbox Website Planning and Setup for Modern Website Design – Flexbox

• ایجاد یک وب سایت با استفاده از CSS برای وب سایت ها با استفاده از Flexbox Creating a Website by Applying CSS for Websites Using Flexbox

• ایجاد یک وب سایت با استفاده از CSS برای وب سایت ها با استفاده از Flexbox Creating a Website by Applying CSS for Websites Using Flexbox

• طراحی وب سایت Mobile-First: ایجاد یک نوار ناوبری پاسخگو Mobile-First Website Design: Creating a Responsive Navbar

• طراحی وب سایت Mobile-First: ایجاد یک نوار ناوبری پاسخگو Mobile-First Website Design: Creating a Responsive Navbar

• Mobile-First Design: ایجاد یک نوار ناوبری پاسخگو با آیتم های منو Mobile-First Design: Creating a Responsive Navbar with Menu Items

• Mobile-First Design: ایجاد یک نوار ناوبری پاسخگو با آیتم های منو Mobile-First Design: Creating a Responsive Navbar with Menu Items

• افزودن جاوا اسکریپت: ایجاد یک جاوا اسکریپت تعاملی Navbar Toggler Adding JavaScript: Creating an Interactive JavaScript Navbar Toggler

• افزودن جاوا اسکریپت: ایجاد یک جاوا اسکریپت تعاملی Navbar Toggler Adding JavaScript: Creating an Interactive JavaScript Navbar Toggler

• منوی چند لایه پیچیده تر با موارد زیر منو: اضافه کردن منوی فرعی نوار نوار More Complex Multiple Layer Menu with Sub-Menu Items: Adding Navbar Sub-Menu

• منوی چند لایه پیچیده تر با موارد زیر منو: اضافه کردن منوی فرعی نوار نوار More Complex Multiple Layer Menu with Sub-Menu Items: Adding Navbar Sub-Menu

• نوار ناوبری پاسخگو با موارد زیر منو - جاوا اسکریپت زیر منوی نوار ناوبری Responsive Navbar with Sub-Menu Items – Navbar Sub-Menu JavaScript

• نوار ناوبری پاسخگو با موارد زیر منو - جاوا اسکریپت زیر منوی نوار ناوبری Responsive Navbar with Sub-Menu Items – Navbar Sub-Menu JavaScript

• منوی پاسخگو با آیتم های زیرمنو – ترفندها و به روز رسانی های وب سایت Responsive Menu with Sub-Menu Items – Website Tweaks and Updates

• منوی پاسخگو با آیتم های زیرمنو – ترفندها و به روز رسانی های وب سایت Responsive Menu with Sub-Menu Items – Website Tweaks and Updates

• نمای کلی نوار ناوبری پاسخگو پیچیده Complex Responsive Navbar Overview

• نمای کلی نوار ناوبری پاسخگو پیچیده Complex Responsive Navbar Overview

وب سایت CSS Flexbox با موارد زیر منوی نوار ناوبری پاسخگو CSS Flexbox Website with Responsive Navbar Sub-Menu Items