آموزش پروژه‌های وب با جاوا اسکریپت: ۲۰ پروژه برای ساخت رزومه شما - آخرین آپدیت

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

مقدمه Introduction

• سرفصل دوره Course Outline

• به کلاس آنلاین ما بپیوندید! Join Our Online Classroom!

• تمرین: با همکلاسی ها و مدرس خود آشنا شوید Exercise: Meet Your Classmates and Instructor

• هدف جاوا اسکریپت The Purpose Of JavaScript

• چگونه بیشترین بهره را از دوره ببرید How To Get The Most Out Of The Course

• منابع ZTM ZTM Resources

آماده سازی توسعه دهنده Developer Setup

• آماده سازی برای دوره Setting Up For The Course

• اختیاری: آماده سازی مک/لینوکس OPTIONAL: MAC/LINUX Setup

• اختیاری: آماده سازی ویندوز OPTIONAL: WINDOWS Setup

• آماده سازی Visual Studio Code و قالب‌های ما Our Visual Studio Code Setup + Templates

• ابزارهای توسعه دهنده + GitHub Pages Developer Tools + Github Pages

• Desarrollador Web Mensual Web Developer Monthly

• منبع جایزه: برگه تقلب جاوا اسکریپت پیشرفته Bonus resource: Advanced JavaScript Cheatsheet

• چالش‌های کدنویسی ماهانه، منابع و راهنماهای رایگان Monthly Coding Challenges, Free Resources and Guides

مولد نقل قول Quote Generator

• مرور کلی پروژه مولد نقل قول Quote Generator Project Overview

• آماده سازی پروژه ما Setting Up Our Project

• سبک دهی و عناصر HTML Styling and HTML Elements

• ایجاد دکمه‌های زیبا Creating Beautiful Buttons

• به روز رسانی API Update to API

• جدید: دریافت داده با جاوا اسکریپت [NEW] Fetching Data With JavaScript

• گزینه های مختلف برای API Different Option for API

• جدید: دستکاری DOM با جاوا اسکریپت [NEW] Manipulating DOM With JavaScript

• جدید: ایجاد بارگذار با جاوا اسکریپت [NEW] Creating A Loader With JavaScript

• اشتراک گذاری پروژه هایتان Sharing Your Projects

• نکته سریع: ویدیوهای آینده Quick Note: Upcoming Videos

• اختیاری: دریافت داده با جاوا اسکریپت [OPTIONAL] Fetching Data With JavaScript

• اختیاری: خطای 429 [OPTIONAL] 429 Error

• اختیاری: سرور پروکسی خود را بسازید [OPTIONAL] Build Your Own Proxy Server

• اختیاری: دستکاری DOM با جاوا اسکریپت [OPTIONAL] Manipulating DOM With JavaScript

• اختیاری: ایجاد بارگذار با جاوا اسکریپت [OPTIONAL] Creating A Loader With JavaScript

• بازبینی کد Code Review

• دستکاری DOM Manipulating The DOM

اسکرول بی نهایت Infinity Scroll

• مرور کلی پروژه اسکرول بی نهایت Infinity Scroll Project Overview

• SVG بارگذار Loader SVG

• مرکز کردن عناصر در صفحه Centering Elements On The Page

• چیدمان پاسخگو Responsive Layout

• دریافت داده Fetching Data

• جاوا اسکریپت برای نمایش داده ها JavaScript To Display Data

• اسکرول بی نهایت با جاوا اسکریپت Infinite Scroll With JavaScript

• اسکرول بی نهایت با جاوا اسکریپت 2 Infinite Scroll With JavaScript 2

• بازبینی کد Code Review

• تمرین‌ها: پاکسازی کد Exercises: Cleaning Up The Code

تصویر در تصویر Picture In Picture

• مرور کلی پروژه تصویر در تصویر Picture In Picture Project Overview

• آماده سازی پروژه ما Setting Up Our Project

• سبک دهی و عناصر HTML Styling and HTML Elements

• افزودن قابلیت با جاوا اسکریپت Adding Functionality With JavaScript

• بازبینی کد Code Review

• تاییدیه در لینکدین Endorsements On LinkedIN

جوک گو Joke Teller

• مرور کلی پروژه جوک گو Joke Teller Project Overview

• سبک دهی و عناصر HTML Styling and HTML Elements

• چیدمان پاسخگو و سبک دهی Responsive Layout and Styling

• سلب مسئولیت RapidAPI RapidAPI Disclaimer

• جاوا اسکریپت در پروژه JavaScript In The Project

• جاوا اسکریپت در پروژه 2 JavaScript In The Project 2

• جاوا اسکریپت در پروژه 3 JavaScript In The Project 3

