بلک فرایدی
🎉 بلک فرایدی تاپ لرن شروع شد! 🎉
🔥 70 درصد تخفیف ویژه روی تمامی دورههای آموزشی 🔥
اگر همیشه منتظر یک فرصت عالی برای یادگیری مهارتهای جدید بودید، الان وقتشه! 🚀
🎯 دورههای متنوع و کاربردی در زمینههای:
✔️ برنامهنویسی و توسعه وب
✔️ طراحی و گرافیک
✔️ امنیت و شبکه
✔️ و دهها موضوع جذاب دیگر
⏳ زمان محدوده! همین الان از بیشترین تخفیفها استفاده کنید🔔
✨ آینده شغلیتون رو همین امروز بسازید! 🌟
- مدرس دوره : امیرحسین باقری قلعه باباخانی ( رزومه )
- تعداد ویدیوها : 39 ویدیو
- مدت زمان دوره : 17:46:00
- سطح دوره : مقدماتی
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1401/03/07
آموزش صفر تا صد طراحی سایت واکنشگرا با shoelace
اگر شما هم یکی از توسعه دهندگان فرانت باشید، قطعا میدانید زمان چقدر ارزشمند است و کد نویسی چقدر زمان بر! پس گزینه ای که پیش رو هست استفاده از کتابخانه های متعددی که برای زبان های متعدد از جمله زبان css هست.
بند کفش یا (shoelace) یک کتابخانه متن باز و رایگان است. جلوه های بصری بسیار زیبایی دارد، که همه سلیقه پسند است، بر خلاف برخی دیگر کتابخانه ها، که هر چند محبوبیت بسیار زیادی دارند اما برخی افراد از جمله من علاقه ای به استفاده از سبک طراحی آن کتابخانه ندارند، مثلا من بسیار بسیار کم از استایل های آماده بوت استرپ استفاده میکنم و عمده استفاده من از بوت استرپ برای طراحی واکنشگرا هست که کار من رو بسیار آسون تر میکنه.
این کتابخانه برای کسانی که به تازگی شروع کرده اند یا کسانی که نمیخواهد کدهای زیادی بنویسند بسیار مناسب است، با استایل های آماده و حرفه ای که دارد میتواند سرعت کدنویسی را بسیار افزایش دهد.
بسیار سبک است و قابلیت شخصی سازی دارد.اما این کتابخانه یک ضعف دارد، آن هم اینکه توانایی واکنشگرا کردن قالب شما را ندارد، بنابراین ما در این دوره تصمیم گرفتیم، با استفاده از دیگر فریمورک ها، این ضعف را پوشش دهیم.
در این دوره چند پروژه عملی اجرا میشود که شما به راحتی پس از پایان این دوره حتی اگر در css هم بسیار حرفه ای نباشید پس از این دوره یک توسعه دهنده فرانت محسوب شوید.
با توجه به اینکه در این دوره، مباحث جاوا اسکریپت در حد نیاز و در حد فهم کدهای استفاده شده در پروژه آموزش داده میشود، بهتر است که کمی به جاوا اسکریپت اشنایی داشته باشید.
سرفصل های دوره :
معرفی shoelace
نصب و راه اندازی shoelace
آموزش استفاده از shoelace
کامپوننت ها (آواتارها، دکمه ها، ایکون ها، نوار پیشرفت، باکس های جزئیات، منوهای کشویی و...)
توکن ها
ساخت qr کد
اینکلود کردن صفحه در وب
واکنشگرا (ریسپانسیو) کردن با بوت استرپ
فرمت اعداد
انیمیشن
پروژه طراحی سایت
پیش نیاز های دوره :
- آشنایی با html
- آشنای با css
- آشنایی با js
فهرستـــ ویدیوها
مدت زمان دوره 17:46:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
1 - نصب و راه اندازی
در این جلسه به شما یاد میدیم چطور بند کفش رو بصورت لوکال و یا از طریق cdn به پروژه خودتون استفاده کنید
2- چرا shoelace
شاید براتون سوال باشه چرا باید از shoelace استفاده کنیم؟ خب ما در این جلسه هم توضیح کامل میدیم هم اینکه یک نمونه کار با بند کفش انجام میدیم
5- دکمه ها، ایکون ها و نوار پیشرفت
آموزش استفاده از دکمه ها و ایکون ها به همراه یک مینی پروژه و استفاده از نوار پیشرفت در مینی پروژه
6- باکس های جزئیات
نمایش آنلاین این بخش رایگان است
در این جلسه باکس های نمایش جزئیات رو به زبانی ساده توضیح و کاربردشون در وب رو بیان میکنیم
9- نمایش قبل و بعد یک تصویر
در این جلسه یاد خواهید گرفت چطور قبل و بعد یک تصویر رو نمایش بدید
10- qr کد و حلقه پیشرفت
در این جلسه یاد خواهید گرفت چطور qr کد آسان بسازید و همچنین حلقه پیشرفت را نیز یاد خواهید گرفت.
16 - طراحی سایت - هدر و منو (جلسه اول)
نمایش آنلاین این بخش رایگان است
در این جلسه پروژه طراحی وب رو شروع خواهیم کرد
17- طراحی سایت - هدر و منو (جلسه دوم)
در این جلسه به ادامه جلسه قبل و طراحی هدر و منو میپردازیم
19- طراحی باکس پیشنهادات شگفت انگیز
بخش پیشنهادات شگفت انگیز امروزه در هر فروشگاهی با هر موضوعی پیدا میشه، شاید شما هم از کسانی باشید که قصد داشته باشید چنین باکسی طراحی کنید اما ندونید چطور؟
23- ادامه طراحی صفحه اول سایت
در این جلسه به مرتب کردن کدها و مرتب کردن صفحه اول وب میپردازیم
24- طراحی صفحه اول سایت (جلسه 2)
در این جلسه، به ادمه طراحی و مرتب کردن صفحه اول سایت میپردازیم
27- طراحی بخش آخرین ارسالی های انجمن
در این جلسه آخرین ارسالی های انجمن رو طراحی و کمی دیگر صفحهه اول سایت رو مرتب میکنیم
28- طراحی حالت دارک / لایت مود تم (تم روشن و سیاه)
در این جلسه به این موضوع میپردازیم که چطور حالت دارک و لایت مود بسازیم (تم روشن و سیاه)
32- طراحی مگامنو برای موبایل
در این جلسه با اضافه کردن نکاتی جدید، منویی جدید برای وب طراحی خواهیم کرد که در حالت موبایل، دسته بندی سایت که بصورت مگامنو بود نیز داشته باشد
33- ادامه جلسه قبل در طراحی منوی موبایل (جلسه دوم)
در این جلسه، مباحث جلسه قبل را ادامه خواهیم داد و منوی خودمون رو تکمیل میکنیم
34- افزودن بخش های جدید به صفحه اول
در این جلسه علاوه بر افزودن گزینه افزودن به سبد خرید، بخش جدیدی به صفحه اول اضافه خواهد شد
36- طراحی صفحه هر محصول (جلسه دوم)
در این جلسه به طراحی ادامه صفحه مختص هر محصول میپردازیم
نظرات کاربران در رابطه با این دوره