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

دانلود Advanced CSS & Responsive Web Design

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: به‌روزرسانی شده در می ۲۰۲۵. این دوره اکنون دارای قابلیت Coursera Coach است! روشی هوشمندتر برای یادگیری با گفتگوهای تعاملی و لحظه‌ای که به شما کمک می‌کند دانش خود را آزمایش کنید، پیش‌فرض‌ها را به چالش بکشید و با پیشرفت در دوره، درک خود را عمیق‌تر کنید. در این دوره، شما تکنیک‌های پیشرفته CSS و طراحی وب واکنش‌گرا را فرا خواهید گرفت که شما را قادر می‌سازد وب‌سایت‌های مدرن و تطبیق‌پذیر ایجاد کنید. در پایان دوره، در استفاده از Flexbox، CSS Grid، Media Queries و Container Queries برای ساخت چیدمان‌های واکنش‌گرا که با دستگاه‌های مختلف سازگار می‌شوند، مهارت خواهید یافت. همچنین با واحدهای rem، em و viewport برای تایپوگرافی منعطف آشنا شده و یاد می‌گیرید چگونه طراحی‌های خود را برای توسعه Mobile-first بهینه کنید. دوره با اصول بنیادی طراحی واکنش‌گرا شروع می‌شود و شما را در استفاده از درصدهای مختلف و واحدهای viewport برای ایجاد انعطاف‌پذیری در چیدمان راهنمایی می‌کند. شما یاد خواهید گرفت که تایپوگرافی واکنش‌گرا و Media Queries موثر را برای استایل‌های مخصوص هر دستگاه پیاده‌سازی کنید. سپس، پروژه‌های عملی مانند ساخت یک جدول قیمت‌گذاری واکنش‌گرا و یک فرم فرود (Landing Form) را انجام خواهید داد تا مهارت‌های خود را با چالش‌های دنیای واقعی تقویت کنید. این دوره برای توسعه‌دهندگان و طراحان سطح متوسط ایده‌آل است و نیازمند دانش پایه از HTML و CSS می‌باشد. در پایان، شما اعتماد به نفس لازم برای طراحی و پیاده‌سازی موثر وب‌سایت‌های واکنش‌گرا را خواهید داشت.

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

طراحی واکنش‌گرا 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

نمایش نظرات

آموزش پیشرفته CSS و طراحی وب واکنش‌گرا (Responsive)
جزییات دوره
11h 59m
73
(آخرین آپدیت)
169
- از 5
دارد
دارد
دارد
Chris Croft
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Chris Croft Chris Croft

مربی مدیریت، سخنران، نویسنده