آموزش آشنایی با HTML و CSS

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

معرفی Introduction

• معرفی Introduction

• ابزارها و راه اندازی Tools and Setup

• دانلود کد این دوره Downloading Code for this Course

درختان Trees

• درختان Trees

• مفهومی کنار: ساختارهای داده Conceptual Aside: Data Structures

• زبان درختان The Language of Trees

• موتور کنار: واقعا درخت نیست Engine Aside: Not Really a Tree

• پیمایش و جستجو Traversal and Search

• درک درختان Understanding Trees

HTML HTML

• HTML HTML

• یک سند A Document

• Conceptual Aside: User Agents Conceptual Aside: User Agents

• نشانه گذاری: توصیف محتوا Markup: Describing Content

• زبان: معنی ثابت Language: Consistent Meaning

• مفهومی کنار: معناشناسی و تألیف Conceptual Aside: Semantics and Authoring

• برچسب ها، ویژگی ها و عناصر Tags, Attributes, and Elements

• عناصر و درختان Elements and Trees

• نشانه گذاری همه جا است Markup is Everywhere

• مفهومی کنار: مشخصات Conceptual Aside: Specifications

• مشخصات HTML The HTML Specification

• کنار مفهومی: نویسنده در مقابل مجری Conceptual Aside: Author vs Implementor

• مدل های محتوا و انواع محتوا Content Models and Kinds of Content

سند The Document

• سند The Document

• یک نقطه شروع A Starting Point

• انواع اسناد Document Types

• ریشه The Root

• فراداده Metadata

• محتوا Content

بخش های سند Document Sections

• بخش های سند Document Sections

• طرح کلی The Outline

• ترکیبات خودکفا Self-Contained Compositions

• گروه بندی موضوعی Thematic Groupings

• محتوای مماسی Tangential Content

• سرفصل ها و رتبه ها Headings and Rank

• سرصفحه ها و پاورقی ها Headers and Footers

• آدرس ها Addresses

گروه بندی چیزها Grouping Things

• گروه بندی چیزها Grouping Things

• پاراگراف ها Paragraphs

• آیا نشانه گذاری نامعتبر را گرفتید؟ Did You Catch The Invalid Markup?

• نقل قول ها Quotes

• لیست های نامرتب Unordered Lists

• لیست های مرتب شده Ordered Lists

• یک بررسی سریع A Quick Check

• فهرست های انجمن Association Lists

• محتوای چند بعدی Multidimensional Content

• محتوای چند بعدی و انجام اشتباه آن Multidimensional Content and Doing It Wrong

• محتوای غالب Dominant Content

• div و انجام آن اشتباه است div and Doing It Wrong

متن خود را Text Itself

• متن خود را Text Itself

• تاکید Emphasis

• اهمیت Importance

• نظرات جانبی Side Comments

• آیا نشانه گذاری نامعتبر را پیدا کرده اید؟ Have You Found The Invalid Markup?

• خط می شکند Line Breaks

• نظرات نویسنده Author's Comments

• span و انجام آن اشتباه span and Doing It Wrong

• تفکر معنایی Thinking Semantically

مرورگر و DOM The Browser and the DOM

• مرورگر و DOM The Browser and the DOM

• کنار مفهومی: HTTP Conceptual Aside: HTTP

• تگ های لنگر و فرامتن Anchor Tags and Hypertext

• Conceptual Aside: User Agents (دوباره) Conceptual Aside: User Agents (again)

• مفهومی کنار: مرورگر Conceptual Aside: The Browser

• چشمک زدن: یک موتور رندر Blink: A Rendering Engine

• موتور کنار: تجزیه Engine Aside: Parsing

• منابع شخصیت نامگذاری شده Named Character References

• مفهومی کنار: اشیاء Conceptual Aside: Objects

• مفهومی کنار: مدل ها Conceptual Aside: Models

• مدل شیء سند The Document Object Model

• ساخت DOM Building the DOM

• Conceptual Aside: Developer Tools Conceptual Aside: Developer Tools

• بازرس The Inspector

• تگ های لنگر (دوباره) Anchor Tags (again)

