جامع Tailwind و Bootstrap | طراحی حرفه‌ای صفحات وب ریسپانسیو

در این دوره مباحث کلیدی CSS، طراحی واکنش‌گرا و Tailwind رو کامل یاد می‌گیری و می‌تونی طراحی‌های UI رو در سطح حرفه‌ای پیاده‌سازی کنی. در نهایت آماده ورود به پروژه‌های فرانت‌اند مدرن، فریلنسری یا مسیرهای تخصصی‌تر مثل React و Next.js می‌شی....
پیش نیاز:HTML/CSS
ویژگی‌های دوره آموزش

جامع Tailwind و Bootstrap | طراحی حرفه‌ای صفحات وب ریسپانسیو

در این دوره مباحث کلیدی CSS، طراحی واکنش‌گرا و Tailwind رو کامل یاد می‌گیری و می‌تونی طراحی‌های UI رو در سطح حرفه‌ای پیاده‌سازی کنی. در نهایت آماده ورود به پروژه‌های فرانت‌اند مدرن، فریلنسری یا مسیرهای تخصصی‌تر مثل React و Next.js می‌شی.
جامع Tailwind و Bootstrap | طراحی حرفه‌ای صفحات وب ریسپانسیو

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

دوره CSS & Tailwind | Web Design 2 در کندو دقیقا برای همین نیاز طراحی شده. ابتدا بخش‌های تکمیلی CSS رو یاد می‌گیری و بعد وارد Tailwind می‌شی تا ساخت صفحات واکنش‌گرا، طراحی با Utilityها، مدیریت استایل‌ها و ساختاردهی مدرن رو تجربه کنی. این دوره نسخه‌ی جایگزین Web Design 2 قدیمه و کاملاً مطابق فناوری‌های جدید به‌روزرسانی شده.

ناموجود

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

فیلد های "(اجباری)" اجباری هستند

سرفصل‌های آموزش جامع Tailwind و Bootstrap | طراحی حرفه‌ای صفحات وب ریسپانسیو

  1. Flexbox و Grid
  2. Media Queries و طراحی Responsive
  3. متغیرهای CSS و ساختاردهی مدرن
  4. استفاده از LESS/SASS/SCSS (در حد نیاز)

 

  1. آشنایی با مفهوم Tailwind CSS
    • چیستی Tailwind CSS و تفاوت آن با دیگر فریم‌ورک‌ها
    • چرا باید از Tailwind CSS استفاده کنیم؟
    • بررسی مزایا و معایب استفاده از Tailwind CSS 
  2. نصب و راه‌اندازی Tailwind CSS
    • نصب Tailwind CSS در پروژه‌های جدید
    • راه‌اندازی از طریق CDN
    • تنظیم Tailwind در پروژه‌های مبتنی بر Webpack, PostCSS 
  3. ساختار اولیه پروژه با Tailwind
    • ساختار فایل‌های Tailwind و آشنایی با فایل پیکربندی tailwind.config.js
    • تعریف و سفارشی‌سازی پیکربندی اولیه
    • استفاده از تیلویند در CSS
  1. کلاس‌های پایه و کاربردی Tailwind
    • کلاس‌های رنگ‌ها: bg-, text-, border-
    • کلاس‌های اندازه‌ها: w-, h-, max-w-, min-w-
    • کلاس‌های فاصله‌گذاری: m-, p-, mt-, mb-, pl-, pr-
       
  2. تنظیمات متن و تایپوگرافی
    • تغییر اندازه و نوع فونت: text-xl, font-serif, font-sans
    • استایل‌های متن: uppercase, italic, underline, line-through
    • تنظیم فاصله بین خطوط و حروف: leading-, tracking-
       
  3. استایل‌دهی به پس‌زمینه و حاشیه‌ها
    • کار با پس‌زمینه‌ها: bg-blue-500, bg-gradient-to-r
    • تنظیم حاشیه‌ها و دایره‌سازی: border, border-radius, border-2
    • سایه‌ها: shadow, shadow-lg, shadow-inner
  1. مفهوم طراحی ریسپانسیو در Tailwind
    • معرفی کلاس‌های ریسپانسیو در Tailwind
    • استفاده از کلاس‌های ریسپانسیو برای اندازه‌های مختلف صفحه (یعنی sm:, md:, lg:, xl:) 
  2. ساخت شبکه و گرید (Grid) در Tailwind
    • استفاده از کلاس‌های گرید: grid, grid-cols-3, gap-4
    • آشنایی با Flexbox در Tailwind: flex, flex-row, flex-col
    • سفارشی‌سازی گریدها برای دستگاه‌های مختلف 
  3. پیکربندی و سفارشی‌سازی ریسپانسیو
    • استفاده از کلاس‌های ریسپانسیو در ستون‌ها و اجز
    • تنظیم اندازه فونت‌ها و فاصله‌گذاری برای دستگاه‌های مختلف
  1. سفارشی‌سازی Tailwind CSS
    • سفارشی‌سازی رنگ‌ها، فونت‌ها و اندازه‌ها از طریق فایل پیکربندی tailwind.config.js
      ایجاد کلاس‌های سفارشی برای پروژه‌های خاص
      استفاده از @layer و @apply برای مدیریت بهتر استایل‌ها 
  2. پیکربندی برای پروژه‌های بزرگ
    • نحوه کار با Tailwind در پروژه‌های بزرگ و پیچیده
    • مدیریت بهتر فایل‌های CSS با استفاده از PostCSS
    • استفاده از Tailwind با فریم‌ورک‌های JavaScript مانند React یا Vue.js 
  3. بهینه‌سازی و کاهش حجم فایل CSS
    • استفاده از PurgeCSS برای حذف کلاس‌های غیرضروری
    • تکنیک‌های بهینه‌سازی عملکرد برای پروژه‌های بزرگ
    • کاهش حجم فایل CSS در محیط‌های تولید (Production)
  1. ساخت صفحات وب واکنش‌گرا (Responsive)
    • طراحی یک صفحه فرود (Landing Page) با استفاده از Tailwind
    • ساخت یک صفحه وب ساده برای نمایش نمونه‌های کار (Portfolio)
    • طراحی فرم‌های ثبت‌نام و ورود با استفاده از کلاس‌های Tailwind 
  2. توسعه یک پروژه فروشگاهی ساده
    • طراحی صفحات محصول، سبد خرید و پرداخت
    • استفاده از Grid و Flexbox برای طراحی ساختار صفحات
    • پیاده‌سازی منوهای کشویی و نوار جستجو 
  3. پروژه نهایی: ایجاد یک وب‌سایت کامل
    • طراحی صفحات اصلی وب‌سایت با Tailwind
    • استفاده از تکنیک‌های ریسپانسیو و سفارشی‌سازی برای طراحی زیبا و بهینه
  1. استفاده از Tailwind با فریم‌ورک‌های JavaScript
    • استفاده از Tailwind در پروژه‌های React, Vue.js, Next.js
    • نحوه استفاده از Tailwind CSS در قالب‌های Static Site 
  2. افزایش عملکرد با استفاده از Tailwind
    • بهینه‌سازی پروژه با PurgeCSS
    • استفاده از Tailwind در پروژه‌های بزرگ و پیچیده

  3. بهترین شیوه‌ها و الگوهای طراحی با Tailwind
    • رعایت اصول طراحی و ساختار مدرن با Tailwind
    • طراحی برای عملکرد و مقیاس‌پذیری بالا
    • مدیریت موثر کد و بهینه‌سازی سرعت بارگذاری صفحات

