حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
← بازگشت به دوره‌ها
دوره رایگان 40 گام یادگیری آموزش تعاملی

آموزش CSS از صفر؛ طراحی صفحه با Flexbox و Grid

CSS رو از صفر و با تمرین یاد بگیر؛ رنگ، فونت، فاصله، Flexbox و Grid رو امتحان کن و در پایان یک صفحه معرفی شخصی بساز.

مشاهده مسیر یادگیری
آموزش CSS از صفر؛ طراحی صفحه با Flexbox و Grid

این دوره به درد کی می‌خوره؟

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

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

از انتخابگرها، رنگ و فونت شروع می‌کنیم. بعد فاصله‌ها، اندازهٔ عنصرها، Flexbox و Grid رو با مثال و تمرین یاد می‌گیری. در ادامه برای فرم‌ها و دکمه‌ها ظاهر مشترک می‌سازی.

آخر دوره چی می‌سازی؟

یک صفحه معرفی شخصی با منو، بخش معرفی و مهارت‌ها، سه کارت پروژه و راه ارتباطی. HTML آماده است و تو ظاهر صفحه رو قدم‌به‌قدم کامل می‌کنی.

چطور تمرین می‌کنی؟

این دوره رایگانه و ۸ بخش و ۴۰ گام داره. اول مثال می‌بینی، بعد خروجی رو حدس می‌زنی، کد رو کامل می‌کنی و باگ‌ها رو پیدا می‌کنی. هر تمرین راهنمای مرحله‌ای داره.

پیش‌نیازها

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

دستاورد پایان دوره

طراح ظاهر وب

بج پایان دوره: طراح ظاهر وب

با تکمیل گام‌های الزامی دوره

آماده یادگیری هستید؟

شروع این دوره نیاز به تکمیل پیش‌نیازها دارد

مطالعهٔ همهٔ گام‌ها آزاد است. برای انجام فعالیت‌ها وارد حساب کاربری شوید تا وضعیت پیش‌نیازهای شما بررسی شود.

برای بررسی پیش‌نیازها وارد شوید

مسیر یادگیری

40 گام

انتخابگرهای CSS و ترتیب اعمال قانون‌ها رایگان

  1. آموزش اولین قانون CSS؛ رنگ‌کردن عنوان HTML
  2. پیش‌بینی آبشار CSS؛ کدام قانون هم‌ارزش برنده می‌شود؟
  3. آموزش انتخابگر کلاس CSS؛ استایل اختصاصی پیام موفقیت
  4. رفع تداخل ID و کلاس در CSS؛ تشخیص وزن انتخابگر
  5. آموزش انتخابگر نواده CSS؛ استایل متن داخل کارت

رنگ و تایپوگرافی فارسی با CSS رایگان

  1. آموزش color و background-color در CSS؛ متن خوانا روی زمینه
  2. پیش‌بینی font-size در CSS؛ ارث‌بری اندازه نوشته
  3. آموزش line-height در CSS؛ فاصله خوانای سطرهای فارسی
  4. رفع خطای راست‌چین فارسی در CSS؛ direction و text-align
  5. ساخت کارت متن فارسی با CSS؛ ترکیب رنگ و تایپوگرافی

مدل جعبه CSS؛ فاصله، حاشیه و اندازه نهایی رایگان

  1. آموزش مدل جعبه CSS؛ محتوا، padding، border و margin
  2. پیش‌بینی padding در CSS؛ تفاوت فاصله داخلی و عرض محتوا
  3. آموزش margin در CSS؛ فاصله افقی بیرون جعبه
  4. رفع خطای border در CSS؛ ضخامت، سبک و رنگ خط دور
  5. آموزش box-sizing در CSS؛ کارت با عرض نهایی ثابت

اندازه و نمایش عنصرها در CSS رایگان

  1. آموزش display در CSS؛ تفاوت block و inline
  2. پیش‌بینی inline-block در CSS؛ عرض مشخص داخل خط
  3. آموزش width و max-width در CSS؛ محدودکردن عرض کارت
  4. رفع خطای height و min-height در CSS؛ حداقل ارتفاع پنل
  5. آموزش overflow در CSS؛ کنترل متن بلند داخل کادر

چیدمان یک‌بعدی با Flexbox در CSS رایگان

  1. آموزش display:flex در CSS؛ ساخت ردیف ابزار
  2. پیش‌بینی flex-direction در CSS؛ چیدمان عمودی آیتم‌ها
  3. آموزش gap در Flexbox؛ فاصله برابر بین برچسب‌ها
  4. رفع خطای justify-content و align-items در CSS؛ دو محور فلکس
  5. آموزش flex-wrap در CSS؛ چندردیفی‌کردن کارت‌های کوچک

چیدمان دوبعدی با CSS Grid رایگان

  1. آموزش display:grid در CSS؛ ساخت شبکه کارت‌ها
  2. پیش‌بینی ستون‌های CSS Grid؛ تکرار خانه‌ها در ردیف بعد
  3. آموزش واحد fr در CSS Grid؛ تقسیم عرض به نسبت یک به دو
  4. رفع خطای gap در CSS Grid؛ محاسبه فاصله ردیف و ستون
  5. آموزش grid-column در CSS؛ گسترش عنوان روی دو ستون

اجزای قابل استفاده دوباره و فرم‌های CSS رایگان

  1. آموزش border-radius در CSS؛ گردکردن گوشه کارت
  2. پیش‌بینی box-shadow در CSS؛ سایه بیرونی بدون تغییر اندازه
  3. آموزش متغیرهای CSS؛ رنگ برند مشترک در کارت و دکمه
  4. رفع خطای CSS ورودی فرم؛ عرض کامل با border-box
  5. ساخت کلاس دکمه قابل استفاده دوباره در CSS؛ پایه و گونه اصلی

پروژه نهایی CSS؛ صفحه شخصی با Flexbox و Grid رایگان

  1. پروژه CSS؛ ساخت هدر و منوی صفحه شخصی با Flexbox
  2. پروژه CSS؛ بخش درباره من و برچسب مهارت‌های قابل استفاده دوباره
  3. پروژه CSS؛ رفع شبکه سه کارت پروژه با Grid
  4. پروژه CSS؛ طراحی بخش تماس و فوتر صفحه شخصی
  5. پروژه نهایی آموزش CSS؛ تکمیل صفحه شخصی با Flexbox و Grid