HTML/CSS

وب از صفر تا حرفه‌ای: HTML و CSS

از اولین تگ HTML تا یک توسعه‌دهنده‌ی واقعیِ فرانت‌اند — با پیش‌نمایشِ زنده و داوری که سورسِ تو را می‌سنجد.

۱۷۷درس
۱۳۸تمرین
۳۶ساعت
۹۴٪رضایت
مشاهده‌ی سرفصل‌ها
درباره‌ی دوره

چه چیزی یاد می‌گیری؟

وب از صفر تا حرفه‌ای: HTML و CSS

با زبانِ خودِ وب شروع کن — HTML برای ساختار و CSS برای ظاهر — و از اولین تگ تا یک توسعه‌دهنده‌ی واقعیِ فرانت‌اند پیش برو، دقیقاً به ترتیبِ آموزشیِ مرجع‌های طلاییِ جهان (MDN، web.dev و freeCodeCamp) و بدونِ یک خط JavaScript.

چه یاد می‌گیری؟

  • اسکلتِ سند و سرِ صفحه: charset، viewport، title، meta description، SEO، Open Graph و favicon
  • محتوای متنی: سرتیترها، پاراگراف، فهرست‌ها، نقل‌قول، code/pre، معناشناسیِ درون‌خطی و موجودیت‌ها
  • لینک‌ها و ناوبری، تصویرها و رسانه (img با alt و srcset، picture، figure، audio/video)
  • ساختارِ معنایی: header، nav، main، section، article، aside و footer
  • جدول‌ها و یک ماژولِ کاملِ فرم‌ها با همه‌ی input‌ها، label، fieldset، datalist و اعتبارسنجیِ مرورگری
  • آبشار، خاصیتِ ویژگی (specificity) و وراثت — هرکدام عمیق و با تمرکز
  • مدلِ جعبه، واحدها (px/rem/em/%/vw)، تایپوگرافی و فونت‌های وب (Google Fonts)
  • پس‌زمینه و گرادیان، border-radius، box-shadow، موقعیت‌دهی و z-index
  • Flexbox و CSS Grid، هرکدام یک ماژولِ کامل
  • طراحیِ واکنش‌گرا با media queries، transition و transform و انیمیشنِ keyframes
  • متغیرهای CSS، شمارنده‌ها و نام‌گذاریِ BEM، و امکاناتِ مدرن مثلِ clamp()، aspect-ratio و object-fit
  • یک ماژولِ کاملِ Bootstrap 5 و دو ماژولِ پروژه‌ی واقعیِ چندفایلی با تصویر

برای چه کسی؟

برای هر تازه‌واردی که می‌خواهد ساختِ وب‌سایت را از صفر و اصولی یاد بگیرد. هیچ پیش‌نیازی لازم نیست؛ تمام متنِ آموزشی به فارسی است و کدِ HTML/CSS به انگلیسی.

چرا این دوره؟

یک پیش‌نمایشِ زنده‌ی سندباکس‌شده نتیجه‌ی کارت را همان‌لحظه نشان می‌دهد و در کنارش یک داورِ سمت‌سرور نمره را از روی سورسِ کد می‌دهد، نه از روی پیکسلِ رندرشده — پس زیبایی را می‌بینی و درستی را داور از وجودِ تگ و کلاس و خصوصیتِ درست می‌سنجد. روی Flexbox، Grid، specificity و responsive عمداً کُند و عمیق پیش می‌رویم، چون تازه‌واردها دقیقاً همین‌جاها سکندری می‌خورند. هرچیزی که به JavaScript یا سرور نیاز دارد عمداً خارج از دامنه است تا یاد بگیری با خودِ HTML و CSS، تمیز و معنایی و دسترس‌پذیر، وب‌سایتِ واقعی بسازی.

۲۷ سرفصل ساخت‌یافته
۱۳۸ تمرین عملی
اجرا و بازخورد آنی در مرورگر
گواهی پایان دوره
ساخته‌ی تیم آموزشی دینا کد

این دوره را تیم آموزشی دینا کد طراحی کرده — با تمرکز بر «یادگیری با انجام‌دادن»: هر مفهوم با تمرین عملی و داوری خودکار که کدت را همان لحظه می‌سنجد، و سرفصل‌هایی که بر پایه‌ی مسیر واقعی یک برنامه‌نویس چیده شده‌اند.

سرفصل‌ها

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

۲۷ سرفصل · ۱۷۷ درس · ۱۳۸ تمرین

۱

وب چطور کار می‌کند و اولین صفحه‌ی HTML

