آموزش CSS و Sass پیشرفته: Flexbox، Grid، انیمیشن ها و موارد دیگر!

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

خوش آمدید، خوش آمدید، خوش آمدید! Welcome, Welcome, Welcome!

• به پیشرفته ترین دوره CSS تا کنون خوش آمدید! Welcome to the Most Advanced CSS Course Ever!

• قبل از شروع بخوانید! READ BEFORE YOU START!

• راه اندازی ابزارهای ما Setting up Our Tools

پروژه Natours - راه اندازی و مراحل اولیه (قسمت 1) Natours Project — Setup and First Steps (Part 1)

• بخش معرفی Section Intro

• بررسی اجمالی پروژه Project Overview

• ساخت هدر - قسمت 1 Building the Header - Part 1

• ساخت هدر - قسمت 2 Building the Header - Part 2

• ایجاد انیمیشن های CSS جالب Creating Cool CSS Animations

• ساخت یک دکمه متحرک پیچیده - قسمت 1 Building a Complex Animated Button - Part 1

• ساخت یک دکمه متحرک پیچیده - قسمت 2 Building a Complex Animated Button - Part 2

CSS چگونه کار می کند: نگاهی به پشت صحنه How CSS Works: A Look Behind the Scenes

• بخش معرفی Section Intro

• سه ستون نوشتن HTML و CSS خوب (هرگز آنها را فراموش نکنید!) Three Pillars of Writing Good HTML and CSS (Never Forget Them!)

• چگونه CSS در پشت صحنه کار می کند: یک نمای کلی How CSS Works Behind the Scenes: An Overview

• چگونه CSS تجزیه می شود، قسمت 1: آبشار و ویژگی How CSS is Parsed, Part 1: The Cascade and Specificity

• خاص بودن در عمل Specificity in Practice

• چگونه CSS تجزیه می شود، قسمت 2: پردازش ارزش How CSS is Parsed, Part 2: Value Processing

• چگونه CSS تجزیه می شود، قسمت 3: وراثت How CSS is Parsed, Part 3: Inheritance

• تبدیل px به rem: یک گردش کار موثر Converting px to rem: An Effective Workflow

• چگونه CSS یک وب سایت را ارائه می دهد: مدل قالب بندی بصری How CSS Renders a Website: The Visual Formatting Model

• معماری CSS، اجزا و BEM CSS Architecture, Components and BEM

• پیاده سازی BEM در پروژه Natours Implementing BEM in the Natours Project

مقدمه ای بر Sass و NPM Introduction to Sass and NPM

• بخش معرفی Section Intro

• ساس چیست؟ What is Sass?

• مراحل اول با Sass: متغیرها و Nesting First Steps with Sass: Variables and Nesting

• اولین قدم ها با Sass: ترکیب، گسترش و عملکرد First Steps with Sass: Mixins, Extends and Functions

• مقدمه ای کوتاه بر خط فرمان A Brief Introduction to the Command Line

• بسته های NPM: بیایید Sass را به صورت محلی نصب کنیم NPM Packages: Let's Install Sass Locally

• اسکریپت های NPM: بیایید Sass را به صورت محلی بنویسیم و کامپایل کنیم NPM Scripts: Let's Write and Compile Sass Locally

• ساده ترین راه برای بارگذاری مجدد خودکار صفحه در تغییرات فایل The Easiest Way of Automatically Reloading a Page on File Changes

پروژه Natours - با استفاده از CSS و Sass پیشرفته (قسمت 2) Natours Project — Using Advanced CSS and Sass (Part 2)

• بخش معرفی Section Intro

• تبدیل کد CSS ما به Sass: متغیرها و Nesting Converting Our CSS Code to Sass: Variables and Nesting

• پیاده سازی 7-1 CSS Architecture با Sass Implementing the 7-1 CSS Architecture with Sass

• بررسی: اصول طراحی واکنشگرا و انواع چیدمان Review: Responsive Design Principles and Layout Types

• ساخت یک شبکه سفارشی با شناورها Building a Custom Grid with Floats

• ساخت بخش درباره - قسمت 1 Building the About Section - Part 1

• ساخت بخش درباره - قسمت 2 Building the About Section - Part 2

