آموزش ۱۰۰ روز HTML، CSS و JavaScript - ساخت ۱۰۰ پروژه عملی - آخرین آپدیت

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

خوش‌آمدگویی و شروع مسیر! WELCOME, WELCOME & WELCOME!

• مقدمه Introduction

• آماده‌سازی محیط کار و افزونه‌ها Setting Up Our Workspace & Extensions

• سورس کد تمام پروژه‌ها SOURCE CODE of ALL PROJECTS

• منابع آموزشی RESOURCES

روز ۱: بازی کوییز - HTML CSS JS Day 1: Quiz Game - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• ساخت HTML Building HTML

• ساخت CSS Building CSS

• ساخت JavaScript Building JavaScript

روز ۲: تولیدکننده پالت رنگ - HTML CSS JS Day 2: Color Palette Generator - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML HTML

• بخش CSS CSS

• بخش JavaScript JavaScript

روز ۳: برد درگ اند دراپ - HTML CSS JS Day 3: Drag & Drop Board - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JavaScript HTML, CSS & JavaScript

روز ۴: ردیاب هزینه‌ها - HTML CSS JS Day 4: Expense Tracker - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML HTML

• بخش CSS CSS

• بخش JavaScript JavaScript

روز ۵: ذخیره‌ساز بوک‌مارک - HTML CSS JS Day 5: Bookmark Saver - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML, CSS & JS

روز ۶: اعتبارسنج فرم - HTML CSS JS Day 6: Form Validator - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۷: تولیدکننده رمز عبور - HTML CSS JS Day 7: Password Generator - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML HTML

• بخش CSS CSS

• بخش JavaScript JavaScript

روز ۸: اپلیکیشن Todo - HTML CSS JS Day 8: Todo App - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML HTML

• بخش CSS CSS

• بخش JavaScript JavaScript

روز ۹: فرم تماس - HTML CSS JS Day 9: Contact Form - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۱۰: کارت‌های قیمت‌گذاری - HTML & CSS Day 10: Pricing Cards - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML HTML

• بخش CSS CSS

روز ۱۱: نمایش اعضای تیم - HTML & CSS Day 11: Team Members Showcase - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

روز ۱۲: جستجوی دستور پخت - HTML CSS JS Day 12: Recipe Finder - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۱۳: مبدل ارز - HTML CSS JS Day 13: Currency Converter - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۱۴: جستجوی گیت‌هاب - HTML CSS JS Day 14: Github Finder - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۱۵: طراحی صفحه ۴۰۴ اختصاصی - HTML & CSS Day 15: Custom 404 Page Design - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

روز ۱۶: طراحی فرم ثبت خبرنامه - HTML & CSS Day 16: Newsletter Signup Design - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

روز ۱۷: رابط کاربری Coming Soon - HTML CSS JS Day 17: Coming Soon UI - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML HTML

• بخش CSS CSS

• بخش JavaScript JavaScript

روز ۱۸: صفحه تماس با ما - HTML CSS JS Day 18: Contact Page - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML HTML

• بخش CSS CSS

• بخش JavaScript JavaScript

روز ۱۹: آکاردئون سوالات متداول - HTML CSS JS Day 19: FAQ Accordion - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML, CSS & JS

روز ۲۰: رابط کاربری اعضای تیم - HTML & CSS Day 20: Team Members UI - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML HTML

• بخش CSS CSS

