آموزش طراحی وب سایت ریسپانسیو با HTML5 و CSS [ویدئو]

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

اصول طراحی وب سایت واکنش گرا The Fundamentals of Responsive Web Design

• مقدمه Introduction

• پشتیبانی مرورگر، ابزار و نمونه کد Browser support, tooling and code samples

• آشنایی با طراحی وب سایت واکنش گرا Understanding Responsive Web Design

• پرسش های رسانه ای را وارد کنید Enter media queries

• خلاصه Summary

نوشتن نشانه گذاری HTML Writing HTML Markup

• نوشتن نشانه گذاری HTML Writing HTML Markup

• شروع صحیح صفحات HTML Starting HTML pages correctly

• عناصر معنایی جدید در HTML5 New semantic elements in HTML5

• عناصر گروه بندی HTML HTML grouping elements

• معناشناسی سطح متن HTML HTML text-level semantics

• استفاده از عناصر HTML5 Using HTML5 elements

• انطباق دسترسی WCAG و WAI-ARIA برای برنامه های کاربردی وب در دسترس تر WCAG accessibility conformance and WAI-ARIA for more accessible web applications

• جاسازی رسانه در HTML5 Embedding media in HTML5

• عنصر The element

• خلاصه و تکلیف Summary and homework

پرسش های رسانه ای و پرس و جوهای کانتینر Media Queries and Container Queries

• پرسش های رسانه ای و پرس و جوهای کانتینر Media Queries and Container Queries

• متا تگ و پرسش های رسانه ای The meta tag and Media Queries

• تست طرح‌های واکنش‌گرا بر روی شبیه‌سازها و شبیه‌سازها Testing responsive designs on emulators and simulators

• آیا باید پرس و جوهای رسانه ای را به فایل های خود تقسیم کنید؟ Should you split media queries into their own files?

• پرسش‌های رسانه‌ای را ادغام کنید یا آنها را در جایی که مناسب است پراکنده کنید؟ Consolidate media queries or scatter them where it suits?

• پرس و جوهای رسانه سطح 5 Media Queries Level 5

• پرس و جوهای کانتینر Container queries

• خلاصه Summary

Fluid Layout و Flexbox Fluid Layout and Flexbox

• Fluid Layout و Flexbox - مقدمه Fluid Layout and Flexbox - Introduction

• تبدیل یک طرح پیکسل ثابت به یک طرح متناسب سیال Converting a fixed pixel design to a fluid proportional layout

• چرا به Flexbox نیاز داریم؟ Why do we need Flexbox?

• پیاده سازی Flexbox Flexbox Implementation

• پاورقی چسبنده Sticky Footer

• مرتب سازی مجدد بصری Visual Reordering

• خلاصه Summary

طرح بندی با شبکه CSS Layout with CSS Grid

• Layout با CSS Grid - مقدمه Layout with CSS Grid - Introduction

• نحو اصلی گرید Basic Grid syntax

• پالایش سیستم گرید ما Refining our Grid System

• قرار دادن و اندازه بندی موارد Grid Layout Placing and sizing Grid Layout items

• خطوط شبکه و مناطق شبکه-الگو نامگذاری شده است Named grid lines and grid-template-areas

• تنظیم خودکار و پر کردن خودکار auto-fit and auto-fill

• نحو مخفف Shorthand syntax

• اجازه دادن به عناصر تو در تو برای مشارکت در Grid Allowing nested elements to take part in the Grid

• خلاصه Summary

انتخابگرهای CSS، تایپوگرافی و موارد دیگر CSS Selectors, Typography and More

• انتخابگرهای CSS، تایپوگرافی و موارد دیگر CSS Selectors, Typography, and More

• انتخابگرها، واحدها و قابلیت ها Selectors, units, and capabilities

• انتخابگرهای CSS - فراتر از حالت عادی! CSS selectors - beyond the normal!

• شبه کلاس های ساختاری CSS CSS structural pseudo-classes

• انتخاب بر اساس nth در طراحی های وب واکنش گرا nth-based selection in responsive web designs

• انتخابگرهای ترکیبی - فرزند، خواهر و برادر بعدی و خواهر و برادر بعدی Combinator selectors – child, next sibling, and subsequent sibling

• انتخابگرهای گروه بندی Grouping selectors

• طول های مربوط به viewport پاسخگو Responsive viewport-relative lengths

• استفاده از @supports برای فورک کردن CSS Using @supports to fork CSS

• تایپوگرافی وب Web typography

• قانون @font-face CSS The @font-face CSS rule

• فونت های متغیر Variable fonts

• خلاصه Summary

رنگ CSS CSS Color

• مقدمه Introduction

• فرمت رنگ RGB RGB Color Format

• کانال آلفا Alpha Channel

• مفاهیم رنگ و اصطلاحات Color concepts and terminology

• فضاهای رنگی پیشرفته Advanced Color Spaces

• کاوش رنگ آزمایشگاهی و LCH Exploring Lab and LCH color

• OKLab و OKLCH OKLab & OKLCH

• استفاده از توابع color-mix() & color-contrast() Using color-mix() & color-contrast() functions

• خلاصه Summary

زیبایی شناسی خیره کننده با CSS Stunning Aesthetics with CSS

• مقدمه و اهداف Introduction and Objectives

• سایه های متن و سایه های جعبه Text Shadows and Box Shadows

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

• گرادیان های مخروطی، گرادیان های تکراری و الگوهای گرادیان پس زمینه Conic Gradients, Repeating Gradients and Background Gradient Patterns

• تصاویر پس زمینه چندگانه Multiple Background Images

• فیلترهای CSS CSS Filters

• مسیر کلیپ CSS CSS clip-path

