- مدرس دوره : طه قاسمی زرگر ( رزومه )
- تعداد ویدیوها : 45 ویدیو
- مدت زمان دوره : 13:17:00
- سطح دوره : پیشرفته
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1403/05/15
![آموزش Tailwind css با 3 پروژه عملی اینستاگرام، گوگل و توییتر](/img/course/آموزش_tailwind_css_با_3_پروژه_عملی_اینستاگرام،_گوگل_و_توییتر.jpg)
آموزش Tailwind css با 3 پروژه عملی اینستاگرام، گوگل و توییتر
در این دوره آموزش کامل آخرین ورژن فریم ورک Tailwind css صورت میپذیرد و 3 پروژه عملی شامل طراحی سایت اینستاگرام، گوگل و توییتر نیز برای تثبیت موارد آموخته شده در نظر گرفته شده است. دانشجو پس از اتمام این دوره قادر به طراحی هر گونه طرح مد نظر خود با فریم ورک محبوب Tailwind خواهد بود.
سرفصل های دوره
ستاپ دوره (موارد مورد نیاز برای شروع دوره و نحوه نصب و استفاده از Tailwind)
آموزش موارد پایه ای و مهم Tailwind
آموزش تنظیمات Tailwind اعم از Extend options
پروژه اول: طراحی Landing page
پروژه دوم: طراحی Google
پروژه سوم: طراحی Instagram
پروژه چهارم: طراحی Twitter
پیش نیاز های دوره :
- آشنایی مقدماتی با HTML و Css
فهرستـــ ویدیوها
مدت زمان دوره 13:17:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
مقایسه Bootstrap با Tailwind
در این قسمت قصد داریم تا به بررسی و مقایسه بین دو فریم ورک مطرح Bootstrap و Tailwind بپردازیم و دلایل برتری Tailwind بر Bootstrap و دلیل محبوبیت بالای Tailwind را بهتر درک کنیم.
نیازمندی های دوره و ابزار های مورد نیاز
در این قسمت به بررسی ابزار مورد نیاز برای شروع این دوره خواهیم پرداخت.
آموزش نصب Tailwind با استفاده از روش CLI
در این قسمت با آموزش نصب Tailwind از طریق روش CLI آشنا خواهید شد.
آموزش نصب Tailwind با استفاده از روش Post css
در این قسمت نحوه نصب Tailwind رو با کمک روش Post css یاد میگیریم.
تایپو گرافی در Tailwind
در این قسمت به طور کاربردی به مبحث مهم Typography در این فریم ورک میپردازیم.
رنگ ها (Colors) در Tailwind
تمامی رنگ های موجود در Tailwind در این قسمت آموزش داده خواهند شد.
Object properties در Tailwind
در این قسمت به بررسی کامل ویژگی های مهم شی ها در Tailwind خواهیم پرداخت.
شروع مبحث لایه ها (Layouts)
در این قسمت شروع به آموزش مبحث لایه بندی صفحات HTML خودمون و نحوه بخش بندی بر اساس طرح های مختلف میکنیم و درباره کلاس پر کاربرد container در Tailwind نیز صحبت خواهیم کرد.
آموزش مبحث طراحی واکنش گرا (Responsive)
مبحث بسیار بسیار مهم طراحی واکنش گرا یا همان ریسپانسیو در این قسمت آموزش داده خواهد شد. بررسی کلاس های مورد استفاده از Tailwind برای ریسپانسیو سازی طراحی شما بسیار حائز اهمیت است.
FlexBox در Tailwind
در این قسمت درباره نحوه پیاده سازی FlexBox در Tailwind صحبت خواهیم کرد.
دارک مود (ِDark mode)
در این قسمت به مبحث جذاب دارک مود و نحوه استفاده از آن در Tailwind خواهیم پرداخت.
آموزش Extend options
در این قسمت به آموزش ویژگی و امکان پرکاربرد و جذاب Extend options خواهیم پرداخت.
معرفی پروژه اول | Landing page
نمایش آنلاین این بخش رایگان است
پروژه اول ما تحت عنوان طراحی یک لندینگ پیج از این جا شروع خواهد شد.
طراحی بخش Strategies پروژه لندینگ پیج
در این قسمت بخش Strategies از طرح ما کد نویسی خواهد شد.
کد نویسی بخش Workflow و Pre-footer پروژه لندینگ پیج
در این قسمت کد نویسی بخش Workflow و Pre-footer پروژه لندینگ پیج انجام میشود.
کدنویسی فوتر (Footer) پروژه لندینگ پیج | اتمام پروژه اول
پروژه اول ما در این قسمت تمام شد. اولین تجربه خودمون از کدنویسی با Tailwind رو با هم سپری کردیم ...
شروع پروژه گوگل (Google) | کدنویسی هدر
نمایش آنلاین این بخش رایگان است
در این قسمت کدنویسی هدر رو شروع خواهیم کرد.
کدنویسی فوتر (Footer) پروژه گوگل (Google)
کدنویسی فوتر (Footer) پروژه گوگل (Google) در این قسمت انجام خواهد شد.
ریسپانسیو (Responsive) پروژه گوگل (Google) | اتمام پروژه دوم
در این قسمت به طور عملی پروژه خود را ریسپانسیو خواهیم کرد.
معرفی پروژه سوم | اینستاگرام (Instagram)
نمایش آنلاین این بخش رایگان است
معرفی پروژه سوم، طراحی سایت اینستاگرام
طراحی هدر پروژه اینستاگرام (Instagram)
طراحی هدر پروژه اینستاگرام (Instagram) در این قسمت انجام میشود.
کد نویسی بخش پروفایل پروژه اینستاگرام (Instagram)
کد نویسی بخش پروفایل پروژه اینستاگرام (Instagram) در این بخش انجام میشود.س
کدنویسی بخش استوری پروژه اینستاگرام (Instagram)
کدنویسی بخش استوری پروژه اینستاگرام (Instagram) در این قسمت انجام خواهد شد.
کدنویسی بخش Posts پروژه اینستاگرام (Instagram)
کدنویسی بخش Posts پروژه اینستاگرام (Instagram) در این بخش انجام میشود.
کدنویسی فوتر پروژه اینستاگرام (Instagram)
کدنویسی فوتر پروژه اینستاگرام (Instagram) در این قسمت انجام میشود.
معرفی پروژه توییتر
نمایش آنلاین این بخش رایگان است
معرفی پروژه توییتر در این قسمت انجام میشود.
شروع پروژه توییتر | کد نویسی بخش Left section
شروع پروژه توییتر | قالب بندی پروژه در این قسمت اجرا خواهد شد.
کدنویسی بخش Right setion پروژه توییتر
کدنویسی بخش Right setion پروژه توییتر در این قسمت انجام خواهد شد.
نظرات کاربران در رابطه با این دوره