فلش‌کارت‌های آموزشی طراحی و پیاده‌سازی رابط کاربری وب با فیگما، HTML و CSS

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

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

عنوان دوره: دوره طراحی و پیاده‌سازی رابط کاربری وب با فیگما، HTML و CSS

موضوع کلی: طراحی و توسعه وب

موضوع میانی: طراحی رابط کاربری وب با ابزارهای مدرن

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

• 1. مقدمه‌ای بر طراحی و توسعه وب
• 2. آشنایی با اصول طراحی رابط کاربری (UI)
• 3. مبانی تجربه کاربری (UX) در وب
• 4. معرفی نرم‌افزار فیگما برای طراحی رابط کاربری
• 5. نصب و راه‌اندازی فیگما
• 6. آشنایی با محیط کاربری فیگما
• 7. ایجاد پروژه‌های جدید در فیگما
• 8. کار با اشکال هندسی و عناصر پایه در فیگما
• 9. استفاده از متن و تایپوگرافی در فیگما
• 10. مدیریت رنگ و گرادیانت‌ها در فیگما
• 11. کار با لایه‌ها و گروه‌بندی در فیگما
• 12. استفاده از Grid و Layout در فیگما
• 13. طراحی Responsive در فیگما
• 14. ایجاد کامپوننت‌ها و استایل‌ها در فیگما
• 15. کار با Auto Layout در فیگما
• 16. پروتوتایپینگ و ایجاد تعاملات اولیه در فیگما
• 17. اشتراک‌گذاری طرح‌ها در فیگما
• 18. خروجی گرفتن از طرح‌ها در فیگما
• 19. مقدمه‌ای بر زبان نشانه‌گذاری ابرمتن (HTML)
• 20. ساختار اصلی یک سند HTML
• 21. تگ‌های اصلی HTML: `<!DOCTYPE>`, `<html>`, `<head>`, `<body>`
• 22. عناصر متنی: عناوین (`<h1>` تا `<h6>`)، پاراگراف (`<p>`)
• 23. عناصر لیست: لیست‌های مرتب (`<ol>`) و نامرتب (`<ul>`)
• 24. پیوندها (`<a>`) و نحوه ایجاد لینک
• 25. تصاویر (`<img>`) و خصوصیات آن
• 26. جداول (`<table>`) و ساختار آن
• 27. فرم‌ها (`<form>`) و عناصر ورودی (`<input>`, `<textarea>`)
• 28. تگ‌های معنایی HTML5: `<header>`, `<footer>`, `<nav>`, `<article>`, `<section>`, `<aside>`
• 29. استفاده از `<div>` و `<span>` برای گروه‌بندی
• 30. کدنویسی تمیز و خوانا در HTML
• 31. مقدمه‌ای بر زبان برگه‌های آبشاری (CSS)
• 32. نحو و ساختار CSS
• 33. روش‌های اعمال CSS: درون‌خطی، داخلی، خارجی
• 34. انتخابگرهای CSS: تگ، کلاس، شناسه
• 35. ویژگی‌های عمومی CSS: رنگ (`color`)، پس‌زمینه (`background`)
• 36. مدیریت متن و تایپوگرافی با CSS: فونت (`font-family`)، اندازه (`font-size`)، وزن (`font-weight`)
• 37. سبک‌دهی به لینک‌ها و لیست‌ها در CSS
• 38. مدیریت تصاویر با CSS
• 39. مدل جعبه‌ای (Box Model) در CSS: حاشیه (`margin`)، فاصله داخلی (`padding`)، مرز (`border`)
• 40. عرض (`width`) و ارتفاع (`height`) عناصر
• 41. نمایش (`display`) و موقعیت (`position`) عناصر
• 42. فلوت (`float`) و پاکسازی فلوت (`clear`)
• 43. استفاده از Flexbox برای چیدمان
• 44. استفاده از Grid برای چیدمان
• 45. طراحی Responsive با Media Queries
• 46. انتقال‌ها (Transitions) در CSS
• 47. تبدیلات (Transforms) در CSS
• 48. انیمیشن‌ها (Animations) در CSS
• 49. استفاده از فونت‌های سفارشی (Web Fonts)
• 50. طراحی فرم‌ها با CSS
• 51. سبک‌دهی به جداول با CSS
• 52. استفاده از CSS Variables
• 53. مقدمه‌ای بر ابزارهای توسعه‌دهنده مرورگر
• 54. بازرسی عناصر HTML و CSS
• 55. اشکال‌زدایی (Debugging) CSS
• 56. بهینه‌سازی عملکرد وب‌سایت
• 57. اصول دسترسی‌پذیری (Accessibility) در وب
• 58. مقدمه‌ای بر فریم‌ورک‌های CSS (اختیاری و با احتیاط)
• 59. معرفی Bootstrap (با تمرکز بر اصول و اجزا)
• 60. معرفی Tailwind CSS (با تمرکز بر اصول و utility classes)
• 61. یکپارچه‌سازی فیگما با HTML و CSS
• 62. تبدیل طرح‌های فیگما به کد HTML و CSS
• 63. استفاده از CSS Preprocessors (مانند Sass/SCSS)
• 64. مفاهیم اولیه Sass/SCSS: متغیرها، تو در تو نویسی، Mixins
• 65. ساختاردهی پروژه‌های CSS
• 66. اصول طراحی Single Page Application (SPA) - نمای کلی
• 67. مقدمه‌ای بر JavaScript برای تعاملات وب (در حد نیاز UI)
• 68. تغییرات DOM با JavaScript (در حد پایه)
• 69. مدیریت رویدادها (Events) در JavaScript (در حد پایه)
• 70. کار با APIهای وب (در حد نمایش اطلاعات)
• 71. مقدمه‌ای بر ابزارهای Build (مانند Webpack/Vite) - نمای کلی
• 72. نصب و پیکربندی اولیه Node.js و npm/yarn
• 73. ایجاد یک پروژه وب ساده با ابزار Build
• 74. استفاده از ابزار Build برای کامپایل Sass/SCSS
• 75. استفاده از ابزار Build برای بهینه‌سازی کد
• 76. مدیریت assets (تصاویر، فونت‌ها) در پروژه
• 77. انتشار (Deployment) وب‌سایت
• 78. مقدمه‌ای بر اصول UI/UX مدرن
• 79. اصول طراحی رابط کاربری مینیمال
• 80. اصول طراحی رابط کاربری مدرن و شیک
• 81. اصول طراحی رابط کاربری با استفاده از فضای سفید
• 82. اصول طراحی رابط کاربری برای موبایل (Mobile-First)
• 83. اصول طراحی رابط کاربری برای دسکتاپ
• 84. اصول طراحی رابط کاربری با در نظر گرفتن کاربران ایرانی
• 85. تکنیک‌های بهبود نرخ تبدیل (Conversion Rate Optimization) - نمای کلی
• 86. مقدمه‌ای بر تست A/B برای UI/UX - نمای کلی
• 87. اهمیت بازخورد کاربران در طراحی وب
• 88. اصول مستندسازی طراحی وب
• 89. نکات پایانی و جمع‌بندی
• 90. آینده طراحی و توسعه رابط کاربری وب