• موتور کنار: گکو Engine Aside: Gecko

• موتور کنار: WebKit Engine Aside: WebKit

دسترسی Accessibility

• دسترسی Accessibility

• مفهومی کنار: دسترسی Conceptual Aside: Accessibility

• مفهومی کنار: خوانندگان صفحه Conceptual Aside: Screen Readers

• معناشناسی و دسترسی Semantics and Accessibility

• آریا ARIA

تعامل Interactivity

• تعامل Interactivity

• جهت یابی Navigation

• موتور کنار: فرم ها و HTTP Engine Aside: Forms and HTTP

• فرم ها، فیلدها و برچسب ها Forms, Fields, and Labels

• دکمه ها Buttons

• فیلدهای بیشتر More Fields

• حتی بیشتر زمینه ها Even More Fields

چارچوب های جاوا اسکریپت JavaScript Frameworks

• چارچوب های جاوا اسکریپت JavaScript Frameworks

• کنار مفهومی: دستکاری DOM Conceptual Aside: DOM Manipulation

• React، Angular، Vue و HTML Authoring React, Angular, Vue, and HTML Authoring

شیوه نامه ها و درختان پرس و جو Stylesheets and Querying Trees

• شیوه نامه ها و درختان پرس و جو Stylesheets and Querying Trees

• مفهومی کنار: پرس و جو از یک درخت Conceptual Aside: Querying a Tree

• مشخصات CSS The CSS Specifications

• صفحه سبک عامل کاربر User Agent Stylesheet

• انتخابگرهای نوع Type Selectors

• اعلامیه ها Declarations

• وراثت Inheritance

• شیوه نامه نویسنده Author Stylesheets

• انتخابگر جهانی Universal Selector

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

• انتخابگر شناسه ID Selector

• انتخابگر کلاس Class Selector

• انتخابگرهای گروه بندی Grouping Selectors

• ترکیب کننده ها: نواده Combinators: Descendant

• ترکیب کننده ها: کودک Combinators: Child

• ترکیب‌کننده‌ها: برادر بعدی Combinators: Next-Sibling

• ترکیب کننده ها: خواهر و برادر بعدی Combinators: Subsequent Sibling

• مفهومی کنار: استانداردها و پیش نویس های CSS Conceptual Aside: CSS Standards and Drafts

• پشتیبانی از مرورگر (caniuse و MDN) Browser Support (caniuse and MDN)

• شبه کلاس های نمایه شده با کودک Child-Indexed Pseudo-classes

• کلاس های شبه نمایه شده با Child تایپ شده (و اشکال زدایی یک مشکل) Typed Child-Indexed Pseudo-classes (and Debugging a Problem)

• عملکرد کاربر شبه کلاس ها User Action Pseudo-classes

• شبه کلاس های ورودی Input Pseudo-classes

• نفی شبه کلاس Negation Pseudo-class

• شبه عناصر Pseudo-elements

• آبشار The Cascade

• اهمیت Importance

• اهمیت Importance

• اختصاصی Specificity

• ترتیب ظاهر Order of Appearance

• لایه های آبشاری و @import Cascade Layers and @import

• مقادیر ارثی، اولیه و مشخص شده inherit, initial, and Specified Values

• مسابقات-هر کلاس شبه Matches-Any Pseudo Class

• کلاس شبه ویژگی تنظیم Specificity-Adjustment Pseudo Class

• بهينه سازي Optimization

• موتور کنار: CSSOM Engine Aside: The CSSOM

مدل جعبه Box Model

• مدل جعبه Box Model

• مفهومی کنار: ارائه Conceptual Aside: Rendering

• مدل قالب‌بندی بصری Visual Formatting Model

• مدل جعبه Box Model

• مدل جعبه Box Model

• Viewport و مختصات Viewport and Coordinates

• موتور کنار: چیدمان Engine Aside: Layout

• کنار مفهومی: پیکسل ها، تراکم پیکسلی و پیکسل های مرجع Conceptual Aside: Pixels, Pixel Density, and Reference Pixels