• اتمام پروژه Finishing Up The Project

• بازبینی کد Code Review

حالت روشن و تاریک Light & Dark Mode

• مرور کلی پروژه حالت روشن و تاریک Light Dark Mode Project Overview

• آماده سازی HTML و CSS HTML and CSS Setup

• محتوا در پروژه ما Content In Our Project

• تغییر تم با جاوا اسکریپت Toggle Theme With JavaScript

• تغییر تم با جاوا اسکریپت 2 Toggle Theme With JavaScript 2

• LocalStorage برای ذخیره داده های کاربر LocalStorage To Save User Data

• بازبینی کد Code Review

• تمرین: سندرم ایمپاستر Exercise: Imposter Syndrome

• تمرین: خواناتر کردن کد Exercise: Making Code More Readable

قالب انیمیشنی Animated Template

• مرور کلی پروژه قالب انیمیشنی Animated Template Project Overview

• آماده سازی قالب ما Setting Up Our Template

• آماده سازی محتوای ما Setting Up Our Content

• جاوا اسکریپت درون HTML JavaScript Inside of HTML

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

• بازبینی کد Code Review

ملت ناوبری Navigation Nation

• مرور کلی پروژه ملت ناوبری Navigation Nation Project Overview

• آماده سازی HTML و CSS ما Setting Up Our HTML and CSS

• رابط ناوبری Navigation UI

• انیمیشن منو با جاوا اسکریپت Animating Menu With JavaScript

• انیمیشن‌های CSS Animations CSS

• پاکسازی جاوا اسکریپت ما Cleaning Up Our JavaScript

• بازبینی کد Code Review

پخش کننده موسیقی Music Player

• مرور کلی پروژه پخش کننده موسیقی Music Player Project Overview

• آماده سازی HTML و CSS ما Setting Up Our HTML and CSS

• کدنویسی رابط پاسخگوی ما Coding Our Responsive UI

• جاوا اسکریپت برای پخش صدا JavaScript To Play Audio

• پخش کننده موسیقی با جاوا اسکریپت Music Player With JavaScript

• نوار پیشرفت Progress Bar

• نوار پیشرفت 2 Progress Bar 2

• نوار پیشرفت 3 Progress Bar 3

• بازبینی کد Code Review

شمارش معکوس سفارشی Custom Countdown

• مرور کلی پروژه شمارش معکوس سفارشی Custom Countdown Project Overview

• پس زمینه ویدیو Video Background

• ساخت اجزای رابط کاربری ما Building Our UI Components

• ساخت اجزای رابط کاربری ما 2 Building Our UI Components 2

• تاریخ های جاوا اسکریپت JavaScript Dates

• مقادیر فرم Form Values

• پر کردن رابط شمارش معکوس Populate Countdown UI

• setInterval و clearInterval setInterval And clearInterval

• اتمام رابط کاربری Finishing Up The UI

• کش کردن با LocalStorage Caching With LocalStorage

• بازبینی کد Code Review

کتابدار Book Keeper

• مرور کلی پروژه کتابدار Book Keeper Project Overview

• ساخت رابط کاربری ما Building Our UI

• ساخت رابط کاربری ما 2 Building Our UI 2

• ساخت مودال ما Building Our Modal

• مودال ها با جاوا اسکریپت Modals With JavaScript

• مشکل افزودن URL Appending URL Issue

• اعتبارسنجی فرم Form Validation

• localStorage و Fetch localStorage And Fetch

• ساخت نشانک‌ها Building The Bookmarks

• حذف نشانک‌ها Deleting The Bookmarks

• بازبینی کد Code Review

پخش کننده ویدیو Video Player

• مرور کلی پروژه پخش کننده ویدیو Video Player Project Overview

• منبع ویدیو به روز شد Video Source Updated

• ساخت UI - پخش کننده، ویدیو، سازگاری با موبایل Build UI - Player, Video, Mobile Responsive

• ساخت UI - کنترل ها HTML، نمایش کنترل ها هنگام هاور Build UI - Controls HTML, Show Controls on Hover

• ساخت UI - نوار پیشرفت: عرض، هاور Build UI - Progress Bar: Width, Hover

• ساخت UI - انتخاب، نمایش متغیرهای CSS Build UI - Selection, Show CSS Variables

• JS - پخش/مکث ویدیو JS - Video Play/Pause

• JS - نوار پیشرفت (عرض پویا) JS - Progress Bar (Dynamic Width)

• JS - پر کردن زمان فعلی / مدت زمان JS - Populate Current Time / Duration

• JS - نوار پیشرفت (جستجو) JS - Progress Bar (Seek)

