HTML-CSS-JavaScript 100 Projects | پروژه‌های HTML-CSS-JavaScript

A collection of 100 web development projects to help you master HTML, CSS, and JavaScript. مجموعه‌ای از ۱۰۰ پروژه توسعه وب برای تسلط بر HTML، CSS و JavaScript

Technology Summary | خلاصه فناوری‌ها

HTML/CSS Only Projects | پروژه‌های HTML/CSS

These projects focus on pure HTML and CSS implementations: این پروژه‌ها بر پیاده‌سازی خالص HTML و CSS تمرکز دارند:

• Creative Loading Animation
• Custom Scrollbar
• Creative Image Hover Effect
• Top 5 Creative Buttons
• Creative Menus
• Creative Image Effect
• Creative Cards
• Tooltip
• Accordion
• Scrollbar
• Image Background Text
• Full Screen Navigation
• 3D Navigation
• Expanding Cards
• Tabs
• Accordions
• Sticky Navbar
• Rounded Navbar
• CSS Clip Path Animation
• Custom Cursor
• Sidebar Animation
• Tabed Navigation
• Construction Landing Page
• Foody Landing Page
• Coffee
• The Art
• Hoodie
• Chairs

HTML/CSS/JavaScript Projects | پروژه‌های HTML/CSS/JavaScript

These projects incorporate JavaScript for enhanced functionality: این پروژه‌ها از JavaScript برای عملکرد پیشرفته استفاده می‌کنند:

• Background Video
• Page Scroll Indicator
• Heart
• Background Color Changer
• Auto Text
• Cursor
• Video Trailer Popup
• Color Toggler
• Animated Navigation
• Random Emojies
• Fade Out
• Simple Calculator
• Copy and Move
• Progress Steps
• Popup Form
• Lazy Loading
• Show Hide Password
• Select Menu
• Form Wave
• Counter
• Text Formatter
• Image Gallery
• Read More and Read Less
• KeyCode
• Random Images Feed
• Random Quote
• Email Validation
• Interchangeable Background Color
• Digital Clock
• Browse File Upload
• Search and Highlight
• Custom Range Slider
• Feedback
• Eye Follow
• Mini Calendar
• Two Sides Scroll
• Followers
• Rotating Text
• Background Image Carousel
• Modern Calculator
• Rotating Image Gallery
• Password Strength Background
• Gradient Generator
• Two Sided Form
• Animated Search Bar
• Password Generator
• Box Shadow Generator
• Decimal To Binary Converter
• Captcha Project
• Drag n Drop
• Update CSS Variables
• Light
• Todo List
• Chuck Norris
• Random Cat Images
• Dad Jokes
• Testimonial Box Switcher
• Live User Filter
• Animated Images Website
• Emoji Catcher Game
• Twitter Follow Component
• BookList Project
• Timer
• Typing Game
• Shape Clicker Game
• World Counter
• Random User
• Form Validation
• Meal Finder
• Wikipedia Clone

Project Categories | دسته‌بندی پروژه‌ها

UI Components | کامپوننت‌های رابط کاربری

1. Background Video - Full-screen background video with overlay (HTML/CSS/JS)
2. Creative Loading Animation - Animated loading dots (HTML/CSS)
3. Custom Scrollbar - Beautiful custom scrollbar with gradients (HTML/CSS)
4. Creative Image Hover Effect - Image hover effects with clip-paths (HTML/CSS)
5. Top 5 Creative Buttons - Collection of animated buttons (HTML/CSS)
6. Creative Menus - Animated menu designs (HTML/CSS)
7. Creative Image Effect - Various image effects (HTML/CSS)
8. Creative Cards - Animated card designs (HTML/CSS)
9. Tooltip - Custom tooltip with animations (HTML/CSS)
10. Accordion - Animated accordion component (HTML/CSS)
11. Scrollbar - Custom scrollbar implementation (HTML/CSS)
12. Image Background Text - Text with image background (HTML/CSS)
13. Page Scroll Indicator - Scroll progress indicator (HTML/CSS/JS)
14. Heart - Interactive heart animation (HTML/CSS/JS)
15. Background Color Changer - Random color generator (HTML/CSS/JS)

Interactive Elements | عناصر تعاملی

16. Auto Text - Auto-typing text effect (HTML/CSS/JS)
17. Cursor - Custom cursor effects (HTML/CSS/JS)
18. Video Trailer Popup - Video popup implementation (HTML/CSS/JS)
19. Color Toggler - Color theme switcher (HTML/CSS/JS)
20. Animated Navigation - Animated navigation menu (HTML/CSS/JS)
21. Random Emojies - Random emoji generator (HTML/CSS/JS)
22. Fade Out - Fade out animation (HTML/CSS/JS)
23. Simple Calculator - Basic calculator (HTML/CSS/JS)
24. Copy and Move - Copy and move functionality (HTML/CSS/JS)
25. Progress Steps - Step progress indicator (HTML/CSS/JS)

