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

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

عنوان دوره: 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 | دوره آموزشی حرفه‌ای

The Art of Responsive Web Design with CSS: از مبتدی تا حرفه‌ای شوید!

Name: فلشکارتهای آموزشی The Art of Responsive Web Design with CSS
SKU: spLearnova-0000018811
Price: 299950 IRR
Availability: InStock

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 تبدیل خواهد کرد! با ثبت‌نام در این دوره، به دنیای هیجان‌انگیز طراحی وب قدم بگذارید و مهارت‌های خود را به سطح بالاتری ارتقا دهید. همین حالا ثبت‌نام کنید و از تخفیف‌های ویژه بهره‌مند شوید!

SMART LEARNING PLATFORM

از مطالعه تا یادگیری ماندگار

فراتر از یک مجموعه فلش‌کارت؛ تجربه‌ای تعاملی برای یادگیری، تمرین، مرور هوشمند و مشاهده مسیر پیشرفت شما، همراه با امکان دریافت گواهی پایان دوره در دوره‌های واجد شرایط.

مرور فاصله‌دار آمار یادگیری گواهی دوزبانه

یادگیری را به یک مسیر قابل پیگیری تبدیل کنید

با ورود به سامانه آموزشی، محتوای دوره را به‌صورت مرحله‌ای دنبال کنید، فلش‌کارت‌ها را مرور کنید، دانش خود را با پرسش‌ها و آزمون‌ها بسنجید و روند پیشرفتتان را در طول مسیر ببینید.

⟳

مرور فاصله‌دار هوشمند

با مرور زمان‌دار، کارت‌های تازه و کارت‌های سررسیدشده را بر اساس برنامه مرور دنبال کنید. ارزیابی پاسخ‌ها به زمان‌بندی مرورهای بعدی کمک می‌کند تا تمرین متناسب‌تری داشته باشید.

◉

مشاهده مسیر پیشرفت

میزان مشاهده فلش‌کارت‌ها، فعالیت‌های مرور، عملکرد آزمون‌ها و آمار یادگیری را بررسی کنید و تصویر روشن‌تری از مسیر آموزشی خود داشته باشید.

▤

یادگیری مرحله‌به‌مرحله

فصل‌ها و بخش‌های آموزشی را به ترتیب دنبال کنید، مطالب دیده‌نشده را پیدا کنید و بدون سردرگمی به ادامه مسیر برگردید.

✓

تمرین و سنجش آموخته‌ها

با نکته‌های آموزشی، پرسش و پاسخ، کوییزها و آزمون‌های پایان فصل، دانسته‌های خود را تمرین کنید و بخش‌هایی را که به توجه بیشتری نیاز دارند بشناسید.

SMART REVIEW

هر بار، مرور هدفمندتر

لازم نیست هر روز از ابتدا درباره اینکه چه چیزی را مرور کنید تصمیم بگیرید. سامانه، صف مرور روزانه را بر اساس کارت‌های تازه و موعد مرور کارت‌ها آماده می‌کند. شما پاسخ را ارزیابی می‌کنید و برنامه مرور با توجه به آن تنظیم می‌شود.

دوباره

برای کارت‌هایی که به تمرین زودتر نیاز دارند.

سخت

برای پاسخ‌هایی که با دشواری به یاد آمده‌اند.

خوب

برای پاسخ‌هایی که به‌درستی به یاد آورده‌اید.

آسان

برای کارت‌هایی که پاسخ آن‌ها را به‌آسانی می‌دانید.

برنامه مرور بر اساس ارزیابی شما تنظیم می‌شود؛ مرور منظم می‌تواند به تثبیت آموخته‌ها کمک کند، اما به‌تنهایی تضمین‌کننده تسلط کامل نیست.

محتوا را به شیوه‌های مختلف تمرین کنید

ساختار دوره‌ها متناسب با موضوع آموزشی طراحی شده است و ممکن است انواع مختلفی از محتوا را در بر بگیرد.

نکته‌های ساده

برای مرور سریع مفاهیم اصلی و نکات کلیدی.

نکته‌های رسمی

برای تمرین تعاریف، اصطلاحات و بیان دقیق علمی.

کوییز

برای سنجش درک مطلب و بررسی گزینه صحیح.

پرسش و پاسخ

برای تمرین یادآوری و سنجش میزان تسلط بر مطالب.

محتوای هر دوره بر اساس ساختار و امکانات فعال همان دوره ارائه می‌شود.

LEARN ANYWHERE

همراه شما روی مرورگر

برای استفاده از نسخه تحت وب، کافی است با حساب کاربری خود وارد سامانه شوید. بدون نیاز به نصب یک برنامه اختصاصی، می‌توانید از مرورگر سازگار روی گوشی، تبلت یا رایانه به دوره‌های در دسترس خود مراجعه کنید.

گوشی هوشمند

برای مطالعه در زمان‌های کوتاه

تبلت و لپ‌تاپ

برای مطالعه و مرور راحت‌تر

حساب کاربری شخصی

برای دسترسی به دوره‌های مجاز شما

COURSE COMPLETION CERTIFICATE

گواهی پایان دوره؛ ثبت دستاورد شما

در دوره‌هایی که امکان دریافت گواهی برای آن‌ها فعال است، می‌توانید پس از تکمیل شرایط آموزشی، درخواست گواهی پایان دوره ثبت کنید.

شرایط درخواست گواهی

✓ داشتن دسترسی دارای قابلیت گواهی برای دوره مربوطه.

✓ تکمیل اطلاعات لازم در پروفایل، شامل کد ملی معتبر، عکس پرسنلی و نام و نام خانوادگی انگلیسی.

✓ مشاهده تمام فلش‌کارت‌های فعال دوره.

✓ قبولی در آزمون‌های پایان فصل، در صورت وجود آزمون برای فصل‌ها.

فارسی و انگلیسی

پس از تأیید و انتشار، نسخه‌های فارسی و انگلیسی گواهی در دسترس قرار می‌گیرند.

استعلام آنلاین

گواهی منتشرشده دارای QR Code و لینک اختصاصی برای بررسی آنلاین اعتبار آن است.

دانلود و چاپ

پس از انتشار گواهی، امکان دریافت نسخه PDF فارسی و انگلیسی و چاپ آن فراهم است.

توجه: ثبت درخواست به معنای صدور قطعی نیست. درخواست گواهی پس از بررسی و تأیید ادمین منتشر می‌شود. این گواهی، گواهی پایان دوره آموزشی است و به‌خودی‌خود معادل مدرک دانشگاهی یا مدرک رسمی مورد تأیید نهادهای دولتی نیست.

یادگیری را شروع کنید؛ پیشرفت را دنبال کنید

با تمرین منظم، مرور هدفمند و پیگیری مسیر آموزشی خود، قدم‌به‌قدم دانش و مهارت‌هایتان را گسترش دهید.

هر کارت، یک قدم به جلو

امکانات محتوایی، مرور و گواهی بر اساس سطح دسترسی و تنظیمات هر دوره متفاوت است.

نگاهی به محیط سامانه