۶ درس
  • وب چطور کار می‌کند و داور چطور صفحه‌ات را می‌سنجدپیش‌نمایش رایگان
  • آناتومیِ یک تگ HTMLپیش‌نمایش رایگان
  • اولین سرتیتر و پاراگرافپیش‌نمایش رایگانتمرین
  • این صفحه آماده است: یک سندِ سادهپیش‌نمایش رایگانتمرین
  • چند سرتیتر در سطوحِ مختلفپیش‌نمایش رایگانتمرین
  • تأکید با strong و emپیش‌نمایش رایگانتمرین
۲

اسکلتِ سند و سرِ صفحه (head): meta، SEO و favicon

۷ درس
  • اسکلتِ سند: doctype، html، head و bodyپیش‌نمایش رایگان
  • ساختِ اسکلتِ کاملِ سندپیش‌نمایش رایگانتمرین
  • charset، viewport و titleپیش‌نمایش رایگانتمرین
  • meta description، SEO و Open Graphپیش‌نمایش رایگان
  • افزودنِ توضیح و Open Graphپیش‌نمایش رایگانتمرین
  • favicon و وصل‌کردنِ فایلِ متادیتاپیش‌نمایش رایگانتمرین
  • این head آماده است: سرِ صفحه‌ی حرفه‌ایتمرین
۳

محتوای متنی: پاراگراف، فهرست، نقل‌قول و code

۷ درس
  • متن، فاصله و خطِ افقی
  • فهرستِ نامرتب و مرتبتمرین
  • فهرستِ تودرتوتمرین
  • فهرستِ توصیفی (dl/dt/dd)تمرین
  • نقل‌قول: blockquote و qتمرین
  • نمایشِ کد با code و preتمرین
  • این صفحه آماده است: یک مقاله‌ی متنیتمرین
۴

معناشناسیِ درون‌خطی، موجودیت‌ها و لینک‌ها

۷ درس
  • معناشناسیِ درون‌خطی: معنا در برابر ظاهر
  • نشانه‌گذاریِ معناییِ یک جملهتمرین
  • موجودیت‌های HTMLتمرین
  • لینک‌ها و ناوبری: نسبی، مطلق و لنگر
  • ساختِ چند لینکِ مختلفتمرین
  • لینکِ ایمن در تبِ جدیدتمرین
  • این بخش آماده است: فهرستِ پیوندهاتمرین
۵

تصویرها و رسانه: img، alt، picture و figure

۷ درس
  • تصویر و متنِ جایگزین (alt)
  • گذاشتنِ تصویر با alt معنادارتمرین
  • figure و figcaptionتمرین
  • تصاویرِ واکنش‌گرا: srcset و picture
  • تصویرِ واکنش‌گرا با pictureتمرین
  • ویدئو و صوت به‌صورتِ مارک‌آپتمرین
  • این گالری آماده است: چند تصویر با figureتمرین
۶

ساختارِ معنایی: header، nav، main، section و footer

۶ درس
  • چرا معناشناسی؟ landmarkها در برابر div
  • ساختِ اسکلتِ معناییِ صفحهتمرین
  • ناوبارِ معنایی با nav و فهرستتمرین
  • section و articleتمرین
  • aside و figure برای محتوای کناریتمرین
  • این صفحه آماده است: استخوان‌بندیِ کاملِ معناییتمرین
۷

جدول‌ها: ساختار، سرستون‌ها و دسترس‌پذیری

۶ درس
  • آناتومیِ جدولِ داده
  • جدولِ ساده با thead و tbodyتمرین
  • caption و سرستون با scopeتمرین
  • سلول‌های گسترده: colspan و rowspanتمرین
  • جدولِ کامل با tfootتمرین
  • این جدول آماده است: جدولِ قیمتِ داده‌محورتمرین
۸

فرم‌ها — بخشِ یک: input، label و انواعِ ورودی

۷ درس
  • فرم چیست؟ form، input و label
  • اولین فرم: نام و ایمیلتمرین
  • همه‌ی نوع‌های input
  • ورودی‌های ایمیل، رمز و عددتمرین
  • رادیو و چک‌باکستمرین
  • تاریخ، رنگ و فایلتمرین
  • این فرم آماده است: فرمِ ثبت‌نامتمرین
۹

فرم‌ها — بخشِ دو: textarea، select، گروه‌بندی و اعتبارسنجی

۷ درس
  • متنِ چندخطی و فهرستِ کشوییتمرین
  • گروه‌بندیِ گزینه‌ها با optgroup و datalistتمرین
  • گروه‌بندی با fieldset و legendتمرین
  • اعتبارسنجیِ بومیِ مرورگر (بدونِ JS)
  • افزودنِ اعتبارسنجی به فرمتمرین
  • دکمه‌های فرم: submit و resetتمرین
  • این فرم آماده است: فرمِ تماسِ کاملتمرین
۱۰

ورود به CSS: نحوه‌ی اتصال، انتخابگرهای پایه و رنگ

