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

مبانی CSS و مدل باکس CSS Fundamentals and The Box Model

• معرفی تخصص Specialization Introduction

• معرفی دوره Course Introduction

• درک نحوه عملکرد استایل‌ها، رنگ‌ها و مقادیر Understand How Styles, Colors and Values Work

• ساخت و لینک کردن اولین فایل استایل (Stylesheet) Create and Link Your First Stylesheet

• درک انتخابگرها، مفهوم آبشاری و اولویت‌ها (Specificity) Understand Selectors, Cascade and Specificity

• هدف‌گذاری و استایل‌دهی عناصر با انتخابگرها Target and Style Elements with Selectors

• استایل‌دهی صفحات با رنگ‌ها، پس‌زمینه‌ها و گرادینت‌ها Style Pages with Colors, Backgrounds and Gradients

• درک مدل باکس در CSS Understand the CSS Box Model

• کنترل فاصله‌گذاری و حاشیه‌ها با مدل باکس Control Spacing and Borders with the Box Model

استایل‌دهی محتوا و چیدمان‌های انعطاف‌پذیر Styling Content and Flexible Layouts

• بررسی تایپوگرافی و فونت‌های وب Explore Typography and Web Fonts

• استایل‌دهی حرفه‌ای تایپوگرافی وب Style Professional Web Typography

• بهبود تایپوگرافی با فاصله‌گذاری و سلسله‌مراتب Refine Typography with Spacing and Hierarchy

• ساخت حالت‌های تعاملی با حاشیه‌ها و سایه‌ها Build Interactive States with Borders and Shadows

• ارتقای حالت‌های تعاملی با بازخوردهای بصری Enhance Interactive States with Visual Feedback

• درک ویژگی Display و موقعیت‌دهی (Positioning) Understand Display and Positioning

• پیاده‌سازی منوی ناوبری چسبان (Sticky) و لایه‌های رویی Implement Sticky Navigation and Overlays

• درک Flexbox و چیدمان‌های انعطاف‌پذیر Understand Flexbox and Flexible Layouts

• ساخت نوار ناوبری و چیدمان کارت‌ها با Flexbox Build a Flexbox Navbar and Card Layout

• بهبود چیدمان‌های انعطاف‌پذیر با Flexbox Refine Flexible Layouts with Flexbox

گرید، طراحی ریسپانسیو و پرداخت نهایی Grid, Responsive Design and Polish

• مبانی CSS Grid CSS Grid Fundamentals

• ساخت گالری تصاویر مبتنی بر گرید Create a Grid-Based Image Gallery

• بهبود چیدمان گالری با CSS Grid Refine Gallery Layouts with CSS Grid

• درک طراحی ریسپانسیو و کوئری‌های رسانه‌ای (Media Queries) Understand Responsive Design and Media Queries

• ریسپانسیو کردن پورتفولیو Make Your Portfolio Responsive

• بهینه‌سازی پورتفولیو برای اندازه‌های مختلف صفحه Optimise Your Portfolio Across Screen Sizes

• بررسی Transitionها، Transformها و انیمیشن‌ها Explore Transitions, Transforms and Animations

• ارتقای پورتفولیو با تعاملات نرم و روان Enhance a Portfolio with Smooth Interactions

• پرداخت نهایی پورتفولیو با انیمیشن‌های CSS Polish Your Portfolio with CSS Animations

• جمع‌بندی دوره Course Summary