Forms and Inputs | فرم‌ها و ورودی‌ها

26. Popup Form - Modal form implementation (HTML/CSS/JS)
27. Lazy Loading - Image lazy loading (HTML/CSS/JS)
28. Show Hide Password - Password visibility toggle (HTML/CSS/JS)
29. Select Menu - Custom select dropdown (HTML/CSS/JS)
30. Form Wave - Animated form inputs (HTML/CSS/JS)

Navigation and Layout | ناوبری و چیدمان

31. Full Screen Navigation - Full-screen menu (HTML/CSS)
32. 3D Navigation - 3D navigation menu (HTML/CSS)
33. Counter - Animated counter (HTML/CSS/JS)
34. Text Formatter - Text formatting tool (HTML/CSS/JS)
35. Image Gallery - Image gallery with effects (HTML/CSS/JS)

Content Display | نمایش محتوا

36. Read More and Read Less - Expandable content (HTML/CSS/JS)
37. Expanding Cards - Interactive cards (HTML/CSS)
38. KeyCode - Key code display (HTML/CSS/JS)
39. Tabs - Tabbed interface (HTML/CSS)
40. Accordions - Multiple accordion implementation (HTML/CSS)

Data and API | داده و API

41. Random Images Feed - Random image display (HTML/CSS/JS)
42. Random Quote - Quote generator (HTML/CSS/JS)
43. Email Validation - Email validation (HTML/CSS/JS)
44. Interchangeable Background Color - Background color switcher (HTML/CSS/JS)
45. Digital Clock - Digital clock implementation (HTML/CSS/JS)

File and Media | فایل و رسانه

46. Browse File Upload - File upload interface (HTML/CSS/JS)
47. Sticky Navbar - Sticky navigation (HTML/CSS)
48. Search and Highlight - Text search and highlight (HTML/CSS/JS)
49. Custom Range Slider - Custom slider component (HTML/CSS/JS)
50. Feedback - Feedback form (HTML/CSS/JS)

Games and Interactive | بازی‌ها و تعامل

51. Eye Follow - Eye following cursor (HTML/CSS/JS)
52. Rounded Navbar - Rounded navigation (HTML/CSS)
53. CSS Clip Path Animation - Clip path animations (HTML/CSS)
54. Mini Calendar - Calendar component (HTML/CSS/JS)
55. Two Sides Scroll - Dual scroll implementation (HTML/CSS/JS)

Social and User Interface | رابط کاربری و شبکه‌های اجتماعی

56. Followers - Follower counter (HTML/CSS/JS)
57. Custom Cursor - Custom cursor design (HTML/CSS)
58. Rotating Text - Text rotation effect (HTML/CSS/JS)
59. Background Image Carousel - Image carousel (HTML/CSS/JS)
60. Modern Calculator - Modern calculator design (HTML/CSS/JS)

Advanced UI | رابط کاربری پیشرفته

61. Sidebar Animation - Animated sidebar (HTML/CSS)
62. Rotating Image Gallery - 3D image gallery (HTML/CSS/JS)
63. Password Strength Background - Password strength indicator (HTML/CSS/JS)
64. Gradient Generator - CSS gradient generator (HTML/CSS/JS)
65. Two Sided Form - Dual-sided form (HTML/CSS/JS)

Tools and Utilities | ابزارها و برنامه‌های کمکی

66. Animated Search Bar - Animated search (HTML/CSS/JS)
67. Password Generator - Password generator (HTML/CSS/JS)
68. Box Shadow Generator - Box shadow tool (HTML/CSS/JS)
69. Decimal To Binary Converter - Number converter (HTML/CSS/JS)
70. Captcha Project - CAPTCHA implementation (HTML/CSS/JS)

Interactive Features | ویژگی‌های تعاملی

71. Drag n Drop - Drag and drop interface (HTML/CSS/JS)
72. Update CSS Variables - CSS variable updater (HTML/CSS/JS)
73. Light - Light effect (HTML/CSS/JS)
74. Tabed Navigation - Tab navigation (HTML/CSS)
75. Todo List - Todo application (HTML/CSS/JS)

API Integration | یکپارچه‌سازی API

