آموزش HTML و CSS مدرن از ابتدا 2.0 - نسخه دوم [ویدئو]

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

معرفی Introduction

• به دوره خوش آمدید Welcome To The Course

• چگونه وب کار می کند How The Web Works

• نقش HTML، CSS و JS در توسعه وب The Roles Of HTML, CSS & JS In Web Development

• VS Code Editor & Environment VS Code Editor & Environment

HTML ضروری Essential HTML

• بخش معرفی Section Intro

• ایجاد و باز کردن فایل های HTML Create & Open HTML Files

• برچسب ها و ویژگی های HTML HTML Tags & Attributes

• ساختار سند Document Structure

• سرور زنده و زیباتر Live Server & Prettier

• راه اندازی فایل های Sandbox Sandbox Files Setup

• متا تگ ها و جستجو Meta Tags & Search

• سرفصل ها، پاراگراف ها و تاکیدات Headings, Paragraphs & Emphasis

• معرفی ابزارهای توسعه دهنده مرورگر Browser Devtools Intro

• لیست ها Lists

• تگ های لنگر Anchor Tags

• تصاویر Images

• بلاک در مقابل عناصر درون خطی Block vs Inline Elements

• شکست خط، قوانین افقی و موجودیت ها Line Breaks, Horizontal Rules & Entities

• Divs & Spans Divs & Spans

• کلاس ها و شناسه ها Classes & IDs

• عناصر معنایی Semantic Elements

• دوره تصادف Emmet Emmet Crash Course

• میانبرهای صفحه کلید Keyboard Shortcuts

• چالش گرید قیمت گذاری Pricing Grid Challenge

فرم HTML و عناصر ورودی HTML Form & Input Elements

• بخش معرفی Section Intro

• برچسب های فرم و ورودی Form & Input Tags

• برچسب های ورودی مبتنی بر متن Text-Based Input Tags

• ویژگی های فیلد ورودی Input Field Attributes

• Boxes & Textarea را انتخاب کنید Select Boxes & Textarea

• چک باکس ها و دکمه های رادیویی Checkboxes & Radio Buttons

• سایر فیلدهای ورودی Other Input Fields

• فهرست داده ها Datalist

• چالش فرم HTML HTML Form Challenge

عناصر HTML بیشتر More HTML Elements

• بخش معرفی Section Intro

• عنصر صوتی Audio Element

• عنصر ویدئو Video Element

• نقشه تصویر Image Map

• جداول Tables

• آی فریم Iframe

• ویژگی های جهانی Global Attributes

• عنصر SVG SVG Element

• پاپاور و جزئیات Popover & Details

• پیشرفت و متر Progress & Meter

مبانی CSS CSS Basics

• بخش معرفی Section Intro

• پیاده سازی CSS Implementing CSS

• انتخابگرهای اصلی CSS Basic CSS Selectors

• فونت ها در CSS Fonts In CSS

• خواص فونت و متن Font & Text Properties

• رنگ ها (نام رنگ، HEX، RGB، HSL) Colors (Color Names, HEX, RGB, HSL)

• ویژگی CSS CSS Specificity

• پس زمینه ها Backgrounds

• پیوندهای یک ظاهر طراحی شده Styling Links

• کتابخانه عالی فونت Font Awesome Library

• چالش مبانی CSS CSS Basics Challenge

مدل جعبه و موقعیت یابی Box Model & Positioning

• بخش معرفی Section Intro

• مدل جعبه توضیح داده شده است Box Model Explained

• اندازه و سرریز Sizing & Overflow

• لایه گذاری Padding

• لبه Margin

• انتخابگر جهانی و بازنشانی Universal Selector & Reset

• مرز ها Borders

• ویژگی نمایش Display Property

• ویژگی موقعیت Position Property

• سایه جعبه Box Shadow

• مینی پروژه فرم فریلنسری Freelance Form Mini-Project

• مینی پروژه کارت کفش Shoe Cards Mini-Project

فلکس باکس Flexbox

• بخش معرفی Section Intro

• فلکس باکس چیست؟ What Is Flexbox?

• اصول Flexbox - ظروف و اقلام Flexbox Basics - Containers & Items

• تراز و توجیه موارد Align & Justify Items

• ویژگی های فلکس و اندازه پویا Flex Properties & Dynamic Sizing

• سفارش فلکس Flex Order

• چالش طرح بندی Flexbox Flexbox Layout Challenge

• کارت قیمت گذاری CSS Mini-Project Pricing Card CSS Mini-Project

طراحی تعاملی Responsive Design

• بخش معرفی Section Intro

• طراحی ریسپانسیو چیست؟ What Is Responsive Design?

• طرح‌بندی‌ها و درصدهای انعطاف‌پذیر Flexible Layouts & Percentages

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

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

• داستان های رسانه Media Queries

• شبکه قیمت گذاری پاسخگو Responsive Pricing Grid

• طرح بندی Flexbox پاسخگو Responsive Flexbox Layout

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

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

مینی پروژه فرم فرود Landing Form Mini-Project

• معرفی پروژه Project Intro

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

• CSS پایه و سبک های هدر Base CSS & Header Styles

• محتوای اصلی انعطاف و تراز Main Content Flex & Alignment

• سبک های درونی Inner Styles

• طرح‌بندی موبایل و پرسش‌های رسانه Mobile Layout & Media Queries

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

• بخش معرفی Section Intro

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

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

