آموزش ۶۰ پروژه HTML، CSS و JS - پیاده‌سازی با HTML5، CSS3 و جاوا اسکریپت خالص - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• کد منبع و دمو پروژه Source code and project demo

پروژه - ماشین حساب سن Project - Age Calculator

• پیش‌نمایش - ماشین حساب سن Preview - Age Calculator

• HTML - ماشین حساب سن HTML - Age Calculator

• CSS - ماشین حساب سن CSS - Age Calculator

• جاوااسکریپت - ماشین حساب سن JavaScript - Age Calculator

پروژه - ماشین حساب انعام Project - Tip Calculator

• پیش‌نمایش - ماشین حساب انعام Preview - Tip Calculator

• HTML - ماشین حساب انعام HTML - Tip Calculator

• CSS - ماشین حساب انعام CSS - Tip Calculator

• جاوااسکریپت - ماشین حساب انعام JavaScript - Tip Calculator

پروژه - اپلیکیشن کتاب دستور غذا Project- Recipe Book App

• پیش‌نمایش - اپلیکیشن کتاب دستور غذا Preview - Recipe Book App

• HTML - اپلیکیشن کتاب دستور غذا HTML - Recipe Book App

• CSS - اپلیکیشن کتاب دستور غذا CSS - Recipe Book App

• جاوااسکریپت - اپلیکیشن کتاب دستور غذا JavaScript - Recipe Book App

پروژه - شبیه‌ساز پرتاب تاس Project - Dice Roll Simulator

• پیش‌نمایش - شبیه‌ساز پرتاب تاس Preview - Dice Roll Simulator

• HTML - شبیه‌ساز پرتاب تاس HTML - Dice Roll Simulator

• CSS - شبیه‌ساز پرتاب تاس CSS - Dice Roll Simulator

• جاوااسکریپت - شبیه‌ساز پرتاب تاس JavaScript - Dice Roll Simulator

پروژه - تایمر پومودورو Project - Pomodoro Timer

• پیش‌نمایش - تایمر پومودورو Preview - Pomodoro Timer

• HTML - تایمر پومودورو HTML - Pomodoro Timer

• CSS - تایمر پومودورو CSS - Pomodoro Timer

• جاوااسکریپت - تایمر پومودورو JavaScript - Pomodoro Timer

پروژه - بازی سنگ کاغذ قیچی Project - Rock Paper Scissors Game

• پیش‌نمایش - بازی سنگ کاغذ قیچی Preview - Rock Paper Scissors Game

• HTML - بازی سنگ کاغذ قیچی HTML - Rock Paper Scissors Game

• CSS - بازی سنگ کاغذ قیچی CSS - Rock Paper Scissors Game

• جاوااسکریپت - بازی سنگ کاغذ قیچی JavaScript - Rock Paper Scissors Game

پروژه - کرونومتر Project - Stopwatch

• پیش‌نمایش - کرونومتر Preview - Stopwatch

• HTML - کرونومتر HTML - Stopwatch

• CSS - کرونومتر CSS - Stopwatch

• جاوااسکریپت - کرونومتر JavaScript - Stopwatch

پروژه - اپلیکیشن آب و هوا Project - Weather App

• پیش‌نمایش - اپلیکیشن آب و هوا Preview - Weather App

• HTML - اپلیکیشن آب و هوا HTML - Weather App

• CSS - اپلیکیشن آب و هوا CSS - Weather App

• جاوااسکریپت - اپلیکیشن آب و هوا JavaScript - Weather App

پروژه - اپلیکیشن جستجوی تصویر Project - Image Search App

• پیش‌نمایش - اپلیکیشن جستجوی تصویر Preview - Image Search App

• HTML - اپلیکیشن جستجوی تصویر HTML - Image Search App

• CSS - اپلیکیشن جستجوی تصویر CSS - Image Search App

• جاوااسکریپت - اپلیکیشن جستجوی تصویر Javascript - Image Search App

پروژه - ماشین حساب پایه Project - Basic Calculator

• پیش‌نمایش - ماشین حساب پایه Preview - Basic Calculator

• HTML - ماشین حساب پایه HTML - Basic Calculator

• CSS - ماشین حساب پایه CSS - Basic Calculator

• جاوااسکریپت - ماشین حساب پایه JavaScript - Basic Calculator

پروژه - مولد جوک‌های پدرانه Project - Dad Jokes Generator

• پیش‌نمایش - مولد جوک‌های پدرانه Preview - Dad Jokes Generator

• HTML - مولد جوک‌های پدرانه HTML - Dad Jokes Generator

• CSS - مولد جوک‌های پدرانه CSS - Dad Jokes Generator

• جاوااسکریپت - مولد جوک‌های پدرانه JavaScript - Dad Jokes Generator

پروژه - گالری عکس Project - Photo Gallery

• پیش‌نمایش - گالری عکس Preview - Photo Gallery

• HTML - گالری عکس HTML - Photo Gallery