۶ درس
  • CSS چیست و چطور وصلش کنیم
  • اولین قانونِ CSS با فایلِ جداتمرین
  • انتخابگرِ نوع، کلاس و شناسهتمرین
  • رنگ در CSS: hex، rgb و hsl
  • رنگِ متن و پس‌زمینهتمرین
  • این صفحه آماده است: پالتِ رنگتمرین
۱۱

انتخابگرهای پیشرفته، شبه‌کلاس‌ها و شبه‌عنصرها

۷ درس
  • ترکیب‌کننده‌ها و انتخابگرِ ویژگی
  • هدف‌گیری با ترکیب‌کنندهتمرین
  • انتخابگرِ ویژگیتمرین
  • شبه‌کلاس‌ها و شبه‌عنصرها
  • حالتِ hover و focusتمرین
  • زوج و فرد با nth-childتمرین
  • افزودنِ محتوا با ::before و ::afterتمرین
۱۲

★ آبشار، خاصیتِ ویژگی (specificity) و وراثت

۶ درس
  • آبشار: وقتی چند قانون با هم می‌جنگند
  • محاسبه‌ی خاصیتِ ویژگی (specificity)
  • غلبه بر یک قانون با specificityتمرین
  • وراثت و کلیدواژه‌های inherit/initial/unset
  • تنظیمِ ارثِ فونت روی bodyتمرین
  • این مثال آماده است: نبردِ specificityتمرین
۱۳

★ مدلِ جعبه (Box Model): محتوا، padding، border و margin

۷ درس
  • چهار لایه‌ی جعبه
  • padding، border و marginتمرین
  • box-sizing: border-box و چرا حیاتی است
  • ریستِ سراسریِ border-boxتمرین
  • جعبه با عرضِ ثابت و فاصلهتمرین
  • display: block، inline و inline-blockتمرین
  • این کارت آماده است: جعبه با همه‌ی لایه‌هاتمرین
۱۴

واحدها، اندازه‌ها و سرریز

۶ درس
  • واحدها: px در برابر rem، em، % و vw/vh
  • اندازه‌گذاری با remتمرین
  • عرض با درصد و vwتمرین
  • min-width، max-width و aspect-ratioتمرین
  • مدیریتِ سرریز با overflowتمرین
  • اندازه‌ی پویا با calc() و clamp()تمرین
۱۵

تایپوگرافی و فونت‌های وب (Google Fonts)

۷ درس
  • آناتومیِ تایپوگرافیِ وب
  • خانواده، اندازه و وزنِ فونتتمرین
  • ارتفاعِ خط و فاصله‌ی متنتمرین
  • فونتِ وب با Google Fonts (CDN)
  • افزودنِ فونتِ Googleتمرین
  • تزیینِ متن: decoration و transformتمرین
  • این صفحه آماده است: سلسله‌مراتبِ تایپوگرافیتمرین
۱۶

پس‌زمینه، گرادیان، border-radius و box-shadow

۶ درس
  • پس‌زمینه و گرادیان
  • گرادیانِ خطی روی پس‌زمینهتمرین
  • گوشه‌های گرد با border-radiusتمرین
  • سایه با box-shadowتمرین
  • تصویرِ پس‌زمینه با coverتمرین
  • این کارت آماده است: کارتِ زیبا با سایه و گرادیانتمرین
۱۷

چیدمانِ طبیعی، display و موقعیت‌دهی (positioning)

۶ درس
  • جریانِ طبیعی و انواعِ موقعیت‌دهی
  • موقعیتِ relative و absoluteتمرین
  • هدرِ چسبان با stickyتمرین
  • نوارِ ثابت با fixedتمرین
  • لایه‌بندی با z-indexتمرین
  • float و clearِ قدیمی (فقط برای فهمِ کدِ قدیمی)
۱۸

★ Flexbox — چیدمانِ یک‌بُعدیِ منعطف

۷ درس
  • مدلِ ذهنیِ Flexbox: محورِ اصلی و متقاطع
  • اولین ظرفِ flexتمرین
  • جهت و شکستِ خط: direction و wrapتمرین
  • توزیعِ فضا: justify-content و align-itemsتمرین
  • وسط‌چینیِ کامل با Flexboxتمرین
  • رشد و کوچک‌شدنِ آیتم‌ها: flex و gapتمرین
  • این نوار آماده است: ناوبارِ flexتمرین
۱۹

★ CSS Grid — چیدمانِ دوبُعدیِ قدرتمند

۷ درس
  • مدلِ ذهنیِ Grid: ستون، ردیف و track
  • اولین گرید با ستون‌های frتمرین
  • repeat() و minmax()تمرین
  • گالریِ خودکارِ واکنش‌گرا با auto-fitتمرین
  • جای‌گذاریِ آیتم با grid-column و grid-rowتمرین
  • چیدمانِ نام‌دار با grid-template-areasتمرین
  • این صفحه آماده است: چیدمانِ کاملِ صفحه با Gridتمرین