روز ۲۱: سیستم رتبه‌بندی ستاره‌ای - HTML CSS JS Day 21: Star Rating - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۲۲: افکت کنفتی - HTML CSS JS Day 22: Confetti - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۲۳: تولیدکننده نقل‌قول - HTML CSS JS Day 23: Quote Generator - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۲۴: دکمه نمایش/پنهان رمز عبور - HTML CSS JS Day 24: Password Toggle - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۲۵: بنر پذیرش کوکی‌ها - HTML CSS JS Day 25: Cookie Consent Banner - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۲۶: گالری گسترش‌یافتنی - HTML CSS JS Day 26: Expanding Gallery - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۲۷: تغییر حالت لایت و دارک - HTML CSS JS Day 27: Light & Dark Mode Toggle - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۲۸: جابجاکننده تصادفی تصاویر - HTML CSS JS Day 28: Image Shuffler - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۲۹: تایمر شمارش معکوس - HTML CSS JS Day 29: Countdown Timer - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۳۰: تولیدکننده آواتار - HTML CSS JS Day 30: Avatar Generator - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۳۱: رابط کاربری ورودی OTP - HTML CSS JS Day 31: OTP Input UI - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۳۲: سنجش قدرت رمز عبور - HTML CSS JS Day 32: Password Strength Meter - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۳۳: تولیدکننده QR کد - HTML CSS JS Day 33: QR Code Generator - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۳۴: مراحل پیشرفت (Progress Steps) - HTML CSS JS Day 34: Progress Steps - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۳۵: طراحی کارت‌های آماری - HTML & CSS Day 35: Stats Cards UI Design - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

روز ۳۶: سبد خرید فروشگاهی - HTML CSS JS Day 36: E-Commerce Cart - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۳۷: پیش‌بینی‌کننده جنسیت - HTML CSS JS Day 37: Gender Predicter - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۳۸: طراحی رابط کاربری تاریخچه سفارشات - HTML & CSS Day 38: Order History UI Design - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

روز ۳۹: پیش‌نمایش Border Radius - HTML CSS JS Day 39: Border Radius Previewer - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۴۰: تولیدکننده Box Shadow - HTML CSS JS Day 40: Box Shadow Generator - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۴۱: فرمت‌ساز کارت اعتباری - HTML CSS JS Day 41: Credit Card Formatter - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۴۲: زنگ اعلان (Notification Bell) - HTML CSS JS Day 42: Notification Bell - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۴۳: آواتارهای هم‌پوشان - HTML & CSS Day 43: Overlapping Avatars - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

روز ۴۴: بازی دوز (Tic Tac Toe) - HTML CSS JS Day 44: Tic Tac Toe Game - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۴۵: شمارنده کاراکتر - HTML CSS JS Day 45: Character Counter - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۴۶: مشاهده‌گر پوکمون - HTML CSS JS Day 46: Pokemon Viewer - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۴۷: جستجوی کشور - HTML CSS JS Day 47: Country Lookup - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۴۸: تولیدکننده تصادفی غذا - HTML CSS JS Day 48: Random Meal Generator - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• پیاده‌سازی HTML, CSS و JS HTML CSS & JS

روز ۴۹: پیشرفت اسکرول - HTML CSS JS Day 49: Scroll Progress - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۵۰: اپلیکیشن کریپتو - HTML CSS JS Day 50: Crypto App - HTML CSS JS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

• بخش JavaScript JavaScript

روز ۵۱: لندینگ پیج تقسیم شده (Split) - HTML & CSS Day 51: Split Landing Page - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

روز ۵۲: جدول امتیازات (Leaderboard) - HTML & CSS Day 52: Leaderboard - HTML & CSS

• پیش‌نمایش پروژه Project Preview

• بخش HTML و CSS HTML & CSS

روز ۵۳: رابط کاربری کارت پست وبلاگ Day 53 - Blog Post Card UI

• پیش‌نمایش پروژه Project Preview

• بخش CSS CSS

روز ۵۴: رابط کاربری لیست چت Day 54 - Chat List UI

• پیش‌نمایش پروژه Project Preview

• بخش HTML HTML

• بخش CSS CSS

پروژه بعدی فردا منتشر می‌شود - منتظر باشید!!! Next Project Will Be Live Tomorrow - Stay Tuned!!!

• روز ۵۵: فردا منتشر می‌شود Day 55: Will be live tomorrow