قیمت این دوره: 250,000 75,000 تومان
  • مدرس دوره : امیرحسین باقری قلعه باباخانی
  • تعداد ویدیوها : 39 ویدیو
  • مدت زمان دوره : 17:46:00
  • سطح دوره : مقدماتی
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1401/03/07
ثبتـــ نام در این دوره ثبت نام در دوره
آموزش صفر تا صد طراحی سایت واکنشگرا با shoelace

آموزش صفر تا صد طراحی سایت واکنشگرا با shoelace

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

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

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

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

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

با توجه به اینکه در این دوره، مباحث جاوا اسکریپت در حد نیاز و در حد فهم کدهای استفاده شده در پروژه آموزش داده میشود، بهتر است که کمی به جاوا اسکریپت اشنایی داشته باشید.

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

معرفی shoelace

نصب و راه اندازی shoelace

آموزش استفاده از shoelace

کامپوننت ها (آواتارها، دکمه ها، ایکون ها، نوار پیشرفت، باکس های جزئیات، منوهای کشویی و...)

توکن ها

ساخت qr کد

اینکلود کردن صفحه در وب

واکنشگرا (ریسپانسیو) کردن با بوت استرپ

فرمت اعداد

انیمیشن

پروژه طراحی سایت



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

  1. آشنایی با html
  2. آشنای با css
  3. آشنایی با js

فهرستـــ ویدیوها

مدت زمان دوره 17:46:00
  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1
  • معرفی دوره

00:07:49

معرفی دوره و مقدمات لازم برای ورود به دوره

2
  • 1 - نصب و راه اندازی

00:05:49

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

3
  • 2- چرا shoelace

00:17:20

شاید براتون سوال باشه چرا باید از shoelace استفاده کنیم؟ خب ما در این جلسه هم توضیح کامل میدیم هم اینکه یک نمونه کار با بند کفش انجام میدیم

4
  • 3- پیام ها

00:18:55

نحوه نمایش پیام های جذاب به کاربران

5
  • 4- آواتارها و توکن ها

00:19:06

آموزش ساخت آواتار و معرفی توکن ها

6
  • 5- دکمه ها، ایکون ها و نوار پیشرفت

00:43:00

آموزش استفاده از دکمه ها و ایکون ها به همراه یک مینی پروژه و استفاده از نوار پیشرفت در مینی پروژه

7
  • 6- باکس های جزئیات

  • نمایش آنلاین این بخش رایگان است
00:19:02

در این جلسه باکس های نمایش جزئیات رو به زبانی ساده توضیح و کاربردشون در وب رو بیان میکنیم

8
  • 7- دیالوگ ها

  • نمایش آنلاین این بخش رایگان است
00:28:09

آموزش کار با دیالوگ ها

9
  • 8- منوهای کشویی

00:09:04

آموزش ساخت منوهای کشویی با کلیک و هاور

10
  • 9- نمایش قبل و بعد یک تصویر

00:15:02

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

11
  • 10- qr کد و حلقه پیشرفت

00:09:16

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

12
  • 11- آموزش card

00:21:37

در این جلسه cardها را به شما با استفاده از نمونه ای عملی اموزش خواهیم داد

13
  • 12- تب لیست ها

  • نمایش آنلاین این بخش رایگان است
00:12:17

آموزش ساخت tab با shoelace

14
  • 13- راهنما یا tooltipها

00:20:19

آموزش ساخت راهنمای ابزار، با دو روش متفاوت

15
  • 14- آموزش اینکلود کردن

00:07:43

آموزش اینکلود کردن یک متن در صفحه خودتان از طریق لینک

16
  • 15- واکنشگرا شدن سایت

00:18:14

در این جلسه مباحث گرید بوت استرپ رو کامل ولی ساده آموزش میدیم

17
  • 16 - طراحی سایت - هدر و منو (جلسه اول)

  • نمایش آنلاین این بخش رایگان است
00:35:58

در این جلسه پروژه طراحی وب رو شروع خواهیم کرد

18
  • 17- طراحی سایت - هدر و منو (جلسه دوم)

00:30:07

در این جلسه به ادامه جلسه قبل و طراحی هدر و منو میپردازیم

19
  • 18- طراحی اسلایدر بالای سایت

00:35:45

طراحی اسلایدر بالای وب سایت

20
  • 19- طراحی باکس پیشنهادات شگفت انگیز

00:38:35

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

21
  • 20- طراحی ادامه قالب سایت

00:31:31

در این جلسه به طراحی ادامه قالب سایت میپرازیم

22
  • 21- مطالب سایت

00:29:45

در این جلسه بخش مطالب سایت را طراحی خواهیم کرد

23
  • 22- طراحی بخش فوتر

00:27:12

در این جلسه، به طراحی بخش فوتر سایت میپردازیم

24
  • 23- ادامه طراحی صفحه اول سایت

00:18:04

در این جلسه به مرتب کردن کدها و مرتب کردن صفحه اول وب میپردازیم

25
  • 24- طراحی صفحه اول سایت (جلسه 2)

00:31:56

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

26
  • 25- طراحی گردونه شانس

00:37:44

در این جلسه یک گردونه شانس رو همراه هم طراحی خواهیم کر

27
  • 26- طراحی گردونه شانس (جلسه دوم)

00:13:50

در این جلسه صفحه گردونه شانس را تکمیل میکنیم

28
  • 27- طراحی بخش آخرین ارسالی های انجمن

00:43:00

در این جلسه آخرین ارسالی های انجمن رو طراحی و کمی دیگر صفحهه اول سایت رو مرتب میکنیم

29
  • 28- طراحی حالت دارک / لایت مود تم (تم روشن و سیاه)

00:14:20

در این جلسه به این موضوع میپردازیم که چطور حالت دارک و لایت مود بسازیم (تم روشن و سیاه)

30
  • 29- ساخت مگامنو (جلسه اول)

00:50:04

در این جلسه شروع به طراحی مگا منو خواهیم کرد

31
  • 30- طراحی مگا منو (جلسه دوم)

00:37:31

در این جلسه به ادامه طراحی مگامنو میپردازیم

32
  • 31- طراحی سبد خرید

00:38:34

در این جلسه سبد خرید سایت را طراحی خواهیم کرد

33
  • 32- طراحی مگامنو برای موبایل

00:30:53

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

34
  • 33- ادامه جلسه قبل در طراحی منوی موبایل (جلسه دوم)

00:55:56

در این جلسه، مباحث جلسه قبل را ادامه خواهیم داد و منوی خودمون رو تکمیل میکنیم

35
  • 34- افزودن بخش های جدید به صفحه اول

00:55:31

در این جلسه علاوه بر افزودن گزینه افزودن به سبد خرید، بخش جدیدی به صفحه اول اضافه خواهد شد

36
  • 35- طراحی صفحه هر محصول

00:26:00

طراحی صفحه اختصاصی هر محصول

37
  • 36- طراحی صفحه هر محصول (جلسه دوم)

00:27:24

در این جلسه به طراحی ادامه صفحه مختص هر محصول میپردازیم

38
  • 37- طراحی صفحه هر محصول (جلسه سوم)

00:51:32

در این جلسه حالت زوم تصاویر هر محصول رو طراحی و صفحه را کمی مرتب تر خواهیم کرد

39
  • 38- انیمیشن ها و لودینگ در بند کفش

00:32:30

در این جلسه، علاوه بر موضوعات انیمیشن ها و لودینگ در shoelace بخش صفحه اختصاصی هر محصول رو هم تکمیل تر خواهیم کرد


نظرات کاربران در رابطه با این دوره

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