آموزش جامع و پروژه محور Tailwind Css + دیزاین فروشگاه قهوه

فریمورک تیلویند (Tailwind) یک فریم ورک CSS محور هست که اخیرا به شدت پیشرفت کرده و مورد استقبال طراحان رابط کاربری (UI)  قرار گرفته تا بتونن با ابزارهای متنوع تر و سرعت بیشتر، ظاهر زیبایی رو برای صفحات وب و اپلیکیشن بسازن.

حالا فکر می کنید چرا این فریم ورک انقدر سریع توسعه پیدا کرد و پر طرفدار شد؟ جواب رو در چند نکته خلاصه می کنیم

1 – خلاص شدن از دردسرهای نام گذاری کلاس های CSS

یکی از چالش های بزرگ بچه هایی که با  css کد میزنن انتخاب یک نام مناسب برای کلاس ها هست تا بتونن به کمک css  استایل دهی رو انجام بدن.

با استفاده از تیلویند، نیاز نیست کلاس‌های پیچیده و نام‌های خاصی برای عناصر وب خودتون بسازید. به جای اون، از کلاس‌های کاربردی تیلویند استفاده می‌کنید که به شما کمک می‌کنند ویژگی‌های مختلف مثل رنگ، اندازه، پس‌زمینه و … رو به آیتم‌هاتون اضافه کنید. چون تیلویند اومده استایل های مختلف css  رو در مجموعه ای از کلاس های کاربردی (Utility) یا ” آماده ” خلاصه کرده تا بتونیم خیلی راحت و سریع از طریق html و این کلاس ها، استایل مورد نظر خودمون رو بدیم.

2 – عدم نیاز به فایل جداگانه CSS

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

3 – سبک شدن و کاهش حجم برنامه

وقتی فریم ورک تیلویند رو به پروژه اضافه و کدنویسی رو شروع میکنیم، در نهایت برای خروجی گرفتن باید بیلد بگیریم. یکی دیگه از مزیت های تیلویند اینه که در این زمان، فقط از همون کلاس هایی که داخل پروژه استفاده شده بیلد گرفته میشه نه کل کلاس های تیلویند.

همین مسئله باعث میشه حجم پروژه و کدهای اون کمتر باشه و ساختار بهینه تری پیدا کنه.

4 – قدرت بیشتر در طراحی رسپانسیو

فریم‌ورک تیلویند (Tailwind CSS) ابزارها و منابعی در اختیار طراحان و توسعه‌دهندگان وب قرار میده که در طراحی رسپانسیو (Responsive) یا واکنش گرا، کنترل و آزادی عمل بیشتری داشته باشن.

توسعه سریع تر با استفاده از کلاس های کاربردی آماده (Utility) ، بهره مندی از سیستم گرید انعطاف پذیر برای تنظیم مختصات المان ها در نمایشگرهای مختلف، کاهش حجم بارگذاری صفحات با فشرده سازی کدهای CSS ،  سازگاری با مرورگرهای مختلف برای تنظیم انواع استایل و چندین ویژگی دیگر، سرعت و کیفیت طراحی رسپانسیو را به طور محسوسی بالاتر میبرن.

تیلویند رو یاد بگیرم بهتره یا بوت استرپ؟

این دو فریم ورک محبوب هر کدوم مزایا و معایب خودشون رو دارن که در ادامه به صورت مختصر اونهارو مقایسه میکنیم تا دید بهتری داشته باشید.

Bootstrap

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

مهمترین ویژگی ها :

1. تشابه ظاهری پروژه های تولید شده به دلیل استفاده از کامپیوننت های آماده
2. دارای گرید سیستم انعطاف پذیر
3. ارائه ابزارها و کامپوننت‌های جهت استفاده در پروژه
4. افزایش حجم کدهای پروژه‌ها به دلیل استفاده از کامپوننت‌ها و استایل‌های پیش‌فرض

Tailwind CSS

یک فریم‌ورک CSS قدرتمند و حرفه ای مبتنی بر کلاس‌های کاربردی آماده (Utility) هست که از طریق تعیین کلاس‌هایی با سینتکس خاص، کار استایل دهی رو به شدت سریع تر و آسون تر کرده.

مهمترین ویژگی ها:

1. طراحی وبسایت‌هایی با ظاهری منحصربه‌فرد و متنوع به دلیل قابلیت سفارشی سازی نامحدود استایل ها
2. کلاس‌های Utility امکان ایجاد استایل‌های سفارشی متنوع و اختیار بیشتر رو به طراح میده اما نیاز به یادگیری سینتکس کلاس ها هم هست که البته اصلا سخت نیست.
3. با استفاده از کلاس‌های Utility، معمولاً حجم کدهای CSS به طرز قابل توجهی کاهش پیدا میکنه.

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

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

پیشنهاد سبزلرن به شما اینه که در صورت امکان هر دو رو یاد بگیرید چون شرایط پروژه ها باهم متفاوت هست و به عنوان یک طراح رابط کاربری باید بتونید از هرکدوم در زمان مناسبش استفاده کنید. اما اگر قرار باشه یک گزینه رو انتخاب کنید با توجه به توضیحاتی که دادیم و دیدن فصل های رایگان هرکدوم می تونید تصمیم نهایی رو بگیرید.