• واحدها و مقادیر محاسبه شده Units and Computed Values

• موتور کنار: اندازه ذاتی Engine Aside: Intrinsic Size

• اندازه جعبه Box Sizing

• مفهومی کنار: توابع Conceptual Aside: Functions

• کالک، حداقل، حداکثر، گیره Calc, min, max, clamp

• موتور کنار: قالب بندی زمینه ها Engine Aside: Formatting Contexts

موقعیت جعبه Box Position

• موقعیت جعبه Box Position

• طرح های موقعیت یابی Positioning Schemes

• استاتیک Static

• نسبت فامیلی Relative

• مطلق Absolute

• درست شد Fixed

• چسبنده Sticky

نقاشی و تصاویر Painting and Images

• رنگ آمیزی Painting

• موتور کنار: نقاشی Engine Aside: Painting

• دید Visibility

• Z-Index Z-Index

• تصاویر: img Images: img

جریان Flow

• جریان Flow

• نمایش دادن Display

• مسدود کردن Block

• شناور Float

• خطی، تراز عمودی، خط-ارتفاع و موارد دیگر Inline, Vertical Align, Line-Height and More

• flow-root و BFCs flow-root and BFCs

• مفهومی کنار: پشتیبانی چند زبانه Conceptual Aside: Multilingual Support

• حالت نوشتن Writing Mode

• جهت Direction

• جهت گیری متن Text-Orientation

• خواص منطقی Logical Properties

• یادداشت Sticky Nav Sticky Nav Note

• Inline-Block Inline-Block

• هیچ یک None

• جدول، فهرست آیتم و موارد دیگر Table, List-Item, and More

فلکس باکس Flexbox

• فلکس باکس Flexbox

• زمینه قالب بندی فلکس Flex Formatting Context

• جهت جریان Flow Direction

• نمایش سفارش Display Order

• بسته بندی و سرریز Wrapping and Overflow

• فلکس Flex

• هم ترازی Alignment

• سقوط - فروپاشی Collapse

• Inline-Flex Inline-Flex

توری Grid

• توری Grid

• زمینه قالب بندی شبکه Grid Formatting Context

• مفهومی کنار: واحدهای کسری Conceptual Aside: Fractional Units

• اندازه آهنگ Track Sizing

• قرار دادن آیتم Item Placement

• تکرار آهنگ Track Repetition

• تراز و فاصله Alignment and Spacing

• لایه بندی Layering

• یک تغییر بصری A Visual Change

فونت ها، رنگ ها و موارد دیگر Fonts, Colors, and More

• فونت ها، رنگ ها و موارد دیگر Fonts, Colors, and More

• فونت ها Fonts

• رنگ های هگزادسیمال، RBG و نامگذاری شده Hexadecimal, RBG, and Named Colors

• کدورت Opacity

• پس زمینه ها Backgrounds

• انتقال ها Transitions

• تصاوير متحرك Animations

• تصاویر: SVG Images: SVGs

• یک تغییر معنایی A Semantic Change

• طراحی بصری و تجربه کاربری Visual Design and User Experience

پاسخگویی و پرسشگری رسانه Responsiveness and Querying Media

• پاسخگویی و پرسشگری رسانه Responsiveness and Querying Media

• مفهومی کنار: رسانه Conceptual Aside: Media

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

• درگاه های دید و زوم Viewports and Zoom

• ویژگی های رسانه Media Features

• اول موبایل Mobile First

• تصاویر: srcset و تصویر Images: srcset and picture

• چاپ Print

صرفه جویی در زمان و تلاش Saving Time and Effort

• صرفه جویی در زمان و تلاش Saving Time and Effort

• ویژگی های سفارشی برای متغیرهای آبشاری Custom Properties for Cascading Variables

• کوچک سازی Minification

• اعتبار سنجی HTML HTML Validation

چارچوب های CSS CSS Frameworks

• چارچوب های CSS CSS Frameworks

• بهتر از چارچوب بودن Being Better Than Frameworks

نتیجه Conclusion

• نتیجه Conclusion

• شما یک نویسنده هستید You Are An Author

• جایزه Bonus