۲۰

★ طراحیِ واکنش‌گرا (Responsive) و media queries

۷ درس
  • موبایل‌اول و فلسفه‌ی واکنش‌گرایی
  • اولین media queryتمرین
  • از یک‌ستونی به چندستونیتمرین
  • تایپوگرافیِ سیال با clamp()تمرین
  • تصویرِ واکنش‌گرا با object-fitتمرین
  • ناوبارِ واکنش‌گراتمرین
  • این صفحه آماده است: کارت‌های کاملاً واکنش‌گراتمرین
۲۱

transition، transform و انیمیشنِ keyframes

۶ درس
  • transition و transform
  • افکتِ نرمِ hover با transitionتمرین
  • تبدیل با transform: scale و rotateتمرین
  • انیمیشن با @keyframes
  • اولین انیمیشنِ keyframesتمرین
  • این کارت آماده است: کارتِ متحرک با hoverتمرین
۲۲

متغیرهای CSS، شبه‌عنصرها، شمارنده‌ها و BEM

۶ درس
  • متغیرهای سفارشیِ CSS
  • تم با متغیرهای :rootتمرین
  • شمارنده‌های خودکارِ CSSتمرین
  • نام‌گذاریِ BEM برای کدِ تمیز
  • بازنویسیِ کارت با BEMتمرین
  • این استایل‌شیت آماده است: CSSِ سازمان‌یافته با متغیر و BEMتمرین
۲۳

Bootstrap 5 — بخشِ یک: نصب، شبکه و یوتیلیتی‌ها

۷ درس
  • Bootstrap چیست و نصب با CDN
  • نصبِ Bootstrap و اولین containerتمرین
  • شبکه: container، row و colتمرین
  • ستون‌های ۱۲تایی و واکنش‌گراتمرین
  • یوتیلیتیِ فاصله: m و pتمرین
  • یوتیلیتیِ فلکس، متن و رنگتمرین
  • این بخش آماده است: هدر با شبکه و یوتیلیتیتمرین
۲۴

Bootstrap 5 — بخشِ دو: کامپوننت‌ها و ناوبار

۷ درس
  • دکمه و نشان (Badge)تمرین
  • کارت (Card)تمرین
  • هشدار و list-groupتمرین
  • استایلِ فرم با Bootstrapتمرین
  • ناوبار و نگاهی به اجزای JS‌محور
  • ساختِ ناوبارِ Bootstrapتمرین
  • این بخش آماده است: کارت‌ها و دکمه‌های Bootstrapتمرین
۲۵

پروژه‌های واقعی I: کارت، قیمت، منو و مقاله

۶ درس
  • سازماندهیِ پروژه‌ی چندفایلی و تصاویر
  • پروژه: کارتِ پروفایلتمرین
  • پروژه: جدولِ قیمت با سه پلنتمرین
  • پروژه: منوی رستورانتمرین
  • پروژه: صفحه‌ی مقاله‌ی وبلاگتمرین
  • این پروژه آماده است: کارتِ پروفایلِ کاملتمرین
۲۶

پروژه‌های واقعی II: لندینگ، پورتفولیو و سایتِ واکنش‌گرا

۶ درس
  • پروژه: لندینگِ محصولتمرین
  • پروژه: پورتفولیوی شخصیتمرین
  • پروژه‌ی capstone: داشبوردِ Bootstrap (sidebar + کارت‌ها)تمرین
  • پروژه‌ی capstone: سایتِ بازاریابیِ کاملاً واکنش‌گراتمرین
  • پروژه‌ی capstone: لندینگِ کامل با Bootstrapتمرین
  • این پروژه آماده است: لندینگِ محصولِ کامل و واکنش‌گراتمرین
۲۷

کارگاهِ ساختنی‌ها: پروژه‌های کوچک و باحال

۷ درس
  • بساز: کارتِ آب‌وهواتمرین
  • بساز: پلیرِ موزیکتمرین
  • بساز: کارتِ فیلمتمرین
  • بساز: بلیطِ کنسرتتمرین
  • هنرِ CSS: فنجانِ قهوه با بخارتمرین
  • بساز: صفحه‌ی ۴۰۴ خلاقانهتمرین
  • آماده: نشانِ دستاوردتمرین

همین حالا شروع کن

اولین خط کدت را همین امروز در «وب از صفر تا حرفه‌ای: HTML و CSS» بنویس. شروع رایگان است و در کمتر از دو دقیقه وارد محیط یادگیری می‌شوی.

وب از صفر تا حرفه‌ای: HTML و CSS — دینا کد