دوره آموزشی CSS عملی برای No-Coders

دوره آموزشی CSS عملی برای No-Coders

⏱️ 2 ساعت 1 دقیقه📈 مبتدی📅 2023-05-09

مدرسین

Jen Kramer

Jen Kramer

Teaches web design and development

جزئیات دوره

اگر از یک ابزار بدون کدنویسی برای ساخت وب‌سایت خود استفاده می‌کنید، ممکن است احساس کنید که سایت شما کمی کلیشه‌ای به نظر می‌رسد. چگونه می‌توانید سایت خود را به طور منحصر به فرد بسازید؟ CSS وارد عمل می‌شود! CSS (Cascading Style Sheets) مسئول تمام زیبایی‌ها در وب است، از جمله رنگ‌ها، فونت‌ها، چیدمان‌ها و خیلی چیزهای دیگر. تنها چند خط کد CSS می‌تواند تغییرات دلخواه شما را اعمال کند، و مربی طراحی و توسعه وب، جن کِرمر، دقیقا به شما نشان می‌دهد که چگونه این کار را انجام دهید. جن شما را با CodePen آشنا می‌کند، ابزاری برای کار با HTML و CSS در داخل مرورگر وب، سپس توضیح می‌دهد که CSS چه کارهایی انجام می‌دهد و چگونه ساختاردهی می‌شود. او نحوه استفاده از انتخاب‌کننده‌ها برای اعمال CSS به صفحه شما را شرح می‌دهد، سپس وارد مفاهیم CSS مانند رنگ‌ها، تصاویر، جعبه‌ها، اندازه‌ها و نوع می‌شود. علاوه بر این، جن به مفاهیم و ویژگی‌های پیشرفته‌تر CSS، مانند استایل‌دهی به لینک‌ها، درک وراثت و رفع اشکال در ساختار شما می‌پردازد.
اهداف یادگیری: آشنایی با CSS و کاربرد آن در طراحی وب یادگیری استفاده از CodePen برای کار با HTML و CSS درک ساختار و عملکرد CSS آموزش استفاده از انتخاب‌کننده‌ها (selectors) در CSS اعمال تغییرات رنگ، تصویر، اندازه و فونت در CSS آشنایی با مفاهیم پیشرفته CSS مانند وراثت و رفع اشکال استایل‌دهی به لینک‌ها و تنظیمات نمایشی پیشرفته

مهارت ها

HTMLCSSWeb StandardsWeb DesignFront-End Web DevelopmentPersonaWeb DevelopmentOpen Source

سرفصل ها

0. مقدمه

  • 01 - طراحی وب برای بدون کدنویس
  • 02 - کار در CodePen
  • 03 - CSS چیست و چگونه ساختار یافته است

1. اعمال CSS در صفحه خود با انتخابگرها

  • 04 - نوشتن اولین نظر و انتخابگر عنصر
  • 05 - نوشتن انتخابگر کلاس
  • 06 - انتخابگرهای گروه بندی
  • 07 - انتخابگرهای نزولی
  • 08 - چالش - کار با انتخابگرها
  • 09 - راه حل - کار با سلکتورها

2. رنگ‌ها و تصاویر CSS

  • 10 - یک طرح رنگی را مشخص کنید
  • 11 - قالب‌بندی رنگ در CSS
  • 12 - رنگ پس زمینه و متن در CSS
  • 13 - درک تصاویر در CSS
  • 14 - کار با تصاویر پس زمینه در CSS
  • 15 - چالش - به این صفحه وب سبک دهید
  • 16 - راه حل - به این صفحه وب سبک دهید

3. جعبه‌ها، اندازه‌ها و نوع CSS

  • 17 - درک نوع در CSS
  • 18 - اعمال قالب‌بندی نوع با CSS
  • 19 - درک و اعمال اندازه در CSS
  • 20 - درک مدل جعبه در CSS
  • 21 - کار با حاشیه، padding و margin در CSS
  • 22 - چالش - به این صفحه استایل اضافه کنید
  • 23 - راه حل - یک ظاهر طراحی را به این صفحه اضافه کنید

4. مفاهیم و ویژگی‌های پیشرفته CSS

  • 24 - استایل دادن به لینک‌ها با CSS
  • 25 - درک وراثت در CSS
  • 26 - اشکال زدایی CSS با margins و رنگ‌های پس زمینه

نتیجه

  • 27 - مراحل بعدی

مشاهده دوره کامل

رفتن به دوره