اساتید دوره جامع Tailwind و Bootstrap | طراحی حرفه‌ای صفحات وب ریسپانسیو

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

نظر مهارت آموزان

چرا دوره‌های آموزشگاه کندو برای مهارت‌آموزی؟


  مهارت‌آموزانی که دوره‌های آموزشی ما را برگزیدند و از انتخابشان راضی بودند، می‌گویند چرا. 

کاربر04 آموزشگاه مهندسی کندو
هومان حمیدی
(متخصص امنیت)

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

کاربر03 آموزشگاه مهندسی کندو
ندا سلیمانی
(توسعه‌دهنده وب)

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

کاربر02 آموزشگاه مهندسی کندو
امیرحسین احمدی
(هلپ دسک)

توی آموزشگاه یه فضای دوستانه و مثبت وجود داره که انگیزه و اشتیاق یادگیری رو چند برابر می‌کنه. تفاوتش با بقیه آموزشگاه‌ها رو از همون ابتدا متوجه می‌شید.

New Project
سارا محمودی
(بک‌اند دولوپر)

دوره‌های آنلاین کندو پر از مطالب و نکات کاربردی‌ بود. بهترین جا برای یاد گرفتن اطلاعات تازه و به‌روز توی دنیای IT.

کاربر01 آموزشگاه مهندسی کندو
ایمان تقوی
(متخصص شبکه)

دوره‌های کندو واقعاً کمکم کرد راحت‌تر کار پیدا کنم. چیزایی که یاد گرفتم توی مصاحبه‌های فنی حسابی به دردم خورد.

کاربر05 آموزشگاه مهندسی کندو
سینا جنتی
(مهندس سخت‌افزار)

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

نمونه مدرک دوره

  • کندو معتبرترین آموزشگاه IT ایران است که بیشترین فارغ‌التحصیلان را دارد.
  • بسیاری از مدیران صنعت IT ایران در آموزشگاه کندو دوره دیده‌اند.
  • بسیاری از فارغ التحصیلان آموزشگاه کندو خارج از ایران مشغول به کار شده‌اند.
  • مدرک کندو قابلیت ترجمه و استفاده برای امور مهاجرتی را نیز دارد.
  • مدارک دوره‌های حضوری و آنلاین هیچ تفاوتی با هم ندارند.

کلاس‌های حضوری کندو

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

با کمــال افتخــار

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

سوالات متداول

چطور می‌تونم به دوره‌هایی که ثبت‌نام کردم، دسترسی داشته باشم؟

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

امکان پرداخت به‌صورت نقدی یا اقساطی وجود داره. برای پرداخت اقساطی کافیه ۳۰٪ مبلغ دوره رو به عنوان پیش‌پرداخت واریز کنید و بقیه‌ی مبلغ رو در ۴ تا ۶ قسط پرداخت کنید.

دوره‌های ما به صورت هم‌زمان حضوری و آنلاین برگزار می‌شن. هم‌چنین دوره‌هامون به صورت ویدیوهای ضبط‌شده هم ارائه می‌شن.

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

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

5 1 رای
امتیازدهی به این محتوا
اشتراک در
اطلاع از
2 نظرات
قدیمی‌ترین
تازه‌ترین بیشترین رأی
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها