پروژه فرانت اند

ویروس کرونا در این روزها همه ما را خانه نشین کرده و دل و دماغ را از همه ما گرفته. بیاید کمی هم جنبه‌های دیگر را نیز ببینیم و این شرایط را به نفع خودمان تغییر دهیم. می‌پرسید چطور. خب، حال که فرصت بیشتری برای یادگیری داریم پس چرا برنامه نویسی تمرین نکنیم. آن هم برنامه نویسی وب. هم چیزی می‌سازیم هم چیزی یاد می‌گیریم که به درد بخور باشد. در این نوشته چند ایده پروژه را مطرح می‌کنیم تا بتوانیم هم یاد بگیریم و هم از کسالت قرنطینه در امان باشیم. در ضمن حال ویروس کرونا را هم بگیرم. برخی از پروژه ها با CSS/HTML و یا با استفاده از یک فریم‌ورک قابل انجام است و برخی دیگر نیاز به نوشتن جاوا اسکریپت دارد. خلاق باشید و از این ایده‌ها بتوانید ایده‌های دیگری نیز ایجاد کنید. برای این که یادگیری بهتری داشته باشید نیاز است تا یک پروژه را انتخاب و برنامه ریزی کنید. هر روز زمان مشخصی را برای پیشبرد پروژه اختصاص دهید و حتما یک Deadline برای انجام کار اختصاص دهید. سعی کنید تا نهایت ممکن بر روی جزییات کار کنید و به جستجو و حل چالش‌ها بپردازید. این ایده‌ها برای برنامه نویسی تحت وب و Front-End است و سطح مبتدی یا متوسط را پوشش می‌دهد.

پروژه اول: پیاده سازی layout‌های مختلف

اجازه دهید ابتدا با layout شروع کنیم. سعی کنید تا با استفاده از HTML و CSS چند چیدمان در لینک زیر را پیاده کنید: https://www.free-css.com/free-css-layouts/page1. پس از پیاده کردن حداقل ۱۰ layout، آنها را راست به چپ کنید تا با متن فارسی درست نمایش داده شود. این پروژه کوچک و ایجاد دید مناسب در چیدمان بسیار خوب است.

پروژه دوم: پیاده سازی یک صفحه ساده

در این پروژه قرار است یک صفحه بسیار ساده را طراحی کنید که در این لینک قرار دارد https://www.free-css.com/free-css-templates/page237/white-edition. این صفحه نقطه خوبی برای چیدمان یک صفحه واقعی است. سعی کنید این صفحه را برای فارسی نیز پیاده سازی کنید.

پروژه سوم: ساخت یک صفحه شخصی برای خودتان

چه خوب خواهد بود تا یک صفحه شخصی داشته باشیم. با استفاده از HTML و CSS3 یک صفحه درست کنیم تا بتوانیم خودمان را معرفی کنیم. از طرح در این وب سایت استفاده کنید: https://www.free-css.com/free-css-templates/page249/magazee. طرح‌های دیگری نیز در سایت هست که حتما به آنها نیز سر بزنید ولی برای شروع سعی کنید از طرح‌های ساده‌تر استفاده کنید. برای این که کمی پیشرفته‌تر کار کنیم صفحه را responsive یا واکنشگرا کنید. شما می‌توانید از Flex box در CSS استفاده کنید. خلاق باشید و با رنگ‌ها بازی کنید و از رنگ‌های دلخواه خود استفاده کنید. نکته مهم این است که نوشته‌ها خوانا باشند. این پروژه نقطه خوبی برای یادگیری خواهد بود و شما در آن بحث های layout یا چیدمان عناصر صفحه و استفاده از قدرت CSS را تمرین خواهید کرد.

پروژه چهارم: پیداه سازی یک وب سایت One-page برای یک شرکت

تصور کنید مشتری با شما تماس گرفته و از شما می‌خواهد یک وب سایت شرکتی با استفاده از طراحی که به شما می‌دهد ایجاد کنید. این طرح در این لینک قرار دارد: https://colorlib.com/wp/template/nitro/ سعی کنید تا جای ممکن طرح را پیاده سازی کنید. بخری از بخش‌ها مانند منو بالا یا قسمت our features نیاز به جاوا اسکریپت دارد که در این مرحله می‌توانید آن را نادیده بگیرید و بیشتر بر روی پیاده سازی اجزاء پیج با استفاده از HTML و CSS تمرکز کنید.

پروژه پنجم: کمی جاوا اسکریپت برای فرم

در این لینک یک فرم تماس داریم https://colorlib.com/preview/#nitro قرار است شما این فرم را پیاده سازی کنید و بعد با استفاده از جاوا اسکریپت (و نه jQuery) در زمان کلیک شدن فرم را بررسی کنید تا:

۱- همه field ها پر شده باشند.

۲- ایمیل فرمت درست باشد.

اگر field خالی بود باید border field به رنگ قرمز در بیاید.

پروژه ششم: ایجاد یک استاپ واچ

حتما بر روی موبایل یک Stopwatch دارید. با شروع میلی ثانیه دقیقه و ساعت رو نشان می‌دهد. سعی کنید با استفاده از جاوا اسکریپت یک Stopwatch درست کنید که یک دکمه شروع دارد. در ضمن یک دکمه pause دارد که به محض کلیک شدن عدد کنونی را در یک جدول زیر دکمه‌ها درج می‌کند و با زدن دکمه ادامه تایمر مجدد شمارش را ادامه می‌دهد. در نهایت نیز یک دکمه Stop داریم که تایمر را reset می‌کند و جدول پایین را نیز پاک می‌کند.

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

منبع: karademy.com