• CSS - گالری عکس CSS - Photo Gallery

• جاوااسکریپت - گالری عکس JavaScript - Photo Gallery

پروژه - دیکشنری انگلیسی Project - English Dictionary

• پیش‌نمایش - دیکشنری انگلیسی Preview - English Dictionary

• HTML - دیکشنری انگلیسی HTML - English Dictionary

• CSS - دیکشنری انگلیسی CSS - English Dictionary

• جاوااسکریپت - دیکشنری انگلیسی JavaScript - English Dictionary

پروژه - مولد تصاویر انیمه Project - Anime Pics Generator

• پیش‌نمایش - مولد تصاویر انیمه Preview - Anime Pics Generator

• HTML - مولد تصاویر انیمه HTML - Anime Pics Generator

• CSS - مولد تصاویر انیمه CSS - Anime Pics Generator

• جاوااسکریپت - مولد تصاویر انیمه JavaScript - Anime Pics Generator

پروژه - اپلیکیشن یادداشت Project - Note App

• پیش‌نمایش - اپلیکیشن یادداشت Preview - Note App

• HTML - اپلیکیشن یادداشت HTML - Note App

• CSS - اپلیکیشن یادداشت CSS - Note App

• جاوااسکریپت - اپلیکیشن یادداشت JavaScript - Note App

پروژه - ماشین حساب BMI Project - BMI Calculator

• پیش‌نمایش - ماشین حساب BMI Preview - BMI Calculator

• HTML - ماشین حساب BMI HTML - BMI Calculator

• CSS - ماشین حساب BMI CSS - BMI Calculator

• جاوااسکریپت - ماشین حساب BMI JavaScript - BMI Calculator

پروژه - مولد نقل قول تصادفی Project - Random Quote Generator

• پیش‌نمایش - مولد نقل قول تصادفی Preview - Random Quote Generator

• HTML - مولد نقل قول تصادفی HTML - Random Quote Generator

• CSS - مولد نقل قول تصادفی CSS - Random Quote Generator

• جاوااسکریپت - مولد نقل قول تصادفی JavaScript - Random Quote Generator

پروژه - مبدل دما Project - Temperature Converter

• پیش‌نمایش - مبدل دما Preview - Temperature Converter

• HTML - مبدل دما HTML - Temperature Converter

• CSS - مبدل دما CSS - Temperature Converter

• جاوااسکریپت - مبدل دما JavaScript - Temperature Converter

پروژه - مبدل ارز Project - Currency Converter

• پیش‌نمایش - مبدل ارز Preview - Currency Converter

• HTML - مبدل ارز HTML - Currency Converter

• CSS - مبدل ارز CSS - Currency Converter

• جاوااسکریپت - مبدل ارز JavaScript - Currency Converter

پروژه - ماشین حساب وام Project - Loan Calculator

• پیش‌نمایش - ماشین حساب وام Preview - Loan Calculator

• HTML - ماشین حساب وام HTML - Loan Calculator

• CSS - ماشین حساب وام CSS - Loan Calculator

• جاوااسکریپت - ماشین حساب وام JavaScript - Loan Calculator

پروژه - ایموجی تصادفی Project - Random Emoji

• پیش‌نمایش - ایموجی تصادفی Preview - Random Emoji

• HTML - ایموجی تصادفی HTML - Random Emoji

• CSS - ایموجی تصادفی CSS - Random Emoji

• جاوااسکریپت - ایموجی تصادفی JavaScript - Random Emoji

پروژه - مبدل وزن Project - Weight Converter

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - رابط کاربری بازخورد Project - Feedback UI

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - افکت موج دکمه Project - Button Ripple Effect

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - ساعت دیجیتال Project - Digital Clock

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - گالری تصاویر چرخشی Project - Rotating Image Gallery

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - مولد رنگ تصادفی Project - Random Color Generator

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - شمارنده کاراکتر بلادرنگ Project - Real-time Character Counter

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - آمار پروفایل Project - Profile Statistics

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - انیمیشن دنباله قلب Project - Heart Trail Animation

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - تقویم کوچک Project - Mini Calendar

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - نوار جستجوی متحرک Project - Animated Search Bar

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - منوی انتخابگر شبکه‌های اجتماعی Project - Social Media Selector Menu

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - مولد رمز عبور تصادفی Project - Random Password Generator

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - اسلایدر بازخوردها Project - Testimonial Slider

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - شمارش معکوس سال نو Project - New Year Countdown

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - امتیازدهی ایموجی Project - Emoji Rating

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - نوار ناوبری چسبان Project - Sticky Navbar

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - صفحه فرود دوتایی Project - Double Landing Page

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - انیمیشن افکت متن خودکار Project - Auto Text Effect Animation

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - افکت اسکرول تصویر پس‌زمینه Project - Background Image Scroll Effect

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - پاپ‌آپ با پس‌زمینه محو Project - Blurred Background Popup

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - تغییر حالت تاریک Project - Dark Mode Toggle

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - کیت‌های درام Project - Drum Kits

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - لیست کارها Project - To Do List

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - عکس‌های تصادفی Project - Random Photos

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - اپلیکیشن ضرب Project - Multiplication App

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - نوار پیشرفت گام به گام Project - Step Progress Bar

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - رویداد ماوس Project - Mouse Event

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - نوار بارگذاری Project - Loading Bar

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - اسلایدر تصاویر Project - Image Slider

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - پاپ‌آپ تریلر ویدئو Project - Video Trailer Popup

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - اپلیکیشن کتاب دستور غذا Project - Recipe Book App

