اپلیکیشن اندرویدی فلشکارت آموزشی The Art of Responsive Web Design with CSS
🎓 دوره آموزشی جامع
📚 اطلاعات دوره
عنوان دوره: The Art of Responsive Web Design with CSS
موضوع کلی: برنامه نویسی
موضوع میانی: CSS
📋 سرفصل‌های دوره (100 موضوع)
- 1. CSS چیست و چرا مهم است؟
- 2. تاریخچه CSS
- 3. CSS چگونه کار می کند؟
- 4. ساختار یک قانون CSS
- 5. انتخابگرهای CSS (Selectors)
- 6. انتخابگرهای عمومی (Universal Selector)
- 7. انتخابگرهای نوع (Type/Element Selectors)
- 8. انتخابگرهای کلاس (Class Selectors)
- 9. انتخابگرهای شناسه (ID Selectors)
- 10. انتخابگرهای صفتی (Attribute Selectors)
- 11. انتخابگرهای ترکیبی (Combinator Selectors)
- 12. انتخابگرهای تودرتو (Descendant Selector)
- 13. انتخابگرهای فرزند مستقیم (Child Selector)
- 14. انتخابگرهای خواهر و برادر مجاور (Adjacent Sibling Selector)
- 15. انتخابگرهای خواهر و برادر عمومی (General Sibling Selector)
- 16. انتخابگرهای شبه کلاس (Pseudo-classes)
- 17. :hover
- 18. :focus
- 19. :active
- 20. :visited
- 21. :link
- 22. :first-child
- 23. :last-child
- 24. :nth-child()
- 25. :nth-of-type()
- 26. :not()
- 27. انتخابگرهای شبه عنصر (Pseudo-elements)
- 28. ::before
- 29. ::after
- 30. ::first-letter
- 31. ::first-line
- 32. ::selection
- 33. واحدها در CSS (Units)
- 34. واحد مطلق (Absolute Units) - px, pt, cm, mm, in
- 35. واحد نسبی (Relative Units) - %, em, rem, vw, vh, vmin, vmax
- 36. مدیریت رنگ در CSS (Colors)
- 37. نام های رنگ (Color Names)
- 38. مقادیر هگزادسیمال (Hexadecimal Values)
- 39. مقادیر RGB (RGB Values)
- 40. مقادیر RGBA (RGBA Values)
- 41. مقادیر HSL (HSL Values)
- 42. مقادیر HSLA (HSLA Values)
- 43. پس زمینه ها (Backgrounds)
- 44. background-color
- 45. background-image
- 46. background-repeat
- 47. background-position
- 48. background-size
- 49. background-attachment
- 50. background-origin
- 51. background-clip
- 52. background-blend-mode
- 53. مدیریت متن (Text Properties)
- 54. font-family
- 55. font-size
- 56. font-weight
- 57. font-style
- 58. line-height
- 59. text-align
- 60. text-decoration
- 61. text-transform
- 62. letter-spacing
- 63. word-spacing
- 64. white-space
- 65. text-indent
- 66. text-shadow
- 67. مدیریت فونت ها (Fonts)
- 68. فونت های وب (Web Fonts)
- 69. @font-face
- 70. Google Fonts
- 71. فونت های سیستم (System Fonts)
- 72. CSS Box Model
- 73. content
- 74. padding
- 75. border
- 76. margin
- 77. box-sizing: content-box
- 78. box-sizing: border-box
- 79. عرض و ارتفاع (Width and Height)
- 80. width
- 81. height
- 82. min-width
- 83. max-width
- 84. min-height
- 85. max-height
- 86. نمایش عناصر (Display Property)
- 87. display: block
- 88. display: inline
- 89. display: inline-block
- 90. display: none
- 91. display: flex
- 92. display: grid
- 93. float
- 94. clear
- 95. overflow
- 96. positioning
- 97. static
- 98. relative
- 99. absolute
- 100. fixed
The Art of Responsive Web Design with CSS: از مبتدی تا حرفه‌ای شوید!
1. معرفی دوره
آیا می‌خواهید وب‌سایت‌هایی بسازید که در هر دستگاهی، از موبایل و تبلت گرفته تا دسکتاپ، بی‌نقص و جذاب به نظر برسند؟ در دنیای امروز که کاربران از طریق دستگاه‌های مختلف به وب دسترسی دارند، یادگیری طراحی واکنش‌گرا با CSS یک مهارت ضروری است. دوره "The Art of Responsive Web Design with CSS" به شما این امکان را می‌دهد تا با استفاده از قدرتمندترین ابزارهای CSS، وب‌سایت‌هایی انعطاف‌پذیر و کاربرپسند ایجاد کنید.
این دوره فراتر از یک آموزش ساده است؛ ما شما را از مفاهیم پایه‌ای تا تکنیک‌های پیشرفته CSS و طراحی واکنش‌گرا هدایت می‌کنیم. با ما همراه شوید تا به یک طراح وب حرفه‌ای تبدیل شوید و وب‌سایت‌هایی بسازید که نه تنها زیبا هستند، بلکه تجربه‌ای بی‌نظیر را برای کاربران به ارمغان می‌آورند.
2. درباره دوره
دوره "The Art of Responsive Web Design with CSS" یک دوره جامع و کاربردی است که به شما تمام مهارت‌های لازم برای طراحی وب‌سایت‌های واکنش‌گرا با استفاده از CSS را آموزش می‌دهد. این دوره شامل تئوری، مثال‌های عملی، پروژه‌های واقعی و تمرین‌های تعاملی است که به شما کمک می‌کند تا مفاهیم را به خوبی درک کرده و دانش خود را در عمل به کار ببرید. ما از مفاهیم ابتدایی CSS شروع می‌کنیم و به مباحث پیشرفته‌ای مانند Flexbox، Grid، انیمیشن‌ها و ترانزیشن‌ها، و تکنیک‌های بهینه‌سازی برای سرعت بارگذاری وب‌سایت‌ها می‌پردازیم.
3. موضوعات کلیدی
- مبانی CSS: انتخابگرها، خصوصیات، واحدها و مدل جعبه‌ای
- طراحی واکنش‌گرا: مفاهیم و تکنیک‌های اساسی
- Media Queries: ایجاد طرح‌های متفاوت برای اندازه‌های مختلف صفحه نمایش
- Flexbox: ایجاد چیدمان‌های انعطاف‌پذیر و پیچیده
- Grid: ساختارهای دو بعدی برای طراحی وب
- انیمیشن‌ها و ترانزیشن‌ها: افزودن جذابیت بصری به وب‌سایت
- بهینه‌سازی برای موبایل: طراحی برای دستگاه‌های تلفن همراه
- تکنیک‌های پیشرفته CSS: SASS، LESS و ...
- اصول طراحی UI/UX: ایجاد تجربه‌ی کاربری عالی
- پروژه‌های عملی: ساخت وب‌سایت‌های واقعی با استفاده از CSS
4. مخاطبان دوره
این دوره برای طیف وسیعی از افراد مناسب است، از جمله:
- افرادی که به تازگی وارد دنیای طراحی وب شده‌اند و می‌خواهند CSS را به طور کامل یاد بگیرند.
- طراحان وب و توسعه‌دهندگان فرانت‌اند که می‌خواهند مهارت‌های خود را در زمینه طراحی واکنش‌گرا ارتقا دهند.
- دانشجویان رشته‌های مرتبط با کامپیوتر و طراحی وب.
- هر کسی که می‌خواهد وب‌سایت شخصی خود را طراحی کند.
5. چرا این دوره را بگذرانیم؟
با شرکت در دوره "The Art of Responsive Web Design with CSS"، شما:
- مهارت‌های اساسی CSS را به طور کامل یاد خواهید گرفت.
- با تکنیک‌های پیشرفته طراحی واکنش‌گرا آشنا خواهید شد و قادر خواهید بود وب‌سایت‌هایی سازگار با هر دستگاهی طراحی کنید.
- توانایی ایجاد چیدمان‌های پیچیده با Flexbox و Grid را به دست خواهید آورد.
- با انیمیشن‌ها و ترانزیشن‌ها، وب‌سایت‌های خود را جذاب‌تر خواهید کرد.
- با اصول UI/UX آشنا شده و تجربه‌ی کاربری وب‌سایت‌های خود را بهبود خواهید بخشید.
- پروژه‌های عملی متعددی را انجام خواهید داد و نمونه‌کارهای حرفه‌ای برای خود ایجاد خواهید کرد.
- از پشتیبانی مدرس و جامعه‌ی فعال فراگیران بهره‌مند خواهید شد.
- در زمان و هزینه‌ی خود صرفه‌جویی خواهید کرد.
با یادگیری این مهارت‌ها، فرصت‌های شغلی خود را در زمینه طراحی وب افزایش دهید و به یک طراح وب موفق تبدیل شوید!
6. سرفصل‌های دوره (100 سرفصل جامع!)
این دوره شامل بیش از 100 سرفصل جامع است که به شما کمک می‌کند از صفر تا صد طراحی وب واکنش‌گرا را فرا بگیرید. در ادامه تنها نمونه‌ای از سرفصل‌ها آورده شده است:
- بخش 1: مبانی CSS
- مقدمه‌ای بر CSS و نقش آن در طراحی وب
- ساختار و سینتکس CSS
- انتخابگرهای CSS (Selector)
- ویژگی‌های CSS: رنگ، فونت، سایز و ...
- مدل جعبه‌ای (Box Model)
- حاشیه (Margin)، فاصله‌گذاری (Padding) و حاشیه (Border)
- تایپوگرافی در CSS
- استفاده از فونت‌های وب
- واحدها در CSS: px, em, rem, %
- انتخابگرهای پیشرفته CSS
- بخش 2: طراحی واکنش‌گرا (Responsive Design)
- مفاهیم طراحی واکنش‌گرا
- Viewport و تنظیمات آن
- Media Queries: مبانی و کاربردها
- طراحی Mobile-First
- استراتژی‌های طراحی واکنش‌گرا: Fluid Grids, Flexible Images
- کار با تصاویر و ویدئوها در طراحی واکنش‌گرا
- تست و دیباگ کردن طراحی واکنش‌گرا
- بهینه‌سازی تصاویر برای سرعت بارگذاری
- بخش 3: Flexbox
- مقدمه‌ای بر Flexbox
- Flex Container و Flex Items
- ویژگی‌های Flexbox: flex-direction, flex-wrap, justify-content, align-items
- چیدمان‌های افقی و عمودی با Flexbox
- Flexbox و طراحی منوها
- Flexbox و طراحی فرم‌ها
- Flexbox و ایجاد layout های پیچیده
- Flexbox و طراحی واکنش‌گرا
- بخش 4: Grid Layout
- مقدمه‌ای بر Grid Layout
- Grid Container و Grid Items
- ایجاد Grid با استفاده از grid-template-columns و grid-template-rows
- grid-row-start و grid-column-start و ...
- Gap و spacing در Grid
- چیدمان‌های دو بعدی با Grid
- Grid و طراحی واکنش‌گرا
- Grid و ایجاد layout های پیشرفته
- بخش 5: انیمیشن‌ها و ترانزیشن‌ها
- مقدمه‌ای بر CSS Transitions
- ویژگی transition-property, transition-duration, transition-timing-function
- CSS Animations: مبانی و کاربردها
- ساخت keyframes
- انیمیشن‌های پیچیده
- انیمیشن‌ها و ترانزیشن‌ها در طراحی وب
- بهینه‌سازی انیمیشن‌ها برای عملکرد بهتر
- بخش 6: تکنیک‌های پیشرفته CSS
- CSS Variables (Custom Properties)
- Sass: مقدمه و نصب
- Sass: Variables, Nesting, Mixins, Partials
- LESS: مقدمه و نصب
- LESS: Variables, Nesting, Mixins
- CSS Frameworks: Bootstrap, Tailwind CSS
- بهینه‌سازی CSS
- بخش 7: اصول UI/UX و طراحی رابط کاربری
- مقدمه‌ای بر UI/UX Design
- اصول طراحی UI: رنگ، تایپوگرافی، آیکون‌ها
- اصول UX: قابلیت استفاده، دسترسی‌پذیری
- طراحی رابط کاربری برای موبایل
- طراحی رابط کاربری برای دسکتاپ
- User Testing و بهبود طراحی
- بخش 8: پروژه‌های عملی و نمونه‌کارها
- طراحی و پیاده‌سازی یک وب‌سایت شخصی واکنش‌گرا
- طراحی و پیاده‌سازی یک وبلاگ واکنش‌گرا
- طراحی و پیاده‌سازی یک فروشگاه اینترنتی کوچک
- پروژه نهایی: طراحی و پیاده‌سازی یک وب‌سایت حرفه‌ای و واکنش‌گرا
و ده‌ها سرفصل دیگر که شما را به یک متخصص CSS تبدیل خواهد کرد! با ثبت‌نام در این دوره، به دنیای هیجان‌انگیز طراحی وب قدم بگذارید و مهارت‌های خود را به سطح بالاتری ارتقا دهید. همین حالا ثبت‌نام کنید و از تخفیف‌های ویژه بهره‌مند شوید!
این اپلیکیشن فارسی برای یادگیری و مرور محتوای آموزشی از طریق فلشکارت طراحی شده است. کارت‌ها را یکی‌یکی مرور کنید، پاسخ پرسش‌ها را به یاد بیاورید و نتیجه هر پاسخ را ثبت کنید. محتوای دوره پس از نصب درون برنامه در دسترس است تا برای مطالعه روزمره معمولاً به اتصال مداوم اینترنت نیاز نداشته باشید.
محتوای آموزشی در قالب‌های متنوع ارائه می‌شود تا هم برای یادگیری مفاهیم جدید و هم برای تثبیت آموخته‌ها قابل استفاده باشد.
- رابط کاربری فارسی و راست‌چین با فونت وزیر.
- تم روشن و تیره مطابق تنظیمات سیستم.
- صفحه‌بندی ساده برای انتخاب دوره و شروع مرور.
- نمایش تعداد دفعات مرور هر فصل.
- انتخاب چند فصل برای مرور هم‌زمان.
- امکان تمرکز بر فصل‌هایی که هنوز مرور نشده‌اند.
این اپلیکیشن برای دانش‌آموزان، دانشجویان، داوطلبان آزمون‌ها و علاقه‌مندان به یادگیری طراحی شده است؛ به‌ویژه کسانی که می‌خواهند مطالب آموزشی را در زمان‌های کوتاه مرور کنند، دانسته‌های خود را بسنجند و مطالعه منظم‌تری داشته باشند.
نظرات
هنوز نظری ثبت نشده است.
وارد شوید تا نظر ثبت کنید.