دینا کد
شروع رایگان
HTML/CSS۱۲ درس رایگان

آموزش HTML و CSS از صفر، برای طراحی سایت

در این دوره ساختن صفحهٔ وب را از اولین تگ HTML تا یک سایت واکنش‌گرا یاد می‌گیرید. کد را در مرورگر می‌نویسید و صفحه همان لحظه کنار آن ساخته می‌شود.

  • بدون نصب برنامه
  • از اولین تگ تا Flexbox، Grid و Bootstrap
  • درس‌های اول رایگان است
ببینید چه می‌سازید
درس
۱۷۷
فصل
۲۷
ساعت آموزش
۳۶
پایان دوره
گواهی
نمونه: سربرگ سایت با Flexbox
index.htmlسربرگ سایت با Flexbox
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<style>
  * { box-sizing: border-box; margin: 0; }
  body { font-family: system-ui, sans-serif; color: #e2e8f0; min-height: 100vh;
    background: radial-gradient(circle at 20% 0%, #1e3a8a, #0f172a 60%); }
  nav { display: flex; align-items: center; gap: 20px; padding: 16px 24px; }
  .logo { font-weight: 800; font-size: 20px; color: #fff; }
  .logo span { color: #fbbf24; }
  ul { display: flex; gap: 18px; list-style: none; padding: 0; margin-inline-start: auto; }
  a { color: #cbd5e1; text-decoration: none; font-size: 14px; }
  .cta { background: #fbbf24; color: #1c1917; padding: 8px 16px; border-radius: 999px; font-weight: 700; }
  header { text-align: center; padding: 28px 24px 40px; }
  h1 { font-size: 30px; line-height: 1.4; color: transparent;
    background: linear-gradient(90deg, #fde68a, #f472b6); -webkit-background-clip: text; background-clip: text; }
  p { margin-top: 8px; color: #94a3b8; }
  @media (max-width: 400px) { ul { display: none; } .cta { margin-inline-start: auto; } }
</style>
</head>
<body>
  <nav>
    <div class="logo">کافه<span>کتاب</span></div>
    <ul>
      <li><a href="#">منو</a></li>
      <li><a href="#">کتاب‌ها</a></li>
      <li><a href="#">تماس</a></li>
    </ul>
    <a class="cta" href="#">رزرو میز</a>
  </nav>
  <header>
    <h1>قهوهٔ تازه، کتاب خوب</h1>
    <p>هر روز از ساعت ۸ صبح تا ۱۱ شب</p>
  </header>
</body>
</html>
صفحه‌ای که این کد می‌سازد

نوار بالای سایت با لوگو، منو و دکمهٔ رزرو، و زیر آن تیتری با رنگ گرادیانی. در صفحهٔ باریک منو پنهان می‌شود و دکمه می‌ماند. نمونه‌های دیگر

آنچه یاد می‌گیرید

در این دوره چه چیزهایی یاد می‌گیرید

دوره از HTML شروع می‌شود، به CSS می‌رسد و با پروژه‌های کامل تمام می‌شود.

  1. فصل ۱ و ۲

    اولین صفحه و بخش head

    ساختار سند HTML را می‌سازید و بخش head را با charset، viewport، عنوان، توضیحات متا، Open Graph و favicon کامل می‌کنید.

  2. فصل ۳ و ۴ و ۵

    متن، لینک و تصویر

    پاراگراف، فهرست، نقل‌قول و کد را می‌نویسید، لینک می‌سازید و تصویر را با alt، srcset و figure درست در صفحه می‌گذارید.

  3. فصل ۶ و ۷

    ساختار معنایی و جدول

    صفحه را با header، nav، main، section و footer بخش‌بندی می‌کنید و جدولی دسترس‌پذیر با عنوان و سرستون می‌سازید.

  4. فصل ۸ و ۹

    فرم‌ها

    انواع ورودی، label، فهرست کشویی، fieldset و اعتبارسنجی مرورگر را در دو فصل یاد می‌گیرید.

  5. فصل ۱۰ و ۱۱ و ۱۲

    انتخابگرها، آبشار و وراثت

    CSS را به صفحه وصل می‌کنید، با انتخابگرهای پایه و پیشرفته کار می‌کنید و می‌فهمید چرا یک قانون بر قانون دیگر غلبه می‌کند.

  6. فصل ۱۳ و ۱۴ و ۱۵

    مدل جعبه، واحدها و تایپوگرافی

    فاصله‌ها را با padding و margin تنظیم می‌کنید، با rem، درصد، vw و clamp اندازه می‌دهید و با فونت وب متن خوانا می‌سازید.

  7. فصل ۱۶ و ۱۷

    رنگ، گرادیان و موقعیت‌دهی

    پس‌زمینهٔ گرادیانی، گوشهٔ گرد و سایه می‌سازید و عنصرها را با position و z-index روی هم می‌چینید.

  8. فصل ۱۸ و ۱۹ و ۲۰

    Flexbox، Grid و طراحی واکنش‌گرا

    هر کدام یک فصل کامل دارد: نوار ناوبری با Flexbox، چیدمان دوبعدی با Grid و صفحه‌ای که در موبایل و دسکتاپ درست دیده شود.

  9. فصل ۲۱ و ۲۲ و ۲۳ و ۲۴

    انیمیشن، متغیرها و Bootstrap

    با transition و keyframes حرکت می‌سازید، CSS را با متغیرها و نام‌گذاری BEM مرتب می‌کنید و با Bootstrap 5 صفحه را سریع‌تر می‌سازید.

  10. فصل ۲۵ و ۲۶ و ۲۷

    پروژه‌های کامل

    کارت پروفایل، جدول قیمت، صفحهٔ معرفی محصول، پورتفولیو و یک سایت واکنش‌گرا را از صفر می‌سازید. فصل آخر چند ساختنی کوچک دارد، مثل کارت آب‌وهوا و صفحهٔ ۴۰۴.

نمونه‌ها

نمونه‌هایی از صفحه‌هایی که می‌سازید

این شش صفحهٔ کوچک را برای همین صفحه نوشته‌ایم، همه برای یک کافه‌کتاب خیالی. کنار کد هر کدام، صفحه‌ای را می‌بینید که مرورگر از آن می‌سازد.

روش کار

یک درس چطور پیش می‌رود

  1. ۱

    توضیح را می‌خوانید

    هر درس یک مفهوم را با مثال توضیح می‌دهد و یک کار مشخص از شما می‌خواهد.

  2. ۲

    کد را می‌نویسید و صفحه را می‌بینید

    پیش‌نمایش زنده، صفحه‌ای را که می‌سازید با هر تغییر کد همان لحظه نشان می‌دهد.

  3. ۳

    داور کد را بررسی می‌کند

    داور دوره کد شما را می‌خواند و بررسی می‌کند که تگ، کلاس و ویژگی لازم سر جایش باشد. اگر گیر کردید، راهنمای همان تمرین کمکتان می‌کند.

سرفصل‌ها

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

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

۱

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

۶ درس
۲

اسکلتِ سند و سرِ صفحه (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 چه فرقی دارند؟
HTML ساختار و محتوای صفحه را می‌سازد: تیتر، متن، تصویر، فرم و جدول. CSS ظاهر همان صفحه را تعیین می‌کند: رنگ، فاصله، فونت و چیدمان.
برای یادگیری طراحی سایت از کجا شروع کنم؟
از HTML و CSS، چون پایهٔ هر صفحهٔ وب هستند. این دوره هر دو را از صفر و به ترتیب یاد می‌دهد. قدم بعد جاوااسکریپت است.
آیا این دوره جاوااسکریپت هم دارد؟
نه. دوره فقط HTML و CSS است تا ساختن یک صفحهٔ کامل را بدون برنامه‌نویسی یاد بگیرید. جاوااسکریپت دورهٔ جداگانهٔ خودش را دارد.
Flexbox، Grid و طراحی واکنش‌گرا هم در دوره هست؟
بله. هر کدام یک فصل کامل دارند. متغیرهای CSS، انیمیشن و Bootstrap 5 هم فصل‌های خودشان را دارند.
برای این دوره باید برنامه‌ای نصب کنم؟
نه. ویرایشگر و پیش‌نمایش صفحه در خود مرورگر هستند. کافی است وارد حساب کاربری‌تان شوید.
آیا درس‌های رایگان دارد؟
بله. درس‌های ابتدایی دوره رایگان است و برای شروع پرداختی لازم نیست.
در پایان دوره گواهی می‌گیرم؟
بله. وقتی همهٔ تمرین‌ها را تمام کنید، گواهی پایان دوره با یک شمارهٔ استعلام می‌گیرید که هر کسی می‌تواند درستی آن را در سایت بررسی کند.

همین امروز شروع کنید

اولین صفحهٔ وبتان را همین امروز در مرورگر بسازید. شروع رایگان است و در کمتر از دو دقیقه وارد محیط یادگیری می‌شوید.

آموزش HTML و CSS از صفر (طراحی سایت) — دینا کد