کتاب صوتی طراحی و ساخت صفحات وب با HTML و CSS

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

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

عنوان دوره: دوره طراحی و ساخت صفحات وب با HTML و CSS

موضوع کلی: فناوری اطلاعات و ارتباطات

موضوع میانی: توسعه وب

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

• 1. مقدمه‌ای بر فناوری اطلاعات و ارتباطات
• 2. آشنایی با مفاهیم وب و اینترنت
• 3. تاریخچه وب و پروتکل‌های آن
• 4. مبانی HTML: ساختار صفحات وب
• 5. تگ‌های اساسی HTML: سربرگ، پاراگراف، لینک
• 6. عناصر تیتر و اهمیت آن‌ها در سئو
• 7. استفاده از تگ‌های پاراگراف و شکست خط
• 8. ایجاد لینک‌های داخلی و خارجی
• 9. کاربرد تگ `<a>` برای ناوبری
• 10. مدیریت تصاویر در صفحات وب
• 11. تگ `<img>` و مشخصات آن
• 12. انواع فرمت‌های تصویری مناسب وب
• 13. توضیحات جایگزین برای تصاویر (alt text)
• 14. ساخت لیست‌ها در HTML
• 15. لیست‌های مرتب (ordered lists)
• 16. لیست‌های نامرتب (unordered lists)
• 17. لیست‌های توضیحات (description lists)
• 18. جداول در HTML
• 19. ساخت جداول با `<table>`
• 20. سلول‌های سربرگ و داده در جداول
• 21. ادغام سلول‌ها در جداول
• 22. فرم‌ها در HTML
• 23. تگ `<form>` و روش‌های ارسال داده
• 24. انواع فیلدهای ورودی: `text`, `password`, `email`
• 25. دکمه‌های رادیویی و چک‌باکس‌ها
• 26. انتخاب‌گرها و ناحیه‌های متنی
• 27. مبانی CSS: استایل‌دهی به صفحات وب
• 28. مفهوم انتخاب‌گرها (selectors) در CSS
• 29. استفاده از انتخاب‌گرهای تگ، کلاس و شناسه
• 30. قواعد CSS: ویژگی‌ها و مقادیر
• 31. نحوه اعمال استایل‌ها: inline, internal, external
• 32. استایل‌دهی به متن: فونت، اندازه، رنگ، تراز
• 33. تنظیم فونت‌ها و خانواده فونت‌ها
• 34. کاربرد `font-weight` و `font-style`
• 35. تراز متن و `text-decoration`
• 36. مدیریت رنگ و پس‌زمینه
• 37. استفاده از رنگ‌ها (نام، کد هگز، RGB)
• 38. تنظیم رنگ متن و پس‌زمینه
• 39. خاصیت `background-image`
• 40. مدل جعبه‌ای (Box Model) در CSS
• 41. عرض، ارتفاع، حاشیه (margin) و padding
• 42. تنظیم `border` و انواع آن
• 43. آشنایی با `box-sizing`
• 44. چیدمان عناصر: Flexbox
• 45. مفاهیم اصلی Flexbox
• 46. جهت‌دهی و ترازبندی در Flexbox
• 47. توزیع فضا بین آیتم‌ها
• 48. چیدمان عناصر: Grid
• 49. مفاهیم اصلی Grid
• 50. تعریف سطرها و ستون‌ها
• 51. نحوه قرار دادن آیتم‌ها در Grid
• 52. استفاده از واحدهای نسبی و مطلق
• 53. واحد `px`, `%`, `em`, `rem`, `vw`, `vh`
• 54. کاربرد واحدهای نسبی در طراحی واکنش‌گرا
• 55. رسانه کوئری‌ها (Media Queries)
• 56. مفهوم طراحی واکنش‌گرا
• 57. نوشتن Media Queries برای دستگاه‌های مختلف
• 58. استفاده از `min-width` و `max-width`
• 59. طراحی فرم‌های کاربرپسند
• 60. اعتبارسنجی فرم‌ها در سمت کاربر (JavaScript)
• 61. استایل‌دهی به عناصر فرم
• 62. بهبود تجربه کاربری در فرم‌ها
• 63. ساخت منوهای ناوبری
• 64. انواع منوهای افقی و عمودی
• 65. استفاده از لیست‌ها و لینک‌ها برای منوها
• 66. انیمیشن‌های ساده در CSS
• 67. خاصیت `transition` برای تغییرات نرم
• 68. ایجاد انیمیشن با `keyframes`
• 69. کاربرد انیمیشن در بهبود ظاهر وب‌سایت
• 70. بهینه‌سازی تصاویر برای وب
• 71. فشرده‌سازی تصاویر بدون افت کیفیت
• 72. انتخاب فرمت مناسب تصویر (JPEG, PNG, SVG)
• 73. استفاده از تصاویر واکنش‌گرا
• 74. مبانی SEO برای صفحات وب
• 75. اهمیت تگ‌های عنوان و متا
• 76. استفاده صحیح از تیترها (H1-H6)
• 77. بهینه‌سازی توضیحات تصاویر
• 78. ساختار لینک‌دهی داخلی
• 79. آشنایی با ابزارهای توسعه‌دهنده مرورگر
• 80. بازرسی عناصر HTML و CSS
• 81. عیب‌یابی مشکلات استایل‌دهی
• 82. مشاهده درخواست‌های شبکه
• 83. ساخت اسلایدر ساده با CSS
• 84. پیاده‌سازی اسلایدر با استفاده از چک‌باکس‌ها
• 85. استفاده از `overflow: hidden`
• 86. ایجاد اسلایدرهای مبتنی بر جاوا اسکریپت (مقدماتی)
• 87. مبانی جاوا اسکریپت برای تعامل (اختیاری)
• 88. تغییر محتوا با جاوا اسکریپت
• 89. مدیریت رویدادها (کلیک، هاور)
• 90. پروژه‌های عملی: ساخت یک صفحه معرفی
• 91. طراحی ساختار HTML برای صفحه معرفی
• 92. استایل‌دهی با CSS
• 93. افزودن تصاویر و لینک‌ها
• 94. پروژه‌های عملی: ساخت یک صفحه نمونه کار
• 95. ساختار HTML برای نمایش نمونه کارها
• 96. طراحی گرید برای نمایش آیتم‌ها
• 97. استایل‌دهی جذاب
• 98. پروژه‌های عملی: ساخت یک صفحه تماس با ما
• 99. طراحی فرم تماس
• 100. استایل‌دهی به فرم و دکمه‌ها