آموزش پیشرفته CSS و طراحی وب واکنش‌گرا (Responsive) - آخرین آپدیت

طراحی واکنش‌گرا Responsive Design

• مقدمه بخش Section Intro

• طراحی واکنش‌گرا چیست؟ What Is Responsive Design?

• چیدمان‌های منعطف و درصدها Flexible Layouts & Percentages

• واحدهای rem و em rem & em Units

• واحدهای Viewport (vh و vw) Viewport Units (vh & vw)

• مدیا کوئری‌ها (Media Queries) Media Queries

• جدول قیمت‌گذاری واکنش‌گرا Responsive Pricing Grid

• چیدمان منعطف با Flexbox Responsive Flexbox Layout

• کانتینر کوئری‌ها (Container Queries) Container Queries

• واحدهای کانتینر Container Units

پروژه کوچک فرم فرود Landing Form Mini-Project

• مقدمه پروژه Project Intro

• راه‌اندازی و HTML Setup & HTML

• CSS پایه و استایل‌های هدر Base CSS & Header Styles

• محتوای اصلی با Flex و تراز کردن Main Content Flex & Alignment

• استایل‌های داخلی Inner Styles

• چیدمان موبایل و مدیا کوئری‌ها Mobile Layout & Media Queries

ویژگی‌های مختلف CSS Various CSS Features

• مقدمه بخش Section Intro

• ویژگی‌های سفارشی (Custom Properties) Custom Properties

• پیشوندهای فروشنده (Vendor Prefixes) Vendor Prefixes

• فیلترها Filters

• پروژه کوچک اسکرول نرم (Smooth Scroll) Smooth Scroll Mini-Project

• ناوبری چسبان (Sticky Nav) و تغییر استایل هنگام اسکرول Sticky Nav & Style On Scroll

• تابع calc() calc() Function

• تودرتو کردن (Nesting) Nesting

پروژه وب‌سایت خلاقانه Lumina Lumina Creative Website Project

• مقدمه پروژه Project Intro

• راه‌اندازی و CSS پایه Setup & Base CSS

• هدر و ناوبری Header & Navigation

• متن Hero Hero Text

• ویژگی‌های سفارشی Custom Properties

• بخش گالری با Flexbox Gallery Section Flexbox

• فوتر Footer

• صفحه درباره ما About Page

• صفحه تماس با ما Contact Page

• افکت لایت‌باکس تصاویر Image Lightbox Effect

Git، GitHub و میزبانی وب Git, GitHub & Web Hosting

• مقدمه بخش Section Intro

• مقدمه‌ای بر Git و GitHub Intro To Git & GitHub

• ساخت کلیدهای SSH Generate SSH Keys

• گردش کار و دستورات Git Git Workflow & Commands

• استقرار وب‌سایت در Netlify Deploy Website To Netlify

• ارسال فرم تماس Contact Form Submission

• اتصال و پیکربندی نام دامنه Connect & Configure a Domain Name

مقدمه‌ای بر دسترسی‌پذیری وب Web Accessibility Introduction

• مقدمه بخش Section Intro

• دسترسی‌پذیری وب چیست؟ What Is Web Accessibility?

• افزونه مرورگر Skilltide Skilltide Browser Extension

• تست با صفحه‌خوان (Screen Reader) Screen Reader Testing

• ویژگی Role Role Attribute

• ویژگی‌های ARIA ARIA Attributes

• Aria Expanded و عناصر پویا Aria Expanded & Dynamic Elements

انتخاب‌گرهای پیشرفته، شبه کلاس‌ها و شبه عنصرها Advanced Selectors - Pseudo Classes & Elements

• مقدمه بخش Section Intro

• انتخاب‌گرهای ویژگی (Attribute Selectors) Attribute Selectors

• ترکیب‌کننده‌های فرزند و خواهر Child & Sibling Combinators

• شبه عنصرها (Pseudo Elements) Pseudo Elements

• شبه کلاس‌ها: فرزند اول، فرزند آخر و n-مین فرزند Pseudo Classes - first-child, last-child & nth-child

• شبه کلاس‌ها: نوع اول، نوع آخر و n-مین نوع Pseudo Classes - first-of-type, last-of-type, nth-of-type

• شبه عنصرهای before و after before & after Pseudo Elements

• روی هم قرار دادن تصویر با :before Image Overlay With :before

• انتخاب‌گرهای is()، where() و has() is(), where() & has()

• استایل‌دهی به فرم‌ها Styling Forms

• چالش انتخاب‌گرها Selectors Challenge

CSS Grid CSS Grid

• مقدمه بخش Section Intro

• مروری بر CSS Grid CSS Grid Overview

• ستون‌های گرید و فاصله (Gap) Grid Columns & Gap

• توابع repeat() و minmax() repeat() & minmax()

• ردیف‌های گرید Grid Rows

• چالش گرید شماره ۱ Grid Challenge 1

• ویژگی‌های Align و Justify Align & Justify Properties

• استفاده از repeat() با autofit و autofill repeat() With autofit & autofill

• موقعیت‌دهی و گسترش آیتم‌ها Positioning & Spanning Items

• خطوط گرید نام‌گذاری شده Named Grid Lines

• چالش گرید شماره ۲ Grid Challenge 2

• CSS Grid و مدیا کوئری‌ها CSS Grid & Media Queries

• مناطق الگوی گرید (Grid Template Areas) Grid Template Areas

• بازسازی گرید وب‌سایت خلاقانه Lumina Lumina Creative Grid Refactor