من بوت استرپ رو یاد گرفتم ایا نیاز هست که تیلویند رو هم یاد بگیرم؟

با توجه به توضیحات قسمت قبل حتما متوجه شدید که استراتژی استفاده از هر کدوم از این فریم ورک ها متفاوته و اگر تا الان بوت استرپ رو یاد گرفتید، تسلط به تیلویند میتونه بال دوم شما باشه تا بتونید هر نوع پروژه ای رو طراحی و پیاده سازی کنید چون اخیرا تقاضا برای این فریم ورک به دلیل قابلیت سفارشی سازی نامحدود بیشتر شده و نباید از این جریان عقب بمونید.

اینم بدونید که ساختار کلی اون ها تقریبا شبیه هم هست و یادگیری اون زمان زیادی از شما نمی گیره.

تو این دوره چی یاد می گیریم و به چه سطحی میرسیم؟

1. معرفی کامل فریم ورک تیلویند، نحوه کار و روش شخصی سازی اون به شکل دلخواه
2. آشنایی با ساختار یک پروژه تیلویند به صورت صحیح و اصولی و نحوه تعریف ساختار استاندارد
3. آشنایی با یک پروژه واقعی در حد بازار کار و نحوه تبدیل یک قالب فیگما به پروژه به صورت گام به گام
4. نحوه استخراج فاصله ها، اندازه ها، فونت ها و تصاویر از قالب فیگما برای طراحی و استایل دهی دقیق
5. یادگیری نکات تجربی و حرفه ای از استاد که قطعا هیچ جا پیدا نمی کنید

در واقعی بعد از پایان دوره به سطحی میرسید که بتونید به راحتی پروژه های فریلنسری یا شرکتی که در قالب فیگما به شما سفارش داده میشه رو به کمک تیلویند، 0 تا 100 طراحی و پیاده سازی کنید.

این دوره برای چه کسانی مناسب هست؟

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

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

بنابراین اگر :

1. HTML/CSS بلدید و به دنبال یک فریم ورک CSS حرفه ای برای طراحی UI صفحات وب و موبایل هستید
2. دقیقا به دنبال یادگیری فریم ورک تیلویند هستید
3. قبلا تیلویند رو آموزش دیدید ولی نتیجه نگرفتید و پروژه عملی ندارید
4. بوت استرپ رو یاد گرفتید و حالا دنبال یه فریم ورک حرفه ای تر با قابلیت شخصی سازی نامحدود هستید

این دوره قطعا مناسب شماست و سکوی پرتابی برای ورود یا ارتقای شما در بازار کار خواهد بود.

تفاوت دوره تیلویند سبزلرن با بقیه چی هست و چرا بهترین گزینه محسوب میشه؟

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

استاد عبادی (مدرس دوره) یه جمله دارن که میگن برای چیزی که تو اینترنت رایگانش گیر میاد نباید هزینه کنی اما فرق اساسی این دوره چیه؟

این دوره بر اساس تجربه میره جلو. شما خیلی راحت میتونید مباحث اساسی تیلویند رو به صورت رایگان از خود سایت ببینید (40 درصد هر دوره سبزلرن، رایگان هست) و اصلا نیازی نیست هزینه کنید. میشه گفت خود مباحث تیلویند اصلا چیز سختی نیست و خیلی ساده و راحته و شما با خوندن داکیومنت این فریم ورک میتونید راحت مطالبش رو یاد بگیرید.

اما بخش اصلی و اساسی دوره، پروژه خیلی خفن دوره است که یک UI اختصاصی داره به همراه یه پروژه فروشگاهی “قهوه” استاندارد و بسیار زیبا که میتونید در ویدیو معرفی دوره، این قالب رو ببینید. در واقع شما در قالب پروژه یاد میگیرید چطور باید به صورت اصولی و صحیح از این فریم ورک قدرتمند استفاده کنید تا خروجی خیلی خوبی ازش بگیرید.

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

پس تفاوت اساسی این دوره عبارتند از :

1. مشاهده قسمت های اصلی تیلویند به صورت رایگان
2. پروژه محور بودن دوره که شامل یک پروژه فروشگاه قهوه حرفه ای باUI اختصاصی هست.
3. آشنایی و یادگیری در حد نیاز با نرم افزار فیگما برای به دست آوردن اندازه ها، رنگ ها، فونت ها، عکس ها و… در یک پروژه واقعی بازار کار
4. به کمک تجربیات استاد یاد میگیرید در یک پروژه واقعی باید از کجا شروع کنید، چطور ساختار پروژه رو بچینید تا وارد مرحله کدنویسی بشید و هر بخش رو با دقت و وسواس بالا پیاده سازی کنید تا دقیقا خروجی شبیه قالب مد نظر بشه.
5. در این دوره معنی واقعی پشتیبانی رو متوجه میشید و هر موقع در مسیر دوره با مشکل یا سوالی مواجه شدید فقط کافیه سوالتون رو از طریق بخش پشتیبانی دوره مطرح کنید تا مدرس دوره و کارشناسان پشتیبانی در اسرع وقت و با حوصله جواب شمارو بدن.

