معرفی دوره

دوره «۵۰ پروژه در ۵۰ روز» یک دوره عملی و فشرده از پلتفرم Udemy است که با هدف تقویت مهارت‌های فرانت‌اند شما در HTML، CSS و JavaScript طراحی شده است. در هر روز یک پروژه جدید پیاده‌سازی می‌شود تا دانشجو ضمن یادگیری مفاهیم پایه و متوسط، تجربه واقعی توسعه وب را در زمان کوتاه پشت سر بگذارد.

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

آنچه در این دوره خواهید آموخت

• ساختاردهی صفحات وب با HTML5 و آشنایی با تگ‌های جدید نظیر <section>، <article> و <canvas>.
• طراحی رابط کاربری زیبا با CSS3، شامل Flexbox، Grid Layout و انیمیشن‌های ساده.
• مفاهیم پایه‌ای و پیشرفته JavaScript برای افزودن تعامل و منطق به صفحات.
• پیاده‌سازی فرم‌ها با اعتبارسنجی در سمت کلاینت و مدیریت خطاها.
• کار با APIهای رایگان برای نمایش داده‌های پویا (مانند نمایش آب‌وهوا، اخبار و …).
• ایجاد افکت‌های پیمایش (scroll) و پارالاکس برای جذابیت بیشتر صفحات.
• مدیریت پروژه با Git و انتشار نسخه آزمایشی در GitHub Pages.

مزایا و فواید

• یادگیری عملی: هر درس یک پروژه واقعی است که از صفر تا صد کدنویسی می‌شود.
• افزایش سرعت عمل: تمرین روزانه باعث می‌شود مفاهیم سریع‌تر در حافظه تثبیت شوند.
• نمونه‌کار حرفه‌ای: با اتمام دوره، ۵۰ پروژه کامل برای نمایش در رزومه خواهید داشت.
• انعطاف‌پذیری زمانی: می‌توانید متناسب با برنامه شخصی روزانه یک پروژه را کامل کنید.
• تضمین خروجی: در انتهای هر پروژه، باید یک نسخه عملیاتی بارگذاری و تحویل داده شود.

پیش‌نیازها

• آشنایی مقدماتی با کامپیوتر و سیستم‌عامل (Windows, macOS یا Linux).
• نصب یک ویرایشگر کد مانند VS Code یا Sublime Text.
• درک ابتدایی از مفاهیم HTML و CSS (اختیاری، اما توصیه می‌شود).
• انگیزه قوی برای تمرین روزانه و خلق پروژه‌های جدید.

بخش‌های دوره

دوره شامل ۵۰ پروژه عملی است که به ترتیب از مباحث ساده به پیشرفته پیش می‌روند. در ادامه به چند نمونه از پروژه‌های اولیه و میانی اشاره می‌کنیم:

• روز 1: طراحی صفحه لندینگ ساده با HTML و CSS
• روز 2: افزونه منوی کشویی (Dropdown) با CSS و JavaScript
• روز 3: ساخت گالری تصاویر واکنش‌گرا
• روز 7: فرم ثبت‌نام با اعتبارسنجی JavaScript
• روز 10: نمایش وضعیت آب‌وهوا با API رایگان
• روز 15: ساخت نمودار پویا با Chart.js
• روز 20: ساخت اسلایدر تصاویر پیشرفته
• روز 25: پیاده‌سازی صفحه لاگین با JSON Web Token
• روز 30: طراحی داشبورد مدیریت با Grid و Flexbox
• … و ادامه تا روز 50 که شامل پروژه‌های کامل SPA با استفاده از JavaScript Vanilla و مفاهیم فروشگاه آنلاین، چت آنلاین و نقشه‌برداری خواهد بود.

مثال‌های عملی

برای نمونه، در پروژه روز 7 یک فرم ساده ثبت‌نام طراحی می‌کنید. ساختار اولیه HTML به شکل زیر است:

<form id=”signupForm”>

  <input type=”text” name=”username” placeholder=”نام کاربری”><br>

  <input type=”email” name=”email” placeholder=”ایمیل”><br>

  <input type=”password” name=”password” placeholder=”رمز عبور”>

</form>

سپس با JavaScript در سمت کلاینت بررسی می‌کنید که:

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

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