آموزش 50 پروژه در 50 روز - HTML، CSS و جاوا اسکریپت

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

معرفی Introduction

• خوش آمدی Welcome

• محیط و راه اندازی من My Environment & Setup

• دیگ استارت پروژه Project Starter Boilerplate

• کد و دموهای پروژه های دوره Course Projects Code & Demos

روز 1 - گسترش کارت Day 1 - Expanding Cards

• معرفی پروژه Project Intro

• کارت های اولیه Initial Cards

• اثر گسترش دهنده Expanding Effect

روز 2 - مراحل پیشرفت Day 2 - Progress Steps

• معرفی پروژه Project Intro

• ایجاد مراحل Creating The Steps

• عملکرد مرحله Step Functionality

روز 3 - ناوبری چرخشی Day 3 - Rotating Navigation

• معرفی پروژه Project Intro

• محتوا و استایل دایره Content & Circle Styling

• جلوه چرخش و اسلاید Rotate & Slide Effect

روز 4 - ویجت جستجوی پنهان Day 4 - Hidden Search Widget

• معرفی پروژه Project Intro

• ویجت جستجوی پنهان Hidden Search Widget

روز 5 - بارگذاری تار Day 5 - Blurry Loading

• معرفی پروژه Project Intro

• تصویر پس زمینه و بارگذاری متن Background Image & Loading Text

• بارگذاری جلوه تاری Load Blur Effect

روز ششم - انیمیشن اسکرول Day 6 - Scroll Animation

• معرفی پروژه Project Intro

• اسکرول انیمیشن Scroll Animation

روز هفتم - تقسیم صفحه فرود Day 7 - Split Landing Page

• معرفی پروژه Project Intro

• HTML و CSS صفحه فرود را تقسیم کنید Split Landing Page HTML & CSS

• افزودن اثر شناور Adding The Hover Effect

روز هشتم - انیمیشن موج فرم Day 8 - Form Wave Animation

• معرفی پروژه Project Intro

• یک ظاهر طراحی شده به فرم Styling The Form

• افزودن اثر موج Adding The Wave Effect

روز نهم - صفحه صدا Day 9 - Sound Board

• معرفی پروژه Project Intro

• پروژه تابلو صدا Sound Board Project

روز دهم - شوخی های پدر Day 10 - Dad Jokes

• معرفی پروژه Project Intro

• جوک HTML و CSS Jokes HTML & CSS

• کار با Fetch & HTTP Requests/Responses Working With Fetch & HTTP Requests/Responses

• واکشی و نمایش جوک Fetching & Displaying Jokes

روز یازدهم - کدهای کلید رویداد Day 11 - Event KeyCodes

• معرفی پروژه Project Intro

• جعبه های کلید HTML و CSS Key Boxes HTML & CSS

• نمایش کدهای کلیدی Display Key Codes

روز 12 - سوالات متداول جمع کردن Day 12 - FAQ Collapse

• معرفی پروژه Project Intro

• جعبه سوالات متداول FAQ Boxes

• تغییر دکمه ها Toggle Buttons

روز 13 - انتخاب تصادفی Day 13 - Random Choice Picker

• معرفی پروژه Project Intro

• رابط کاربری انتخابگر انتخاب Choice Picker UI

• برچسب ها را ایجاد کنید Create Tags

• Random Tag را انتخاب کنید Select Random Tag

روز چهاردهم - ناوبری متحرک Day 14 - Animated Navigation

• معرفی پروژه Project Intro

• سبک ناو Nav Styling

• شکل‌دهی نماد و جابجایی فعال Icon Styling & Active Toggle

روز 15 - شمارنده افزایشی Day 15 - Incrementing Counter

• معرفی پروژه Project Intro

• شمارنده HTML و CSS Counters HTML & CSS

• ایجاد و نمایش افزایش Create & Display Increment

روز شانزدهم - آب بنوشید Day 16 - Drink Water

• معرفی پروژه Project Intro

• ایجاد و سبک جام ها Create & Style The Cups

• لیوان های کوچک را پر کنید Fill Small Cups

• بیگ کاپ را به روز کنید Update Big Cup

روز هفدهم - برنامه فیلم Day 17 - Movie App

• معرفی پروژه Project Intro

• طرح‌بندی رابط کاربری فیلم Movies UI Layout

