×
ribbon

آموزش صفر تا 100 Tailwind CSS

مدرس:

محمدمهدی دالوندی

در این دوره کامل، یاد می گیرید چگونه با Utility-first CSS صفحات وب زیبا، سریع و واکنش گرا... بیشتر
جدید
گواهی‌نامه
4.1 (11)
4 دیدگاه
369دانشجو
9ساعت
سرفصل‌ها
مقدماتی تا پیشرفته سطح دوره
بروزرسانیبهمن ۱۴۰۴

اشتراک مکتب‌پلاس

خرید اشتراک

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

دسترسی به تمام دوره‌هابیش از ۴،۰۰۰ دوره
محتوای دوره
سرفصل‌ها
پیش‌نیاز‌ها
توضیحات دوره
دیدگاه کاربران
درباره مدرس

آنچه در این دوره می‌آموزید

طراحی سریع و واکنش‌گرا با Tailwind

چیدمان و تایپوگرافی حرفه‌ای

افکت‌ها و تعاملات کاربر

پروژه عملی و قابل نگهداری

این دوره شامل:

8 ساعت ویدئو

24 سؤال سنجش و یادگیری

گواهینامه مکتب‌خونه

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

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

9 فصل42 جلسه9 ساعت ویدیو
مقدمه
  معرفی دوره
02:40
نصب و راه اندازی Tailwind
  نصب Tailwind - روش اول
11:11
  نصب Tailwind - روش دوم Vite
08:57
  Tailwind IntelliSense، Compatibility و Upgrade Guide
04:26
Layout و ساختار صفحه
  Layout پایه (Display، Position، Float)
11:55
  Box-sizing، Overflow و Overscroll Behavior
11:50
  Flexbox- قسمت اول
10:50
  Flexbox-قست دوم
11:28
  Grid و Alignments
12:52
  کوئیز Layout و ساختار صفحه
05:00
Spacing, Sizing, Typography
  Spacing و Sizing
15:57
  Typography – بخش 1
13:05
  Typography – بخش 2
06:56
  Typography – بخش 3
09:15
  کوئیز Spacing , Sizing ,Typography
05:00
مفاهیم اصلی (Core Concepts)
  Utility Classes پایه
17:34
  Hover, Focus, Active
07:48
  Responsive Design – بخش 1
10:06
  Responsive Design – بخش 2
03:39
  Dark Mode و Theme Variables
07:23
  Custom Styles در Tailwind CSS v4
11:31
  کوئیز : Utilities, Responsive & Dark Mode
06:00
Backgrounds, Borders, Effects,Table
  Backgrounds در Tailwind CSS
13:11
  Borders در Tailwind CSS
12:05
  Box-shadow و Opacity در Tailwind CSS
09:52
  Filters و Backdrop-filter در Tailwind CSS
09:29
  Tables در Tailwind CSS
10:43
  کوئیز:Backgrounds, Effects & Tables
05:00
Transitions, Animations, Transforms
  Transitions در Tailwind CSS
08:59
  Animations و Keyframes در Tailwind CSS
07:40
  Transforms در Tailwind CSS
07:35
  کوئیز: Transitions, Animations & Transforms
03:00
Interactivity, Accessibility, SVG
  Interactivity در Tailwind CSS – بخش 1
07:12
  Interactivity – بخش 2
04:31
  SVG در Tailwind CSS
02:46
پروژه نهایی (Landing-page)
  معرفی پروژه
02:16
  ایجاد پروژه
19:11
  توسعه Navbar
24:00
  توسعه قسمت hero section
15:33
  توسعه قسمت about
34:13
  توسعه services
20:05
  توسعه navbar هنگام اسکرول و دکمه اسکرول به بالا
21:33
  توسعه بخش sample work
08:16
  توسعه بخش package
15:05
  توسعه بخش Articles
12:27
  توسعه قسمت ContactUs
21:17
  توسعه footer و جمع بندی
13:31

پیش‌نیاز‌ها

برای شرکت در این دوره کافی است با HTML و CSS پایه آشنا باشید. نیازی به تجربه قبلی با فریم‌ورک‌ها یا طراحی پیشرفته ندارید، همه چیز از پایه تا پروژه حرفه‌ای آموزش داده می‌شود.

توضیحات دوره