• JS - صدا (اسلایدر) JS - Volume (Slider)

• JS - صدا (بی صدا/فعال کردن صدا) JS - Volume (Mute/Unmute)

• JS - سرعت پخش JS - Playback Seed

• JS - تمام صفحه JS - Fullscreen

• بازبینی کد Code Review

اعتبارسنج فرم Form Validator

• مرور کلی پروژه اعتبارسنج فرم Form Validator Project Overview

• ساخت UI - فرم های HTML، ورودی، برچسب ها Build UI - HTML Forms, Input, Labels

• ساخت UI - CSS (بدنه، کانتینر)، فونت های گوگل Build UI - CSS (Body, Container), Google Fonts

• ساخت UI - CSS فرم Build UI - Form CSS

• اعتبارسنجی فرم HTML HTML Form Validation

• JS - اعتبارسنجی فرم JS - Validate Form

• JS - اعتبارسنجی رمزهای عبور، ذخیره داده ها JS - Validate Passwords, Store Data

• بازبینی کد Code Review

• نحوه ذخیره رمز عبور کاربر How to Store User Passwords

بازی سنگ کاغذ قیچی سوسمار Spock Rock Game

• مرور کلی پروژه بازی سنگ کاغذ قیچی سوسمار Spock Rock Project Overview

• ساخت UI - کانتینرهای بازیکن، FontAwesome Build UI - Player Containers, FontAwesome

• ساخت UI - CSS، فونت های گوگل Build UI - CSS, Google Fonts

• JS - راه اندازی، انتخاب بازیکن JS - Setup, Player Selection

• JS - انتخاب کامپیوتر JS - Computer Selection

• JS - بررسی نتایج JS - Check Results

• JS - بازنشانی همه JS - Reset All

• JS - عملکرد کنفتی JS - Confetti Functionality

• JS - بازسازی ماژول JS - Module Refactoring

• بازبینی کد Code Review

NASA APOD NASA APOD

• مرور کلی پروژه NASA APOD NASA APOD Project Overview

• دارایی - انیمیشن بارگذاری سفارشی Asset - Custom Loading Animation

• ساخت UI - ناوبری Build UI - Navigation

• ساخت UI - کارت با تصویر Build UI - Card with Image

• JS - مستندات API ناسا/Fetch JS - NASA API Documentation/Fetch

• JS - ایجاد عناصر DOM JS - Create DOM Elements

• JS - ذخیره موارد دلخواه JS - Save Favourites

• JS - عناصر DOM موارد دلخواه JS - Favorites DOM Elements

• JS - حذف موارد دلخواه JS - Delete Favorites

• JS - ناوبری، بارگذار JS - Navigation, Loader

• بازبینی کد Code Review

• اختیاری: اعلانی در مقابل دستوری Optional: Declarative vs Imperative

بازی ریاضی مسابقه Math Sprint Game

• مرور کلی پروژه بازی ریاضی مسابقه Math Sprint Game Project Overview

• ساخت UI - صفحه پرش، شمارش معکوس Build UI - Splash Page, Countdown

• ساخت UI - صفحه بازی، صفحه امتیاز Build UI - Game Page, Score Page

• JS - انتخاب و عملکرد رادیو JS - Radio Selection & Functionality

• JS - صفحه شمارش معکوس JS - Countdown Page

• JS - تولید معادلات تصادفی JS - Generate Random Equations

• JS - معادلات به DOM JS - Equations to DOM

• JS - اسکرول خودکار و ورودی بازیکن JS - Automatic Scrolling & Player Input

• JS - بررسی امتیاز با رویدادهای زمان بندی JS - Check Score with Timing Events

• JS - صفحه امتیاز JS - Score Page

• JS - بهترین امتیازات در Local Storage JS - Best Scores in Local Storage

• بازبینی کد Code Review

کشیدن و رها کردن Drag n' Drop

• مرور کلی پروژه کشیدن و رها کردن Drag n' Drop Project Overview

• ساخت UI - Flexbox، نوار پیمایش سفارشی Build UI - Flexbox, Custom Scrollbar

• JS - localStorage JS - localStorage

• JS - به روز رسانی DOM JS - Update DOM

• JS - API کشیدن و رها کردن JS - Drag and Drop API

• JS - بازسازی آرایه ها JS - Rebuild Arrays

• JS - افزودن آیتم JS - Add Item

• JS - حذف آیتم JS - Delete Item

• JS - به روز رسانی آیتم JS - Update Item

• بازبینی کد Code Review

ماشین حساب Calculator

• مرور کلی پروژه ماشین حساب Calculator Project Overview