• Mask-Image و Mix-Blend-Mode Mask-Image and Mix-Blend-Mode

• خلاصه Summary

تصاویر واکنش گرا Responsive Images

• مقدمه ای بر تصاویر واکنش گرا Introduction to Responsive Images

• فرمت های تصویر مدرن Modern Image Formats

• نحو برای تصاویر واکنشگرا Syntax for Responsive Images

• جهت هنری با عنصر تصویر Art direction with the picture element

• خلاصه Summary

SVG SVG

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

• آشنایی با یک SVG پایه Understanding a basic SVG

• عناصر و ویژگی های SVG Elements and Attributes of SVG

• ایجاد SVG Creating SVGs

• درج SVG در صفحات وب Inserting SVGs into Webpages

• استفاده مجدد از اشیاء گرافیکی از نمادها Reusing Graphical Objects from Symbols

• رنگ‌آمیزی مجدد SVGها با ویژگی‌های سفارشی CSS Re-coloring SVGs with CSS Custom Properties

• استفاده مجدد از اشیاء گرافیکی از منابع خارجی Reusing Graphical Objects from External Sources

• رنگ‌آمیزی SVG با ماسک تصویر Coloring SVGs with mask-image

• بررسی روش‌های درج SVG Exploring SVG Insertion Methods

• انیمیشن SMIL SMIL Animation

• یک ظاهر طراحی SVG Styling SVGs

• متحرک سازی یک SVG با CSS Animating an SVG with CSS

• متحرک سازی SVG با جاوا اسکریپت Animating SVG with JavaScript

• استفاده از SVG به عنوان فیلتر Using SVGs as Filters

• درک پرسش های رسانه ای در SVG ها Understanding Media Queries within SVGs

• بهینه سازی SVG ها Optimizing SVGs

• خلاصه و منابع Summary and Resources

انتقال، تبدیل و انیمیشن Transitions, Transformations and Animations

• مقدمه ای بر انتقال ها، تبدیل ها و انیمیشن ها Introduction to Transitions, Transformations, and Animations

• انتقال CSS و ویژگی های آنها CSS Transitions and Their Properties

• درک توابع زمان بندی برای انتقال CSS Understanding Timing Functions for CSS Transitions

• CSS 2D تبدیل می شود CSS 2D Transforms

• درک ویژگی Transform-origin Understanding the Transform-origin Property

• CSS 3D Transformations CSS 3D Transformations

• آموزش در مورد ویژگی Translate3D Learning about the Translate3D Property

• انیمیشن CSS، تمرین، آموزش و خلاصه CSS Animations, Exercises, Training and Summary

ویژگی های سفارشی و توابع CSS Custom Properties and CSS Functions

• مقدمه ای بر توابع CSS و ویژگی های سفارشی Introduction to CSS Functions and Custom Properties

• شروع با CSS Custom Properties Starting with CSS Custom Properties

• تغییر ویژگی های سفارشی با جاوا اسکریپت Switching Custom Properties with JavaScript

• مشخصات ویژگی های سفارشی Specificities of Custom Properties

• کاوش در جزئیات توابع CSS Exploring CSS Functions in Detail

• نگاهی به توابع حداقل، حداکثر و گیره CSS Looking at the min, max and clamp Functions of CSS

• ادغام دانش ما تا کنون Integrating Our Knowledge So Far

• خلاصه Summary

فرم ها Forms

• مقدمه ای بر فرم های HTML5 Introduction to HTML5 Forms

• آشنایی با اجزای فرم های HTML5 Understanding the Components of HTML5 Forms

• کاوش ویژگی‌هایی مانند «لازم» و «فوکوس خودکار» Exploring attributes like 'required' and 'autofocus'

• یادگیری در مورد ویژگی تکمیل خودکار و لیست Learning about the autocomplete and list attribute

• انواع ورودی HTML5 HTML5 Input Types

• درک ورودی های تاریخ و زمان Understanding the Date and Time Inputs

• سبک سازی فرم های HTML5 با CSS Styling HTML5 Forms with CSS

• نشان دادن فیلدهای مورد نیاز Indicating Required Fields

• یک ظاهر طراحی شده به کارت های ورودی و پر کردن پس زمینه با CSS Styling Input Carets and Background Fills with CSS

• خلاصه Summary

ویژگی های CSS لبه Cutting Edge CSS Features

• مقدمه ای بر ویژگی های CSS و لایه های Cascade Introduction to CSS Features and Cascade Layers

• تسلط بر لایه های آبشاری برای بهبود مدیریت سبک Mastering Cascade Layers for Improved Style Management

• یادگیری در مورد CSS Nesting Learning about CSS Nesting

• ساده سازی CSS با انتخابگرهای تودرتو و پرسش های رسانه ای Simplifying CSS with Nested Selectors and Media Queries

• خلاصه Summary

تکنیک های پاداش و مشاوره جدایی Bonus Techniques and Parting Advice

• نکات و تکنیک ها - مقدمه Tips and Techniques - Introduction

• کوتاه کردن متن در CSS Truncating Text in CSS

• پانل های اسکرول و نوارهای پیمایش سفارشی Scrolling Panels and Custom Scrollbars

• CSS Scroll Snap CSS Scroll Snap

• پیمایش روان با رفتار اسکرول CSS Smooth Scrolling with CSS scroll-behavior

• توصیه مهم جدایی Important Parting Advice

• تنظیم سطوح پشتیبانی مرورگر Setting Browser Support Levels

• CSS Frameworks و Linting CSS Frameworks and Linting

• بررسی عملکرد و ابزارهای عملکرد Exploring Performance and Performance Tools

• چیز بزرگ بعدی چیست؟ What's the Next Big Thing?

• خلاصه Summary