در این دوره کامل، یاد می‌گیرید چگونه با Utility-first CSS صفحات وب زیبا، سریع و واکنش‌گرا بسازید و پروژه‌های خود را به راحتی نگهداری کنید. از مفاهیم پایه تا طراحی حرفه‌ای و پروژه‌های واقعی، همه مهارت‌هایی که یک توسعه‌دهنده وب مدرن نیاز دارد، پوشش داده شده است.

پیش‌نیاز: آشنایی با HTML و CSS پایه کافی است.

آنچه در این دوره می‌آموزید:

  • شروع با Tailwind:
  • نصب و راه‌اندازی، آماده‌سازی محیط کار و آشنایی با فلسفه Utility-first CSS. مفاهیم پایه و کلاس‌های کاربردی:
  • یادگیری کلاس‌های پایه، طراحی واکنش‌گرا، مدیریت حالت‌های Hover/Focus/Active و Dark Mode، و بهینه‌سازی پروژه با . طراحی چیدمان و ساختار صفحات:
  • کار با Display، Position، Flexbox و Grid برای ایجاد چیدمان‌های پیچیده و انعطاف‌پذیر. مدیریت فاصله‌ها، ابعاد و تایپوگرافی:
  • تنظیم Padding، Margin، ابعاد، فونت‌ها، وزن، چینش متن، لیست‌ها و قواعد نوشتاری پیشرفته. پس‌زمینه‌ها، حاشیه‌ها و افکت‌ها:
  • استفاده از رنگ‌ها، سایه‌ها، فیلترها و جداول برای طراحی زیبا و حرفه‌ای. انیمیشن‌ها و تعاملات کاربر:
  • ایجاد افکت‌های انتقال، انیمیشن و تغییرات گرافیکی برای تجربه کاربری جذاب. دسترس‌پذیری و کار با SVG:
  • بهبود تعامل کاربر، دسترسی‌پذیری و طراحی آیکون‌ها و گرافیک‌های برداری. کامپوننت‌ها و پروژه‌های عملی:
  • ساخت Button، Card، Navbar و Modal با پشتیبانی از Dark Mode و استفاده از این کامپوننت‌ها در پروژه‌های واقعی. پروژه نهایی کامل:
  • طراحی و پیاده‌سازی یک وب‌سایت حرفه‌ای شامل Layout، Typography، Colors، Components، افکت‌ها و بهینه‌سازی نهایی برای تمام دستگاه‌ها.

چرا این دوره ارزشمند است؟

  • سرعت توسعه وب خود را چند برابر کنید.
  • پروژه‌های قابل نگهداری و استاندارد بسازید.
  • همه مفاهیم را با مثال‌های عملی و پروژه‌های واقعی یاد بگیرید.

به‌روزرسانی و نسخه جدید:

تمام محتوای این دوره با انتشار نسخه‌های جدید Tailwind CSS به‌روزرسانی می‌شود تا همیشه با آخرین استانداردها و قابلیت‌ها همراه باشید.

دیدگاه کاربران

4.1

بر اساس امتیاز 11 دانشجو

1
2
3
4
5

دانشجوی دوره

1 ماه پیش

5

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

محمدحسین دولتی

11 روز پیش

4

خوب بود

دانشجوی دوره

11 روز پیش

3

راضی ام ممنون از استاد

بهروز یوسف زاده

24 روز پیش

3

good

گواهینامه اختصاصی دو زبانه

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

امکان اشتراک گذاری در لینکدین
دو زبانه
محمدمهدی دالوندیبرنامه نویس ,شبکه ,عاشق کتاب
4دوره
754دانشجو
20نظر و امتیاز

من محمدمهدی دالوندی هستم و از سال ۱۴۰۰ فعالیت خودم رو در حوزه برنامه‌نویسی فرانت‌اند شروع کردم.
در ادامه، به‌صورت تدریجی به سمت بک‌اند گرایش پیدا کردم و در حال حاضر علاقه و تمرکز ویژه‌ای روی امنیت و هک دارم.

بیشتر فعالیت‌های من به‌صورت فریلنسری بوده و در حال حاضر با تیم E-codeTeam روی پروژه‌های بین‌المللی همکاری می‌کنم.

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

مهارت‌هایی که می‌آموزید