• ساخت بخش درباره - قسمت 3 Building the About Section - Part 3

• ساخت بخش ویژگی ها Building the Features Section

• بخش ساخت تورها - قسمت 1 Building the Tours Section - Part 1

• بخش ساخت تورها - قسمت 2 Building the Tours Section - Part 2

• بخش ساخت تورها - قسمت 3 Building the Tours Section - Part 3

• بخش ساختن داستان ها - قسمت 1 Building the Stories Section - Part 1

• بخش ساختن داستان ها - قسمت 2 Building the Stories Section - Part 2

• بخش ساختن داستان ها - قسمت 3 Building the Stories Section - Part 3

• ساخت بخش رزرو - قسمت 1 Building the Booking Section - Part 1

• ساخت بخش رزرو - قسمت 2 Building the Booking Section - Part 2

• ساخت بخش رزرو - قسمت 3 Building the Booking Section - Part 3

• ساخت پاورقی Building the Footer

• ساخت ناوبری - قسمت 1 Building the Navigation - Part 1

• ساخت ناوبری - قسمت 2 Building the Navigation - Part 2

• ساخت ناوبری - قسمت 3 Building the Navigation - Part 3

• ساخت پاپ آپ خالص CSS - قسمت 1 Building a Pure CSS Popup - Part 1

• ساخت پاپ آپ خالص CSS - قسمت 2 Building a Pure CSS Popup - Part 2

پروژه Natours - طراحی پاسخگوی پیشرفته (قسمت 3) Natours Project — Advanced Responsive Design (Part 3)

• بخش معرفی Section Intro

• Mobile-First در مقابل Desktop-First و Breakpoints Mobile-First vs Desktop-First and Breakpoints

• بیایید از قدرت Sass Mixins برای نوشتن پرسش های رسانه ای استفاده کنیم Let's Use the Power of Sass Mixins to Write Media Queries

• نوشتن پرسش های رسانه ای - پایه، تایپوگرافی و چیدمان Writing Media Queries - Base, Typography and Layout

• نوشتن پرسش‌های رسانه - بخش‌های طرح‌بندی، درباره و ویژگی‌ها Writing Media Queries - Layout, About and Features Sections

• نوشتن پرسش های رسانه ای - بخش های تورها، داستان ها و رزرو Writing Media Queries - Tours, Stories and Booking Sections

• مروری بر تصاویر واکنشگرا An Overview of Responsive Images

• تصاویر پاسخگو در HTML - جهت هنری و سوئیچینگ چگالی Responsive Images in HTML - Art Direction and Density Switching

• تصاویر پاسخگو در HTML - تراکم و سوئیچینگ وضوح Responsive Images in HTML - Density and Resolution Switching

• تصاویر واکنش گرا در CSS Responsive Images in CSS

• تست پشتیبانی از مرورگر با @supports Testing for Browser Support with @supports

• راه اندازی یک فرآیند ساخت ساده با اسکریپت های NPM Setting up a Simple Build Process with NPM Scripts

• تکمیل پروژه Natours: ملاحظات نهایی Wrapping up the Natours Project: Final Considerations

پروژه Trillo - Master Flexbox! Trillo Project — Master Flexbox!

• بخش معرفی Section Intro

• چرا فلکس باکس: مروری بر فلسفه پشت فلکس باکس Why Flexbox: An Overview of the Philosophy Behind Flexbox

• مقدمه ای اساسی برای فلکس باکس: ظرف فلکس A Basic Intro to Flexbox: The Flex Container

• مقدمه ای اساسی برای Flexbox: موارد فلکس A Basic Intro to Flexbox: Flex Items

• مقدمه ای اساسی برای Flexbox: افزودن موارد Flex بیشتر A Basic Intro to Flexbox: Adding More Flex Items

• بررسی اجمالی پروژه Project Overview

• تعریف تنظیمات پروژه و ویژگی های سفارشی Defining Project Settings and Custom Properties

• ساخت طرح کلی Building the Overall Layout

• ساخت هدر - قسمت 1 Building the Header - Part 1

• ساخت هدر - قسمت 2 Building the Header - Part 2

• ساخت هدر - قسمت 3 Building the Header - Part 3

• ساخت ناوبری - قسمت 1 Building the Navigation - Part 1

• ساخت ناوبری - قسمت 2 Building the Navigation - Part 2

• نمای کلی ساختمان هتل - قسمت 1 Building the Hotel Overview - Part 1

• نمای کلی ساختمان هتل - قسمت 2 Building the Hotel Overview - Part 2

• ساخت بخش توضیحات - قسمت 1 Building the Description Section - Part 1

• ساخت بخش توضیحات - قسمت 2 Building the Description Section - Part 2

• ساخت بخش نظرات کاربران Building the User Reviews Section

• ساخت بخش CTA Building the CTA Section

• نوشتن پرسش های رسانه ای - قسمت 1 Writing Media Queries - Part 1

• نوشتن پرسش های رسانه ای - قسمت 2 Writing Media Queries - Part 2

• پایان پروژه Trillo: ملاحظات نهایی Wrapping up the Trillo Project: Final Considerations

مقدمه ای سریع بر CSS Grid Layouts A Quick Introduction to CSS Grid Layouts

• بخش معرفی Section Intro

• چرا CSS Grid: یک ذهنیت کاملاً جدید Why CSS Grid: A Whole New Mindset

• راه اندازی سریع برای این بخش Quick Setup for This Section

• ایجاد اولین شبکه ما Creating Our First Grid

• آشنایی با واحد fr Getting Familiar with the fr Unit

• تعیین موقعیت اقلام شبکه Positioning Grid Items

• اقلام شبکه پوشا Spanning Grid Items

• چالش شبکه Grid Challenge

• چالش شبکه: یک راه حل اساسی Grid Challenge: A Basic Solution

• نامگذاری خطوط شبکه Naming Grid Lines

• نامگذاری مناطق شبکه Naming Grid Areas

• شبکه های ضمنی در مقابل شبکه های آشکار Implicit Grids vs. Explicit Grids

• تراز کردن موارد شبکه Aligning Grid Items

• تراز کردن آهنگ ها Aligning Tracks

• با استفاده از min-content، max-content و تابع minmax(). Using min-content, max-content and the minmax() function

• طرح‌بندی‌های پاسخگو با تنظیم خودکار و تکمیل خودکار Responsive Layouts with auto-fit and auto-fill

پروژه بعدی - چیدمان های شبکه اصلی CSS! Nexter Project — Master CSS Grid Layouts!

• بررسی اجمالی و راه اندازی پروژه Project Overview and Setup

• ساخت طرح کلی - قسمت 1 Building the Overall Layout - Part 1

• ساخت طرح کلی - قسمت 2 Building the Overall Layout - Part 2

• ساخت بخش ویژگی ها - قسمت 1 Building the Features Section - Part 1

• بخش ساختن ویژگی ها - قسمت 2 Building the Features Section - Part 2

• ساخت بخش داستان - قسمت 1 Building the Story Section - Part 1

• بخش ساختن داستان - قسمت 2 Building the Story Section - Part 2

• بخش ساخت خانه ها - قسمت 1 Building the Homes Section - Part 1

• بخش ساختن خانه ها - قسمت 2 Building the Homes Section - Part 2

• ساخت گالری - قسمت 1 Building the Gallery - Part 1

• ساخت گالری - قسمت 2 Building the Gallery - Part 2

• ساخت پاورقی Building the Footer

• ساخت نوار کناری Building the Sidebar

• ساخت هدر - قسمت 1 Building the Header - Part 1

• ساخت هدر - قسمت 2 Building the Header - Part 2

• ساخت بخش مشاورین املاک Building the Realtors Section

• نوشتن پرسش های رسانه ای - قسمت 1 Writing Media Queries - Part 1

• نوشتن پرسش های رسانه ای - قسمت 2 Writing Media Queries - Part 2

• پشتیبانی مرورگر برای CSS Grid Browser Support for CSS Grid

• تکمیل پروژه بعدی: ملاحظات نهایی Wrapping up the Nexter Project: Final Considerations

همین است، همه! That's It, Everyone!

• دفعه بعد می بینمت، استاد CSS! See You Next Time, CSS Master!

• دوره های دیگر من + به روز رسانی My Other Courses + Updates