آموزش طراحی وب مدرن و ریسپانسیو با CSS – ساخت ۵ وب‌سایت کامل - آخرین آپدیت

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

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

• مقدمه‌ای بر شروع طراحی وب با 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 How to Select Page Elements CSS HTML Page Element Selection

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

• مدل جعبه‌ای (Box Model) در CSS چیست و چگونه Border، Margin و Padding را تنظیم کنیم 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

• نحوه تنظیم مقادیر Display در عناصر و تفاوت Display None با ویژگی Visibility How to Set the Element Display Values and What Display None Does Versus Visibility Property

• روش‌های Position در CSS برای عناصر HTML: Absolute، Relative، Fixed و Static 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

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

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

• نحوه ایجاد یک قالب ساده با استفاده از چیدمان CSS Float در وب‌سایت سه ستونه 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 Grid Modern Responsive Three-Column Website Template with CSS Grid Quick Layout Design

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

• مقدمه Introduction

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

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

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

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

• ایجاد وایرفریم (Wireframe) وب‌سایت برای برنامه‌ریزی سایت Creating a Website Wireframe to Plan Your Site

• افزودن ساختار اصلی HTML Adding the HTML Main Structure

• به‌روزرسانی HTML با استایل‌های CSS Updating HTML with Styles

• ایجاد یک نوار پیمایش (Navbar) ریسپانسیو Creating a Responsive Navbar

• ایجاد یک نوار پیمایش ریسپانسیو و آماده برای موبایل Creating a Mobile-Ready Responsive Navbar

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

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

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

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

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

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

• افزودن لینک Mailto به فرم تماس Adding Mailto to Your Contact Form

• افزودن استایل به وب‌سایت Adding a Style to Your Website

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

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

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

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

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

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

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

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

• اعمال ستون‌های گرید سفارشی با استفاده از Flexbox Applying Your Own Custom Grid Columns with Flexbox

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

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

• ایجاد فوتر (Footer) Creating a Footer

• ایجاد اسکرول نرم (Smooth Scrolling) با استفاده از JavaScript Creating Smooth Scrolling Using JavaScript

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

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

وب‌سایت بخش CSS Grid با چک‌باکس «بدون JavaScript» و نوار پیمایش ریسپانسیو از صفر "No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section

• مقدمه‌ای بر وب‌سایت CSS Grid CSS Grid Website Introduction

• آماده‌سازی طراحی – تنظیمات CSS Grid Preparing Your Design – CSS Grid Setup

• ساخت یک وب‌سایت با CSS Grid Creating a Website – CSS Grid

• ایجاد یک نوار پیمایش ریسپانسیو با CSS Grid Creating a CSS Grid Responsive Navbar

• افزودن نوار پیمایش ریسپانسیو به وب‌سایت Adding a Responsive Navbar to Your Website

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

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

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

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

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

• مقدمه: وب‌سایت ریسپانسیو با Float Introduction: Responsive Float Website

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

• ساخت یک وب‌سایت مدرن: تنظیم HTML اصلی Creating a Modern Website: Set Up Main HTML

• ساخت نوار پیمایش ریسپانسیو با استایل‌دهی CSS Navbar Making a Responsive Navigation bar Using CSS Navbar Styling

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

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

• افزودن قابلیت Select و Toggle با JavaScript به آیتم‌های منو Adding JavaScript Select and Toggle to Your Navbar Menu Items

• گرید پویا و سفارشی – ساخت وب‌سایت و ستون‌ها Custom Dynamic Grid – Creating a Website and Column

• افزودن محتوای جایگزین و منابع Adding Placeholder Content and Resources

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

• اصلاحات و تنظیمات نهایی وب‌سایت Website Tweaks and Adjustments

• مرور و بررسی وب‌سایت ریسپانسیو با Float Float Responsive Website Review

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

• مقدمه‌ای بر نوار پیمایش ریسپانسیو پیچیده Complex Responsive Navbar Introduction

• برنامه‌ریزی و راه‌اندازی وب‌سایت برای طراحی مدرن با Flexbox Website Planning and Setup for Modern Website Design – 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 Design: Creating a Responsive Navbar with Menu Items

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

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

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

• منوی ریسپانسیو با زیرمنو – اصلاحات و به‌روزرسانی‌های سایت Responsive Menu with Sub-Menu Items – Website Tweaks and Updates

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