• پیش‌نمایش Preview

• CSS CSS

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

پروژه - مولد تصاویر انیمه Project - Anime Pics Generator

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - ساعت Project - Clock

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - تقویم ماهانه Project - Month calendar

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

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

پروژه - شمارنده Project - Counter

• پیش‌نمایش Preview

• HTML HTML

• CSS CSS

• بوت‌استرپ - شمارنده Bootstrap - Counter

• فونت آسِم - شمارنده Font Awesome - Counter

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

• متد addEventListener - شمارنده addEventListiner Method - Counter

• افزودن رنگ به عدد - شمارنده Adding Color to the Number - Counter

پروژه - بخش پرسش و پاسخ Project - Q&A Section

• پیش‌نمایش - بخش پرسش و پاسخ Preveiw - Q&A Section

• شروع HTML وبسایت - بخش پرسش و پاسخ Start the HTML of the website - Q&A Section

• استفاده از Font Awesome برای افزودن آیکون‌های مثبت و منفی به وبسایت ما - بخش پرسش و پاسخ Using Font Awesome for adding plus and minus icons to our website - Q&A Section

• استفاده از CSS برای استایل‌دهی عنوان، دکمه و پاسخ - بخش پرسش و پاسخ Using CSS to style the title, buttom and the answere - Q&A Section

• شروع استفاده از جاوااسکریپت برای جابجایی بین کلاس‌ها - بخش پرسش و پاسخ Start using JavaScript for toggling between classes - Q&A Section

پروژه - زبانه‌ها Project - Tabs

• پیش‌نمایش - بخش زبانه‌ها Preview - Tabs Section

• تکمیل بخش HTML - زبانه‌ها Completing the HTML part - Tabs

• استایل‌دهی وبسایت با استفاده از CSS - زبانه‌ها Styling the website using CSS - Tabs

• افزودن قابلیت به وبسایت با استفاده از جاوااسکریپت - زبانه‌ها Add functionality to the website using JavaScript - Tabs

پروژه - ویدئو پس‌زمینه Project - Background Video

• پیش‌نمایش - ویدئو پس‌زمینه Preview - Background Video

• شروع پروژه (HTML) - ویدئو پس‌زمینه Start the project (HTML) - Background Video

• استایل‌دهی CSS، بوت‌استرپ و فونت آسِم - ویدئو پس‌زمینه CSS styling, Bootstrap and Font Awesome - Background Video

• افزودن قابلیت با استفاده از جاوااسکریپت - ویدئو پس‌زمینه Adding functionality using Javascript - Background Video

• افزودن یک پیش‌بارگذار - ویدئو پس‌زمینه Adding a Preloader - Background Video

پروژه - منوی نوار کناری Project - Sidebar Menu

• پیش‌نمایش - منوی نوار کناری Preveiw - Sidebar Menu

• ایجاد لوگوی وبسایت - منوی نوار کناری Creating the logo of the website - Sidebar Menu

• افزودن لوگو و منو به وبسایت ما با استفاده از HTML Adding the logo and menu to our website using HTML

• استایل‌دهی منو با استفاده از CSS و افزودن نوار کناری Styling the menu using CSS and adding the sidebar

• استفاده از Font Awesome برای افزودن دکمه بستن و آیکون‌های نوارها Using Font Awesome to add closing button and bars icons

• استایل‌دهی دکمه‌های بستن و نوارها با استفاده از CSS Styling the closing and bars buttons using CSS

• استفاده از جاوااسکریپت برای افزودن و حذف نوار کناری Using JavaScript to add and remove the sidebar

پروژه - منوی نوار ناوبری Project - Navbar menu

• پیش‌نمایش - منوی نوار ناوبری Preview - Navbar Menu

• ایجاد لوگوی وبسایت Creating the logo of the website

• ایجاد منو با استفاده از HTML Create the menu using HTML

• یادگیری نحوه استفاده از Font Awesome Learning how to use Font Awesome

• شروع استایل‌دهی وبسایت ما با استفاده از CSS Start Styling our website using CSS

• استایل‌دهی نوارها Styling the bars

• استایل‌دهی منو Styling the menu

• افزودن و حذف کلاس‌ها با استفاده از جاوااسکریپت Add and remove classes using JavaScript