76. Chuck Norris - Chuck Norris jokes API (HTML/CSS/JS)
77. Random Cat Images - Cat image API (HTML/CSS/JS)
78. Dad Jokes - Dad jokes API (HTML/CSS/JS)
79. Testimonial Box Switcher - Testimonial slider (HTML/CSS/JS)
80. Live User Filter - User filter (HTML/CSS/JS)

Advanced Projects | پروژه‌های پیشرفته

81. Animated Images Website - Image animation site (HTML/CSS/JS)
82. Emoji Catcher Game - Emoji game (HTML/CSS/JS)
83. Twitter Follow Component - Twitter follow button (HTML/CSS/JS)
84. BookList Project - Book list application (HTML/CSS/JS)
85. Timer - Timer application (HTML/CSS/JS)

Games and Applications | بازی‌ها و برنامه‌ها

86. Typing Game - Typing speed game (HTML/CSS/JS)
87. Shape Clicker Game - Shape clicking game (HTML/CSS/JS)
88. World Counter - Word counter (HTML/CSS/JS)
89. Random User - Random user generator (HTML/CSS/JS)
90. Construction Landing Page - Construction site template (HTML/CSS)

Landing Pages | صفحات فرود

91. Foody Landing Page - Food website template (HTML/CSS)
92. Coffee - Coffee shop template (HTML/CSS)
93. The Art - Art gallery template (HTML/CSS)
94. Hoodie - Clothing store template (HTML/CSS)
95. Chairs - Furniture store template (HTML/CSS)

Advanced Templates | قالب‌های پیشرفته

96. The Art - Art portfolio template (HTML/CSS)
97. Form Validation - Form validation (HTML/CSS/JS)
98. Meal Finder - Recipe finder (HTML/CSS/JS)
99. Wikipedia Clone - Wikipedia clone (HTML/CSS/JS)

Getting Started | شروع کار

Each project is self-contained and includes: هر پروژه به صورت مستقل شامل موارد زیر است:

• HTML file | فایل HTML
• CSS file | فایل CSS
• JavaScript file (if needed) | فایل JavaScript (در صورت نیاز)
• README with project details | README با جزئیات پروژه

Features | ویژگی‌ها

• Pure HTML, CSS, and JavaScript | HTML، CSS و JavaScript خالص
• No external dependencies | بدون وابستگی‌های خارجی
• Responsive designs | طراحی واکنش‌گرا
• Modern UI/UX | رابط کاربری مدرن
• Interactive elements | عناصر تعاملی
• Cross-browser compatible | سازگار با تمام مرورگرها

How to Use | نحوه استفاده

1. Navigate to any project folder | به پوشه هر پروژه بروید
2. Open index.html in a web browser | فایل index.html را در مرورگر باز کنید
3. View and interact with the project | پروژه را مشاهده و با آن تعامل کنید
4. Study the code to understand the implementation | کد را برای درک پیاده‌سازی مطالعه کنید
5. Modify and experiment with the code | کد را تغییر داده و آزمایش کنید

Browser Support | پشتیبانی مرورگرها

All projects work on modern browsers that support: تمام پروژه‌ها در مرورگرهای مدرنی که از موارد زیر پشتیبانی می‌کنند کار می‌کنند:

• HTML5
• CSS3
• ES6 JavaScript
• Flexbox
• CSS Grid
• CSS Animations
• CSS Transitions

Credits | اعتبار

This project collection is created to help developers learn and practice web development skills. Each project is designed to demonstrate specific concepts and techniques in HTML, CSS, and JavaScript. این مجموعه پروژه برای کمک به توسعه‌دهندگان در یادگیری و تمرین مهارت‌های توسعه وب ایجاد شده است. هر پروژه برای نمایش مفاهیم و تکنیک‌های خاص در HTML، CSS و JavaScript طراحی شده است.

HTML, CSS & JAVASCRIPT 100+ PROJECTS 👇

Welcome to the Mega Web Project! 🎉 This repository is a collection of 100 handcrafted HTML, CSS, and JavaScript projects, designed to inspire, teach, and serve as a solid foundation for your web development journey. Whether you're a beginner or an experienced developer, this repo has something for everyone.

📌 Project Highlights

• 🚀 100+ Components: Each project is a unique combination of HTML, CSS, and JavaScript.
• 🎨 Creative Designs: Includes modern layouts, animations, and user interactions.
• 🧩 Modular Code: Easy to integrate into your projects.
• 📚 Educational Value: Perfect for learning advanced web development techniques.

🛠️ Setup Guide

To run this project locally:

1. Clone the repository:

   git clone https://github.com/AlirezaAghaee1996/mega-web-project.git
   cd mega-web-project