• واکشی داده ها از API Fetching Data From The API

• افزودن فیلم به DOM Adding Movies To The DOM

روز 18 - لغزنده پس زمینه Day 18 - Background Slider

• معرفی پروژه Project Intro

• HTML و CSS HTML & CSS

• تغییر اسلایدها Changing Slides

روز 19 - ساعت تم Day 19 - Theme Clock

• معرفی پروژه Project Intro

• شروع ساعت Starting The Clock

• پایان یک ظاهر طراحی شده ساعت Finish Clock Styling

• حالت و عملکرد ساعت Mode & Clock Function

روز 20 - افکت ریپل دکمه Day 20 - Button Ripple Effect

• معرفی پروژه Project Intro

• سبک دکمه و انیمیشن Button Style & Animation

• اثر کلیک دکمه Button Click Effect

روز 21 - N Drop را بکشید Day 21 - Drag N Drop

• معرفی پروژه Project Intro

• دراپ باکس ایجاد کنید Create Drop Boxes

• کشیدن رویدادها را رها کنید Drag Drop Events

روز 22 - برنامه طراحی Day 22 - Drawing App

• معرفی پروژه Project Intro

• رابط کاربری پد طراحی Drawing Pad UI

• اشکال بوم Canvas Shapes

• رویدادها و نقاشی های موش Mouse Events & Drawing

• کنترل های جعبه ابزار Toolbox Controls

روز 23 - بارگذار CSS جنبشی Day 23 - Kinetic CSS Loader

• معرفی پروژه Project Intro

• بارگذار CSS جنبشی Kinetic CSS Loader

روز 24 - نگهدارنده محتوا Day 24 - Content Placeholder

• معرفی پروژه Project Intro

• HTML کارت Card HTML

• CSS کارت Card CSS

• افکت زمان پایان انیمیشن Animation Timeout Effect

روز 25 - نوار ناوبری چسبنده Day 25 - Sticky Navbar

• معرفی پروژه Project Intro

• محتوا و سبک وب سایت Website Content & Style

• Navbar CSS & JS Navbar CSS & JS

روز 26 - دو لغزنده عمودی Day 26 - Double Vertical Slider

• معرفی پروژه Project Intro

• رابط کاربری لغزنده عمودی Vertical Slider UI

• عملکرد لغزنده عمودی Vertical Slider Function

روز 27 - اعلان نان تست Day 27 - Toast Notification

• معرفی پروژه Project Intro

• ایجاد اعلان‌های نان تست Create Toast Notifications

روز 28 - پروفایل های Github Day 28 - Github Profiles

• معرفی پروژه Project Intro

• کارت پروفایل Github Github Profile Card

• واکشی داده های نمایه با Axios Fetching Profile Data With Axios

• کارت های پروفایل پویا Dynamic Profile Cards

• اضافه کردن Repos به کارت Adding Repos To Card

روز 29 - دو قلب کلیک کنید Day 29 - Double Heart Click

• معرفی پروژه Project Intro

• HTML و CSS HTML & CSS

• نمایش قلب بر اساس موقعیت کلیک Show Heart Based On Click Position

روز 30 - جلوه خودکار متن Day 30 - Auto Text Effect

• معرفی پروژه Project Intro

• جلوه خودکار متن Auto Text Effect

روز 31 - تولید رمز عبور Day 31 - Password Generator

• معرفی پروژه Project Intro

• رابط کاربری ایجاد کننده رمز عبور Password Generator UI

• توابع تصادفی Random Functions

• ایجاد گذرواژه Generate Password

• کپی رمز عبور در کلیپ بورد Copy Password To Clipboard

روز 32 - چک باکس های خوب، ارزان، سریع Day 32 - Good, Cheap, Fast Checkboxes

• معرفی پروژه Project Intro

• چک باکس های سبک Style Checkboxes

• انیمیشن توپ را بررسی کنید Check Ball Animation

• منطق جاوا اسکریپت JavaScript Logic

روز 33 - برنامه یادداشت ها Day 33 - Notes App

• معرفی پروژه Project Intro

• یادداشت های HTML و CSS Notes HTML & CSS

• اضافه کردن یادداشت ها به DOM Adding Notes To The DOM

• یادداشت ها را در حافظه محلی ذخیره کنید Save Notes To Local Storage

