فلش‌کارت‌های آموزشی آموزش سریع و تصویری HTML و CSS: طراحی وب‌سایت از پایه

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره آموزش سریع و تصویری HTML و CSS: طراحی وب‌سایت از پایه

موضوع کلی: توسعه وب

موضوع میانی: مبانی ساختار و استایل‌دهی وب

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

• 1. مقدمه‌ای بر وب و نحوه کار آن
• 2. آشنایی با HTML، CSS و نقش هرکدام
• 3. ساختار پایه یک سند HTML
• 4. بررسی تگ‌ها، عناصر و ت‌ها
• 5. ابزارهای مورد نیاز برای شروع کدنویسی
• 6. ایجاد اولین صفحه وب
• 7. تعریف عنوان صفحه با تگ `<title>`
• 8. کار با متادیتاها و تگ `<meta>`
• 9. ایجاد تیترها از `<h1>` تا `<h6>`
• 10. نوشتن پاراگراف با تگ `<p>`
• 11. ایجاد شکست خط و خط افقی
• 12. تأکید بر متن با `<strong>` و `<em>`
• 13. کار با تگ‌های `<b>` و `<i>`
• 14. نمایش متن اصلاح شده با `<del>` و `<ins>`
• 15. استفاده از اندیس بالا و پایین: `<sup>` و `<sub>`
• 16. ایجاد لیست‌های نامرتب ( گلوله‌ای)
• 17. ایجاد لیست‌های مرتب (شماره‌دار)
• 18. ساخت لیست‌های توصیفی
• 19. ایجاد لیست‌های تودرتو
• 20. مبانی لینک‌دهی با تگ `<a>`
• 21. لینک‌دهی به صفحات خارجی (مسیر مطلق)
• 22. لینک‌دهی بین صفحات داخلی سایت (مسیر نسبی)
• 23. لینک به بخش خاصی از یک صفحه (لینک‌های انکر)
• 24. باز کردن لینک در یک تب جدید
• 25. ایجاد لینک ایمیل (`mailto`)
• 26. قرار دادن تصویر در صفحه با تگ `<img>`
• 27. اهمیت و کاربرد ت `alt` برای تصاویر
• 28. کنترل ابعاد تصاویر با `width` و `height`
• 29. استفاده از تصاویر به عنوان لینک
• 30. کامنت‌گذاری در کد HTML
• 31. مفهوم عناصر بلاکی و درون‌خطی
• 32. CSS چیست و چرا از آن استفاده می‌کنیم؟
• 33. روش‌های افزودن CSS به HTML: داخلی، خارجی و درون‌خطی
• 34. اتصال فایل CSS خارجی به سند HTML
• 35. ساختار یک دستور CSS: انتخابگر، خصوصیت و مقدار
• 36. کامنت‌گذاری در فایل‌های CSS
• 37. انتخابگرهای نوع (Type Selectors)
• 38. انتخابگرهای کلاس (Class Selectors)
• 39. انتخابگرهای شناسه (ID Selectors)
• 40. گروه‌بندی انتخابگرها برای خلاصه‌نویسی
• 41. انتخابگرهای فرزند (Descendant Selectors)
• 42. تغییر رنگ متن با خصوصیت `color`
• 43. مدل‌های رنگی در وب: HEX، RGB و RGBA
• 44. تنظیم فونت با `font-family`
• 45. تنظیم اندازه فونت با `font-size`
• 46. تنظیم ضخامت فونت با `font-weight`
• 47. ایتالیک کردن متن با `font-style`
• 48. تراز کردن متن با `text-align`
• 49. افزودن خط به متن با `text-decoration`
• 50. تنظیم فاصله بین خطوط با `line-height`
• 51. تنظیم رنگ پس‌زمینه با `background-color`
• 52. استفاده از تصویر پس‌زمینه با `background-image`
• 53. کنترل تکرار تصویر پس‌زمینه
• 54. تعیین موقعیت تصویر پس‌زمینه
• 55. ثابت کردن تصویر پس‌زمینه هنگام اسکرول
• 56. خصوصیت خلاصه‌نویسی `background`
• 57. آشنایی با مدل جعبه‌ای (Box Model)
• 58. تنظیم عرض و ارتفاع عناصر
• 59. درک مفهوم `box-sizing`
• 60. ایجاد فاصله داخلی با `padding`
• 61. ایجاد فاصله خارجی با `margin`
• 62. وسط‌چین کردن عناصر با `margin: auto`
• 63. ایجاد کادر دور عناصر با `border`
• 64. تنظیم ضخامت، استایل و رنگ کادر
• 65. خصوصیت خلاصه‌نویسی `border`
• 66. گرد کردن گوشه‌های کادر با `border-radius`
• 67. استایل‌دهی به لیست‌ها: تغییر شکل نشانگر
• 68. استفاده از تصویر به عنوان نشانگر لیست
• 69. شبه‌کلاس‌ها: استایل‌دهی به حالت‌های مختلف لینک (`:hover`)
• 70. شبه‌عناصر: افزودن محتوا با `::before` و `::after`
• 71. موقعیت‌یابی عناصر: `position: static` و `position: relative`
• 72. موقعیت‌یابی مطلق: `position: absolute`
• 73. موقعیت‌یابی ثابت: `position: fixed`
• 74. کنترل ترتیب لایه‌ها با `z-index`
• 75. چیدمان ستونی با استفاده از `float`
• 76. حل مشکل درهم‌ریختگی `float` با `clear`
• 77. معرفی عناصر معنایی HTML5
• 78. ساختاردهی صفحه با `<header>`، `<footer>` و `<main>`
• 79. استفاده از `<nav>`، `<article>` و `<section>`
• 80. ایجاد جداول با `<table>`، `<tr>` و `<td>`
• 81. تعریف سرتیترهای جدول با `<thead>` و `<th>`
• 82. ادغام سلول‌های جدول: `colspan` و `rowspan`
• 83. استایل‌دهی به جداول با CSS
• 84. شروع کار با فرم‌ها: تگ `<form>`
• 85. ایجاد فیلدهای متنی یک خطی و چندخطی
• 86. فیلدهای ورودی ایمیل، رمز عبور و شماره تلفن
• 87. اتصال برچسب به فیلدهای فرم با تگ `<label>`
• 88. ساخت چک‌باکس‌ها
• 89. ساخت دکمه‌های رادیویی
• 90. گروه‌بندی فیلدها با `<fieldset>` و `<legend>`
• 91. ایجاد منوی کشویی با `<select>` و `<option>`
• 92. ایجاد دکمه ارسال فرم و دکمه‌های معمولی
• 93. مقدمه‌ای بر Flexbox برای چیدمان انعطاف‌پذیر
• 94. محورهای اصلی و متقاطع در Flexbox
• 95. تنظیم چیدمان افقی با `justify-content`
• 96. تنظیم چیدمان عمودی با `align-items`
• 97. مقدمه‌ای بر CSS Grid برای چیدمان‌های پیچیده
• 98. تعریف ستون‌ها و ردیف‌ها در Grid
• 99. طراحی واکنش‌گرا (Responsive) چیست؟
• 100. استفاده از Viewport متا تگ