بخش header (دکمه ها)

توضیحات

در این جلسه به پیاده سازی بخش دکمه ها از header پروژه در دوره آموزش تیلویند (Tailwindcss) پروژه محور میپردازیم.

HTML CSS طراحی وب FlexBox grid Sass tailwindcss تیلویند سی اس اس اچ تی ام ال سی اس اس گرید tailwindcss_v4 تیلویند_سی اس اس تیلویند_سی اس اس_ورژن_4

برای مشاهده آنلاین و دسترسی به ویدیو لطفا ابتدا وارد سایت شوید . صفحه ورود

آموزش tailwindcss (بازتولید کامل دوره)
- آشنایی با tailwindcss شامل 4 قسمت
  
  1
  
  آشنایی با tailwindcss
  
  رایگان 13:54
  
  2
  
  تفاوت tailwindcss با دیگر فریمورک ها
  
  رایگان 14:39
  
  3
  
  نصب tailwindcss (بخش اول)
  
  رایگان 17:29
  
  4
  
  نصب tailwindcss (بخش دوم)
  
  نقدی 21:27
- Typography شامل 5 قسمت
  
  1
  
  آشنایی با font
  
  رایگان 20:28
  
  2
  
  شخصی سازی (theme config) با theme@
  
  نقدی 17:22
  
  3
  
  آشنایی رنگ با (color)
  
  نقدی 15:59
  
  4
  
  آشنایی با variants
  
  نقدی 10:11
  
  5
  
  مبحث font-family
  
  نقدی 15:03
- Responsive Design شامل 4 قسمت
  
  1
  
  توضیح responsive design
  
  نقدی 19:15
  
  2
  
  شخصی سازی break point ها
  
  نقدی 10:25
  
  3
  
  کامپونت container
  
  نقدی 06:38
  
  4
  
  ایجاد component و utility class
  
  نقدی 18:29
- Borders, Spacing, Sizing شامل 4 قسمت
  
  1
  
  کار با Border
  
  نقدی 27:45
  
  2
  
  کار با outline
  
  نقدی 04:39
  
  3
  
  کار با spacing
  
  نقدی 09:21
  
  4
  
  کار با sizing
  
  نقدی 11:24
- Background, Effect, Filter شامل 3 قسمت
  
  1
  
  کار با background
  
  نقدی 09:55
  
  2
  
  کار با effect
  
  نقدی 09:55
  
  3
  
  کار با filter
  
  نقدی 05:44
- Transition, Transform, Animation شامل 3 قسمت
  
  1
  
  کار با transition
  
  نقدی 06:08
  
  2
  
  کار با transform
  
  نقدی 07:08
  
  3
  
  کار با animation
  
  نقدی 07:16
- Layout شامل 2 قسمت
  
  1
  
  کار با layout
  
  نقدی 04:50
  
  2
  
  کار با flex box و grid
  
  نقدی 08:17
- dark mode شامل 1 قسمت
  
  1
  
  آشنایی با dark mode
  
  نقدی 15:30
- پروژه شامل 14 قسمت
  
  1
  
  معرفی پروژه
  
  رایگان 07:42
  
  2
  
  ایجاد پروژه
  
  نقدی 12:28
  
  3
  
  بخش header (لوگو)
  
  نقدی 17:50
  
  4
  
  بخش header (لینک ها)
  
  نقدی 09:57
  
  بخش header (دکمه ها)
  
  نقدی 10:36
  
  6
  
  بخش header (منو موبایل)
  
  7
  
  حالت dark mode (بخش اول)
  
  8
  
  حالت dark mode (بخش دوم)
  
  9
  
  بخش hero (بخش اول)
  
  10
  
  بخش hero (بخش دوم)
  
  11
  
  بخش company
  
  12
  
  بخش features (بخش اول)
  
  13
  
  بخش features (بخش دوم)
  
  14
  
  بخش info
آموزش tailwindcss (محتوای قبل از باز تولید)

برای دانلود ابتدا وارد سایت شوید

مدرس دوره علی شیخ

مدت دوره 19:04:25

تعداد ویدیو 93

وضعیت دوره : درحال برگزاری

قیمت دوره : ~~699,000~~ 524,000 تومان

برای دانلود ابتدا وارد سایت شوید

دسته بندی دوره ها

HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js sass ساس

دوره های پشنهادی

دوره های آموزشی

کامل شده

آموزش Responsive Layout پروژه محور

Responsive یا واکنشگرا به این معنی می باشد که ما چگونه سایت را به شکلی طراحی کنیم که سایت ما در دیوایس های مختلف به خوبی...

رایگان

01:11:30

کامل شده

آموزش Sass پروژه محور

اگر به تازگی وارد دنیای طراحی وب شده‌اید مطمئنا نام Sass یا پیش‌پردازنده‌ها را شنیده‌اید. اگر مطمئن نیستید که Sass چیست...

رایگان

02:28:26

آموزش asynchronous در javascript (جاوااسکریپت) پروژه محور

کامل شده

% 10 تخفیف

آموزش asynchronous در javascript (جاوااسکریپت) پروژه محور

در این دوره با برنامه نویسی Asynchronous (ناهمگام) و Synchronous (همگام) و نحوه کارکرد آنها در دنیای جاوااسکریپت صحبت می...

~~349,000~~ 314,000 تومان

10:20:05

کامل شده

آموزش رایگان flexbox (فلکس باکس) پروژه محور

در دنیای HTML و CSS که نمایش محتوا را به عهده دارند همیشه یک موضوع، سختی و پیچیدگی خاص خود را داشته و آن هم صفحه آرایی ا...

رایگان

04:32:18

مشاهده تمام دوره های آموزشی

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

بخش header (دکمه ها)

توضیحات

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

آشنایی با tailwindcss

تفاوت tailwindcss با دیگر فریمورک ها

نصب tailwindcss (بخش اول)

نصب tailwindcss (بخش دوم)

آشنایی با font

شخصی سازی (theme config) با theme@

آشنایی رنگ با (color)

آشنایی با variants

مبحث font-family

توضیح responsive design

شخصی سازی break point ها

کامپونت container

ایجاد component و utility class

کار با Border

کار با outline

کار با spacing

کار با sizing

کار با background

کار با effect

کار با filter

کار با transition

کار با transform

کار با animation

کار با layout

کار با flex box و grid

آشنایی با dark mode

معرفی پروژه

ایجاد پروژه

بخش header (لوگو)

بخش header (لینک ها)

بخش header (دکمه ها)

بخش header (منو موبایل)

حالت dark mode (بخش اول)

حالت dark mode (بخش دوم)

بخش hero (بخش اول)

بخش hero (بخش دوم)

بخش company

بخش features (بخش اول)

بخش features (بخش دوم)

بخش info

tailwind چیست

تفاوت tailwind با دیگر فریمورک ها

نصب tailwind با npm

postcss چیست

نصب tailwind با npx

افزودن tailwind با cdn

purge (حذف استایل های اضافی)

توضیح responsive

شخصی سازی breackpoint ها

()responsive, screen@

کامپوننت container

hover, group-hover

focus, group-focus

active, focus-within

motion-safe, motion-reduce

disable, checked

child

variants@

colors

spacing

افزودن base style

افزودن base style با plugin

ایجاد component

ایجاد component با plugin

ایجاد utility

ایجاد utility با plugin

just-in-time

variants

arbitrary value (مقادیر دلخواه)

media

class

معرفی پروژه

header (ایجاد layout)

header (دکمه ها)

header (لینک ها)

header(ایجاد dropdown)

header(منو موبایل)