• فیلترها Filters

• مینی پروژه اسکرول صاف Smooth Scroll Mini-Project

• Sticky Nav & Style On Scroll Sticky Nav & Style On Scroll

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

• لانه سازی Nesting

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

• معرفی پروژه Project Intro

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

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

• متن قهرمان Hero Text

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

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

• پاورقی Footer

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

• صفحه تماس Contact Page

• جلوه لایت باکس تصویر Image Lightbox Effect

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

• بخش معرفی Section Intro

• معرفی Git و GitHub Intro To Git & GitHub

• کلیدهای SSH را ایجاد کنید Generate SSH Keys

• Git Workflow & Commands 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 Testing

• ویژگی نقش Role Attribute

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

• عناصر توسعه یافته و پویا آریا Aria Expanded & Dynamic Elements

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

• بخش معرفی Section Intro

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

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

• عناصر شبه Pseudo Elements

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

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

• قبل و بعد از عناصر شبه before & after Pseudo Elements

• پوشش تصویر با :before Image Overlay With :before

• is()، Where() & has() is(), where() & has()

• فرم های یک ظاهر طراحی شده Styling Forms

• چالش انتخاب کنندگان Selectors Challenge

شبکه CSS CSS Grid

• بخش معرفی Section Intro

• نمای کلی شبکه CSS CSS Grid Overview

• ستون‌ها و شکاف شبکه Grid Columns & Gap

• تکرار() و minmax() repeat() & minmax()

• ردیف های شبکه Grid Rows

• چالش شبکه 1 Grid Challenge 1

• Align & Justify Properties Align & Justify Properties

• تکرار () با autofit & autofill repeat() With autofit & autofill

• موقعیت یابی و پوشا اقلام Positioning & Spanning Items

• به نام خطوط شبکه Named Grid Lines

• چالش شبکه 2 Grid Challenge 2

• CSS Grid & Media Queries CSS Grid & Media Queries

• مناطق الگوی شبکه Grid Template Areas

• Refactor شبکه خلاق Lumina Lumina Creative Grid Refactor

انتقال، انیمیشن و کمی جاوا اسکریپت Transitions, Animation & A Little JavaScript

• بخش معرفی Section Intro

• بررسی اجمالی انتقال Transitions Overview

• ایجاد انتقال Creating Transitions

• تبدیل ملک Transform Property

• مرکزیت مطلق با تبدیل/ترجمه Absolute Centering With Transform/Translate

• تبدیل های سه بعدی 3D Transforms

• معرفی جاوا اسکریپت و CSS JavaScript & CSS Intro

• منوی همبرگر Hamburger Menu

• فریم های کلیدی - قسمت 1 Keyframes - Part 1

• فریم های کلیدی - قسمت 2 (پویانمایی CSS Loader) Keyframes - Part 2 (CSS Loader Animation)

• مکعب دوار سه بعدی 3D Rotating Cube

• مینی پروژه وب سایت ارائه Presentation Website Mini-Project

پروژه وب سایت مدرس - قسمت 1 Tutor Website Project - Part 1

• معرفی پروژه Project Intro

• راه اندازی پروژه Project Setup

• پیمایش دسکتاپ Desktop Navigation

• ناوبری موبایل Mobile Navigation

• بخش قهرمان Hero Section

• Hero SVG & Media Queries Hero SVG & Media Queries

• پس زمینه نوار ناوبری در اسکرول Navbar Background On Scroll

• بخش یادگیری Learn Section

• بخش فصل ها Chapters Section

• بخش خلاصه Summary Section

پروژه وب سایت مدرس - قسمت 2 Tutor Website Project - Part 2

• بخش اطلاعات Info Section

• بخش غذای آماده Takeaway Section

• جزئیات و بخش نویسنده Details & Author Sections

• بخش آمار Stats Section

• بخش خبرنامه Newsletter Section

• پاورقی و نمادهای اجتماعی Footer & Social Icons

• صفحه تماس Contact Page

• قابلیت دسترسی را اضافه کنید Add Accessibility

• استقرار در Vercel & Formspree Setup Deploy To Vercel & Formspree Setup

پروژه وب سایت لنو (BEM) - قسمت 1 Leno Website Project (BEM) - Part 1

• معرفی پروژه Project Intro

• روش BEM توضیح داده شده است BEM Methodology Explained

• راه اندازی پروژه Project Setup

• نوار ناوبری و منوی دسکتاپ Navbar & Desktop Menu

• ناوبری موبایل Mobile Navigation

• بخش قهرمان Hero Section

• پس زمینه نوار ناوبری در اسکرول Navbar Background On Scroll

• بخش توصیفات Testimonials Section

• بخش ویژگی ها Features Section

• ویژگی های طرح موبایل Features Mobile Layout

پروژه وب سایت لنو (BEM) - قسمت 2 Leno Website Project (BEM) - Part 2

• بخش پیش نمایش Preview Section

• دکمه پخش متحرک Animated Play Button

• حالت ویدیویی Video Modal

• منطقه جزئیات Details Area

• بخش تصاویر صفحه Screenshots Section

• بخش دانلود Download Section

• پاورقی Footer

• صفحه جزئیات را ایجاد کنید Create The Details Page

• کارت های قیمت گذاری Pricing Cards

• جزئیات ویژگی ها Details Features

نتیجه Conclusion

• پایان دوره Course Wrap Up