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

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

به دوره خوش آمدید Welcome to the Course

• خوش آمدی Welcome

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

• دیگ بخار شروع پروژه Project Starter Boilerplate

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• چرخش و افکت اسلاید Rotate and Slide Effect

• چرخش و افکت اسلاید Rotate and Slide Effect

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• افزودن افکت Hover Adding the Hover Effect

• افزودن افکت Hover Adding the Hover Effect

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

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

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

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

• استایل دادن به فرم Styling the Form

• استایل دادن به فرم Styling the Form

• اضافه کردن اثر موج Adding the Wave Effect

• اضافه کردن اثر موج Adding the Wave Effect

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

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

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

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

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

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

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

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

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

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

• جوک: HTML و CSS Jokes: HTML and CSS

• جوک: HTML و CSS Jokes: HTML and CSS

• کار با Fetch و HTTP Requests/Responses Working with Fetch and HTTP Requests/Responses

• کار با Fetch و HTTP Requests/Responses Working with Fetch and HTTP Requests/Responses

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

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

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

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

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

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

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

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

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

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

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

روز 12 - پرسش‌های متداول جمع‌آوری Day 12 – FAQ Collapse

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

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

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

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

• دکمه های جابجایی Toggle Buttons

• دکمه های جابجایی Toggle Buttons

روز 12 - پرسش‌های متداول جمع‌آوری Day 12 – FAQ Collapse

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

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

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

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

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

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

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

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

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

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

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

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

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

• استایل ناو Nav Styling

• استایل ناو Nav Styling

• استایل آیکون و تغییر فعال Icon Styling and Active Toggle

• استایل آیکون و تغییر فعال Icon Styling and Active Toggle

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

روز 15 - شمارشگر افزایشی Day 15 – Incrementing Counter

• معرفی Introduction

• معرفی Introduction

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

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

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

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

روز 15 - شمارشگر افزایشی Day 15 – Incrementing Counter

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

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

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

• جام ها را ایجاد و سبک کنید Create and Style The Cups

• جام ها را ایجاد و سبک کنید Create and Style The Cups

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

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

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

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

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

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

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

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

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

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

• واکشی داده ها از API Fetching Data from the API

• واکشی داده ها از API Fetching Data from the API

• افزودن فیلم به DOM Adding Movies to the DOM

• افزودن فیلم به DOM Adding Movies to the DOM

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

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

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

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

• HTML و CSS HTML and CSS

• HTML و CSS HTML and CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

روز 20 - جلوه امواج دکمه Day 20 – Button Ripple Effect

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

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

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

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

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

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

روز 20 - جلوه امواج دکمه Day 20 – Button Ripple Effect

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

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

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

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

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

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

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

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

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

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

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

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

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

• اشکال بوم Canvas Shapes

• اشکال بوم Canvas Shapes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• HTML کارت Card HTML

• HTML کارت Card HTML

• CSS کارت Card CSS

• CSS کارت Card CSS

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

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

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

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

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

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

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

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

• Navbar CSS و JS Navbar CSS and JS

• Navbar CSS و JS Navbar CSS and JS

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

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

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

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

• رابط کاربری اسلایدر عمودی Vertical Slider UI

• رابط کاربری اسلایدر عمودی Vertical Slider UI

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

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

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

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

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

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

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

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

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

روز 28 - نمایه های GitHub Day 28 – GitHub Profiles

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

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

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

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

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

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

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

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

• اضافه کردن ریپو به کارت Adding Repos to Card

• اضافه کردن ریپو به کارت Adding Repos to Card

روز 28 - نمایه های GitHub Day 28 – GitHub Profiles

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

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

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

• HTML و CSS HTML and CSS

• HTML و CSS HTML and CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• رمز عبور را در کلیپ بورد کپی کنید Copy Password to Clipboard

• رمز عبور را در کلیپ بورد کپی کنید Copy Password to Clipboard

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• یادداشت‌ها را در فضای ذخیره‌سازی محلی ذخیره کنید Save Notes to Local Storage

• یادداشت‌ها را در فضای ذخیره‌سازی محلی ذخیره کنید Save Notes to Local Storage

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• مدل دادن به مربع های تخته Styling the Board Squares

• مدل دادن به مربع های تخته Styling the Board Squares

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

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

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

روز 37 - Pokedex Day 37 – Pokedex

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

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

• Pokedex UI و Styling Pokedex UI and Styling

• Pokedex UI و Styling Pokedex UI and Styling

• واکشی داده های پوکامون Fetching Pokémon Data

• واکشی داده های پوکامون Fetching Pokémon Data

• ایجاد کارت های پوکامون Creating the Pokémon Cards

• ایجاد کارت های پوکامون Creating the Pokémon Cards

روز 37 - Pokedex Day 37 – Pokedex

روز 38 - ناوبری تب موبایل Day 38 – Mobile Tab Navigation

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

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

• ایجاد و استایل UI Create and Style UI

• ایجاد و استایل UI Create and Style UI

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

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

روز 38 - ناوبری تب موبایل Day 38 – Mobile Tab Navigation

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

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

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

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

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

• Blur را در ورودی تغییر دهید Change Blur on Input

• Blur را در ورودی تغییر دهید Change Blur on Input

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

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

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

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

• ایجاد دکمه و جعبه Creating the Button and Boxes

• ایجاد دکمه و جعبه Creating the Button and Boxes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

روز 44 - لغزنده محدوده سفارشی Day 44 – Custom Range Slider

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

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

• مدل دادن به محدوده Styling the Range

• مدل دادن به محدوده Styling the Range

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

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

روز 44 - لغزنده محدوده سفارشی Day 44 – Custom Range Slider

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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