• ساخت UI - ماشین حساب، نمایشگر، دکمه ها Build UI - Calculator, Display, Buttons

• ساخت UI - CSS نمایشگر Build UI - Display CSS

• ساخت UI - CSS گرید Build UI - CSS Grid

• ساخت UI - CSS دکمه Build UI - Button CSS

• JS - افزودن شنوندگان رویداد JS - Adding Event Listeners

• JS - بازنشانی مقدار، افزودن اعشار JS - Reset Value, Add Decimal

• JS - عملکرد اپراتور JS - Operator Functionality

• JS - محاسبه JS - Calculation

• بازبینی کد Code Review

صفحه پرش Splash Page

• مرور کلی پروژه صفحه پرش Splash Page Project Overview

• راه اندازی اولیه - Figma Initial Setup - Figma

• ساخت UI - افزودن دارایی های تصویر Build UI - Adding Image Assets

• ساخت UI - سبک دهی دارایی های تصویر Build UI - Styling Image Assets

• ساخت UI - افزودن پس زمینه های سفارشی Build UI - Adding Custom Backgrounds

• JS - کنترل های پس زمینه JS - Background Controls

• بازبینی کد Code Review

• تمرین: نشت حافظه و تصاویر حافظه (Heap Snapshots) Exercise: Memory Leaks And Heap Snapshots

کلون نقاشی Paint Clone

• مرور کلی پروژه کلون نقاشی Paint Clone Project Overview

• ساخت UI - اسلایدر سفارشی، JSColor، پیام موبایل Build UI - Custom Slider, JSColor, Mobile Message

• JS - راه اندازی Canvas JS - Canvas Setup

• JS - ورودی های رنگ/محدوده JS - Color/Range Inputs

• JS - نقاشی روی Canvas JS - Drawing on Canvas

• JS - ذخیره داده های نقاشی JS - Store Drawing Data

• JS - localStorage و دانلود یک تصویر JS - localStorage & Downloading an Image

• بازبینی کد Code Review

پونگ Pong

• مرور کلی پروژه پونگ Pong Project Overview

• JS - ایجاد Canvas JS - Create Canvas

• JS - RequestAnimationFrame JS - RequestAnimationFrame

• JS - بازی تمام شد JS - Game Over

• بازبینی کد Code Review

از اینجا به کجا برویم؟ Where To Go From Here?

• اشتراک گذاری پروژه هایتان Sharing Your Projects

• جاوا اسکریپت و فراتر از آن JavaScript And Beyond

• متشکریم! Thank You!

• راهنمای یادگیری Learning Guideline

• تاییدیه های لینکدین LinkedIn Endorsements

• دانش آموخته شوید Become An Alumni

• چالش های کدنویسی Coding Challenges

• بازبینی دوره Course Review

• چالش نهایی The Final Challenge

ضمیمه: جاوا اسکریپت چگونه کار می کند Appendix: How JavaScript Works

• موتور جاوا اسکریپت JavaScript Engine

• تمرین: موتور جاوا اسکریپت Exercise: Javascript Engine

• درون موتور Inside the Engine

• تمرین: موتور JS برای همه Exercise: JS Engine For All

• مفسرها و کامپایلرها Interpreters and Compilers

• درون موتور V8 Inside the V8 Engine

• مقایسه زبان های دیگر Comparing Other Languages

• نوشتن کد بهینه Writing Optimized Code

• WebAssembly WebAssembly

• پشته تماس و توده حافظه Call Stack and Memory Heap

• سرریز پشته Stack Overflow

• جمع آوری زباله Garbage Collection

• نشت حافظه Memory Leaks

• تک رشته ای Single Threaded

• تمرین: مشکل با تک رشته ای Exercise: Issue With Single Thread

• محیط اجرای جاوا اسکریپت Javascript Runtime

• Node.js Node.js

ضمیمه: Git، Github، Open Source و ساخت پورتفولیو Appendix: Git, Github, Open Source and Building a Portfolio

• Git + Github بخش 1 Git + Github Part 1

• به روز رسانی Github: Master --> Main Github Update: Master --> Main

• Git + Github بخش 2 Git + Github Part 2

• مشارکت در متن باز Contributing To Open Source

• مشارکت در متن باز 2 Contributing To Open Source 2

• تمرین: در متن باز مشارکت کنید Exercise: Contribute To Open Source

• نصب Node Installing Node

• ایجاد یک پورتفولیو Create A Portfolio

ضمیمه: مشکلات CORS Appendix: CORS Issues

• حل مشکلات CORS با سرور Heroku Solving CORS Issues With Heroku Server

بخش جایزه BONUS SECTION

• درس جایزه ویژه Special Bonus Lecture