روز سی و چهارم - شمارش معکوس متحرک Day 34 - Animated Countdown

• معرفی پروژه Project Intro

• بخش شمارنده و پایانی Counter & Final Sections

• انیمیشن های ورودی و خروجی In & Out Animations

• انیمیشن پویا با JS Dynamic Animation With JS

روز سی و پنجم - چرخ فلک تصویر Day 35 - Image Carousel

• معرفی پروژه Project Intro

• رابط کاربری چرخ فلک Carousel UI

• کارکرد چرخ فلک Carousel Functionality

روز 36 - هاوربرد Day 36 - Hoverboard

• معرفی پروژه Project Intro

• یک ظاهر طراحی شده مربع های تخته Styling The Board Squares

• افکت هاوربرد Hoverboard Effect

روز 37 - Pokedex Day 37 - Pokedex

• معرفی پروژه Project Intro

• Pokedex UI & Styling Pokedex UI & Styling

• واکشی اطلاعات پوکمون Fetching Pokemon Data

• ساخت کارت های پوکمون Creating The Pokemon Cards

روز 38 - پیمایش تب موبایل Day 38 - Mobile Tab Navigation

• معرفی پروژه Project Intro

• ایجاد و سبک رابط کاربری Create & Style UI

• اثر ناوبری Navigation Effect

روز 39 - پس زمینه قدرت رمز عبور Day 39 - Password Strength Background

• معرفی پروژه Project Intro

• ایجاد فرم و پس زمینه Creating The Form & Background

• تغییر Blur در ورودی Change Blur On Input

روز 40 - جعبه های پس زمینه سه بعدی Day 40 - 3D Background Boxes

• معرفی پروژه Project Intro

• ایجاد دکمه و جعبه Creating The Button & Boxes

• موقعیت پس‌زمینه و چرخش رویداد Background Position & Rotate Event

روز 41 - بررسی رابط کاربری حساب Day 41 - Verify Account UI

• معرفی پروژه Project Intro

• پروژه رابط کاربری حساب را تأیید کنید Verify Account UI Project

روز 42 - فیلتر کاربر زنده Day 42 - Live User Filter

• معرفی پروژه Project Intro

• رابط کاربری لیست کاربر User List UI

• واکشی و فیلتر کردن کاربران Fetch & Filter Users

روز 43 - طراحی رابط کاربری بازخورد Day 43 - Feedback UI Design

• معرفی پروژه Project Intro

• جعبه های بازخورد Feedback Boxes

• انتخاب و ارسال بازخورد Select & Submit Feedback

روز 44 - کشویی محدوده سفارشی Day 44 - Custom Range Slider

• معرفی پروژه Project Intro

• یک ظاهر طراحی شده به محدوده Styling The Range

• برچسب ارزش و حرکت Label Value & Movement

روز 45 - ناوبری نتفلیکس Day 45 - Netflix Navigation

• معرفی پروژه Project Intro

• Netflix Nav - قسمت 1 Netflix Nav - Part 1

• Netflix Nav - قسمت 2 Netflix Nav - Part 2

روز 46 - برنامه آزمون Day 46 - Quiz App

• معرفی پروژه Project Intro

• رابط کاربری آزمون Quiz UI

• عملکرد آزمون Quiz Functionality

روز 47 - تعویض جعبه گواهی Day 47 - Testimonial Box Switcher

• معرفی پروژه Project Intro

• ایجاد جعبه و نوار پیشرفت Create Box & Progress Bar

• سوئیچ گواهی Testimonial Switch

روز 48 - فید تصویر تصادفی Day 48 - Random Image Feed

• معرفی پروژه Project Intro

• پروژه خوراک تصویر تصادفی Random Image Feed Project

روز 49 - فهرست کارها Day 49 - Todo List

• معرفی پروژه Project Intro

• رابط کاربری فهرست کارها Todo List UI

• افزودن، حذف و علامت گذاری کامل Add, Remove & Mark Complete

• ذخیره Todos در Local Storage Saving Todos to Local Storage

روز 50 - بازی گرفتن حشرات Day 50 - Insect Catch Game

• معرفی پروژه Project Intro

• سبک بازی - قسمت 1 Game Styling - Part 1

• سبک بازی - قسمت 2 Game Styling - Part 2

• عملکرد بازی حشرات Insect Game Functionality