آموزش مبانی مدرن HTML و CSS - آخرین آپدیت

مقدمه Introduction

• مقدمه‌ای بر تخصص Introduction to the Specialization

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

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

• ویرایشگر و محیط VS Code VS Code Editor & Environment

HTML ضروری Essential HTML

• مقدمه بخش Section Intro

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

• تگ‌ها و ویژگی‌های HTML HTML Tags & Attributes

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

• استفاده از Live Server و Prettier Live Server & Prettier

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

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

• عنوان‌ها، پاراگراف‌ها و تأکید Headings, Paragraphs & Emphasis

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

• لیست‌ها Lists

• تگ‌های لینک (Anchor) Anchor Tags

• تصاویر Images

• عناصر Block در مقابل Inline Block vs Inline Elements

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

• عناصر Div و Span Divs & Spans

• کلاس‌ها و IDها Classes & IDs

• عناصر معنایی (Semantic) 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

• جعبه‌های انتخاب (Select) و Textarea Select Boxes & Textarea

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

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

• لیست داده (Datalist) Datalist

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

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

• مقدمه بخش Section Intro

• عنصر صوتی (Audio) Audio Element

• عنصر ویدیو (Video) Video Element

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

• جداول Tables

• آی‌فریم (Iframe) Iframe

• ویژگی‌های عمومی Global Attributes

• عنصر SVG SVG Element

• المان‌های Popover و Details Popover & Details

• المان‌های Progress و Meter 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 (Specificity) CSS Specificity

• پس‌زمینه‌ها Backgrounds

• استایل‌دهی به لینک‌ها Styling Links

• کتابخانه Font Awesome Font Awesome Library

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

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

• مقدمه بخش Section Intro

• توضیح مدل جعبه (Box Model) Box Model Explained

• اندازه‌گذاری و سرریز (Overflow) Sizing & Overflow

• فاصله داخلی (Padding) Padding

• فاصله بیرونی (Margin) Margin

• انتخاب‌گر عمومی و Reset Universal Selector & Reset

• حاشیه‌ها (Borders) Borders

• ویژگی Display Display Property

• ویژگی Position Position Property

• سایه جعبه (Box Shadow) Box Shadow

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

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

فلکس‌باکس (Flexbox) Flexbox

• مقدمه بخش Section Intro

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

• مبانی فلکس‌باکس: کانتینرها و آیتم‌ها Flexbox Basics - Containers & Items

• تراز کردن و توزیع آیتم‌ها Align & Justify Items

• ویژگی‌های Flex و اندازه‌گذاری پویا Flex Properties & Dynamic Sizing

• ترتیب در فلکس (Flex Order) Flex Order

• چالش چیدمان با Flexbox Flexbox Layout Challenge

• پروژه کوچک CSS کارت قیمت‌گذاری Pricing Card CSS Mini-Project