شرکت کردن یا نکردن در این دوره چه ریسکی داره؟!

میزان رشد و موفقیت هر شخصی نتیجه انتخاب های خودشه. ندیدن دوره چندان ضرری به شما نمیزنه. اما دیدنش میتونه چند پله شما رو به جلو ببره.

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

مهارت هایی مثل :

1. یادگیری عملی با پروژه ای که UI اون اختصاصی طراحی شده
2. تمام موارد مهمی که در تولید یک پروژه با تیلویند نیاز دارید به صورت عملی و قدم به قدم آموزش می بینید
3. کار کردن با یک پروژه کاملا واقعی و بزرگ در حد بازار کار برای آشنایی با سبک آماده سازی پروژه بر اساس قالب فیگما
4. آشنایی کامل با پایه و ساختار یک پروژه واقعی برای استانداردسازی طراحی
5. نحوه پیاده سازی یک قالب به صورت 100 درصدی شبیه طرح اولیه. شامل محاسبه فاصله ها، چیدمان و مرتب سازی المان ها.

بعد از اتمام دوره به چه سطحی میرسیم و چطور میتونیم بهترین نتیجه رو بگیریم؟

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

اگر طبق مسیر پیشنهادی بالا جلو برید، شما بعد از اتمام دوره تسلط خیلی خوبی به تیلویند پیدا کردید و میتونید به راحتی با این تکنولوژی جدید و جذاب کار کنید و قالب های خلاقانه و حرفه ای پیاده سازی کنید.

این دوره پیش نیاز خاصی داره که باید قبلش بلد باشم؟

برای یادگیری تیلویند از اونجایی که فریم ورک CSS حساب میشه پس شما قبل از ورود به تیلویند باید خیلی خوب روی مباحث CSS مسلط باشید.

در واقع قبل از این دوره شما باید HTML , CSS رو به صورت کامل مسلط باشید و حداقل چهار الی پنج پروژه قابل قبول بازار کار با این تکنولوژی ها توسعه داده باشید تا بتونید به خوبی از مطالب این دوره استفاده کنید.

وقتی این دوره رو دیدم قدم بعدیم چیه؟

شما وقتی در فریم ورک تیلویند به تسلط برسید به این معنی هست که در HTML/CSS هم حرفه ای بودید که تونستید از این مرحله بگذرید. بنابراین میشه گفت شما اولین قدم تبدیل شدن به متخصص فرانت اند رو محکم برداشتید. حالا اگه بتونید از طریق مشارکت در پروژه های بزرگ، توسعه برنامه های متن باز، ارتباط با افراد متخصص این حوزه و همچنین انجام پروژه های فریلنسری خلاقانه، خودتون رو در معرض دید بازار قرار بدید، قطعا موفقیت های بزرگ در انتظار شما خواهد بود.

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

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

نظر دانشجو ها در رابطه با این دوره؟

خیلی از شرکت کنندگان دوره با دیدن پروژه و خروجی که به دست میارن واقعا ذوق زده شدن چون یادگیری تیلویند با چنین پروژه‌ای در این سطح واقعا لذت بخشه. خیلی از دانشجوها در کامنت های این دوره به این موضوع اشاره کردن. شما هم میتونید به کامنت های دوره یه سر بزنید و نظرات دانشجوهای دوره رو ببینید.

بعد از این دوره به سطحی می رسم که درآمد کسب کنم؟ بازار کارش چطوره؟!

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

وقتی یک فریم ورک روند توسعه خیلی خوبی می گیره، به دنبالش کاربرد و رواج اون هم در کشورها بیشتر میشه. بعدش چه اتفاقی میفته؟! تقاضای متخصص اون زبان در بازار زیاد میشه.

چون میزان تقاضا نسبت به افراد متخصص این حوزه خیلی بیشتر هست، پس حقوق ها هم در سطح بالایی تعیین میشه.

پس بدونید که آینده این تخصص و شغل از لحاظ درآمدی هم فوق العادست به شرطی که به مهارت بالایی برسید.

چه تضمینی هست که خوب و کامل یاد بگیرم؟

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

ولی به طور کلی چند دلیل هست که معمولا باعث عدم نتیجه گیری شما از دوره ها میشه :

1. کیفیت محتوای آموزشی و مدرس اون
2. اشتیاق و علاقه مندی کافی برای یادگیری
3. نبود پشتیبانی در دسترس و قوی در حین آموزش
4. عدم مرور و تمرین مطالب و انبار کردن اونها برای روز مبادا !

دو مورد اینها بر عهده شماست و دو مورد هم بر عهده سبزلرن. ما به شما قول میدیم این آموزش رو با بالاترین کیفیت و موثرترین پشتیبانی در اختیار شما قرار بدیم. شما قول میدید که با علاقه و پشتکار تمام تمرینات رو انجام بدید تا به نتیجه برسید؟!

پس همه چی حله…