-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6e8294b
commit a4b6d29
Showing
1 changed file
with
158 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,158 @@ | ||
# 🛠️ My Development Journey with HTML, CSS, and JavaScript 🛠️ | ||
|
||
🎉 Hi there! I'm excited to share my learning journey with **HTML** 📝, **CSS** 🎨, and **JavaScript** 💻. During my initial days of learning web development, I created several small projects to understand how these technologies work together. From building websites 🌐 and creating games 🎮 to designing footers 🔻, navigation bars 🧭, button animations 🔲, and sign-in forms 🔑 and many more, I've explored it all. Using these skills, I have progressed to developing larger and more complex websites. 🚀 | ||
|
||
## 🚀 Projects Showcase 🚀 | ||
|
||
### 🌐 Website Components 🌐 | ||
|
||
- **Footers** 🔻: Designed various footer styles to enhance the end section of web pages. | ||
- **Navigation Bars** 🧭: Created responsive and interactive navigation bars for seamless user experience. | ||
- **Button Animations** 🔲: Experimented with different button animations to make web interactions more engaging. | ||
- **Sign-In Forms** 🔑: Developed secure and stylish sign-in forms for user authentication. | ||
- and many more 🎉 | ||
|
||
### 🎮 Fun and Interactive Projects 🎮 | ||
|
||
- **Simple Websites** 🌟: Built small websites to practice layout design and content organization. | ||
- **Mini Games** 🎮: Created interactive games to learn and implement game logic using JavaScript. | ||
- and many more 🚀 | ||
|
||
## 🛠️ Technologies Used 🛠️ | ||
|
||
- **HTML** 📝: For structuring the content on the web pages. | ||
- **CSS** 🎨: For styling and enhancing the visual appeal of the web pages. | ||
- **JavaScript** 💻: For adding interactivity and dynamic behavior to the web pages. | ||
|
||
## 🚀 How to Use 🚀 | ||
|
||
1. Clone the repository: `https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS.git` | ||
2. Open `index.html` in your web browser to view the projects. | ||
|
||
## 📸 Screenshots (Output) 📸 | ||
|
||
1. 🎨 Animated Search Bar | ||
|
||
![ANIMATED](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/c163dc10-a0ac-4b3a-9435-9ef8e8721edb) | ||
|
||
2. ✍️ Auto Text Effect Animation | ||
|
||
![AUTO](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/67a013e2-f06b-4982-9683-0e5804ca494e) | ||
|
||
3. 🖼️ Background Image Scroll Effect | ||
|
||
![BGD IMAGE](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/7bc9313a-95a8-445e-8a9e-76ba0c4f434a) | ||
|
||
4. 🎥 Background Video | ||
|
||
![BGD VIDEO](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/88ad7492-aa17-46ab-8673-b756cff15c95) | ||
|
||
5. 🌫️ Blurred Background Popup | ||
|
||
![BLURRED](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/6b69e91a-0f9a-4399-88fe-db306a6606e0) | ||
|
||
6. 🌊 Button Ripple Effect | ||
|
||
![RIPPLE](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/601f8bfb-834f-43b4-8b5e-71644ca25f0f) | ||
|
||
7. 🎲 Dice Roll Simulator | ||
|
||
![DICE ROLL](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/517599e6-0cd6-4698-8c7f-c3a2423e19f4) | ||
|
||
8. 🌐 Double Landing Page | ||
|
||
![DOUBLE LAND](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/81e8865f-c4f9-4703-86d0-3ec741774a04) | ||
|
||
9. 🥁 Drum Kits | ||
|
||
![DRUM](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/bcfa1bee-b4f8-4b7c-b184-2a1246aefc61) | ||
|
||
10. 😃 Emoji Rating | ||
|
||
![EMONJI](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/d2243c96-bb02-4a3d-b298-13ab83705b46) | ||
|
||
11. 🗣️ Feedback UI | ||
|
||
![FEEDBACK](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/95b61b26-c2e7-401f-a665-a54593e74df0) | ||
|
||
12. ⏳ Loading Bar | ||
|
||
![LOADING](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/516baf83-bb0b-4eaa-ad6c-02efd0be94d3) | ||
|
||
13. 📅 Mini Calendar | ||
|
||
![MINI CAL](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/2737ad46-844e-4cbf-b6a8-ebb045ab2a91) | ||
|
||
14. 📆 Month Calendar | ||
|
||
![MONTH](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/895da9d1-21c5-4183-98f5-0b045e4f0267) | ||
|
||
15. 🖱️ Mouse Event | ||
|
||
![MOUSE](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/a468caed-3b81-49a2-a91d-d7eadd25c6a6) | ||
|
||
16. ✖️ Multiplication App | ||
|
||
![MULTIPLICATION](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/7aaeed2b-c061-44eb-a875-c1d69a455a44) | ||
|
||
17. 🎶 Music Player | ||
|
||
![MUSIC](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/4ba27781-cf80-4b31-80bd-3d19fedba230) | ||
|
||
18. 🎉 New Year Countdown | ||
|
||
![NEW YEAR](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/abb3d0c6-7417-4e73-b3ec-1b42423fc5a5) | ||
|
||
19. 🖼️ Photo Gallery | ||
|
||
![photo gallery](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/3a39ec53-9338-4afb-af3a-5b21b65b2065) | ||
|
||
20. 📊 Profile Statistics | ||
|
||
![statics](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/7965963f-f6d8-4794-ad02-a89fafd34e36) | ||
|
||
21. ❓ Q and A Section | ||
|
||
![qa](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/6796085e-695a-41f0-8cbf-4828a7dfdf38) | ||
|
||
22. 🤪 Random Emoji | ||
|
||
![random ](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/936d7351-48b5-4fe0-a0df-30fd3eafcd3c) | ||
|
||
23. 📸 Random Photos | ||
|
||
![random photos](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/59f7eab5-c09a-4769-9041-906f288dc24d) | ||
|
||
24. 📝 Random Quote Generator | ||
|
||
![quote](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/727cf211-b3cc-4186-ba0e-bedb97abf8e1) | ||
|
||
25. 📚 Recipe Book App | ||
|
||
![recipe book](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/31f21ecc-4e18-488e-a4a6-360d07f034b4) | ||
|
||
26. 🔄 Rotating Image Gallery | ||
|
||
![rotating](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/53bb0cd9-8702-425d-9cad-a97058318bdf) | ||
|
||
27. 🚶 Step Progress Bar | ||
|
||
![progress](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/99d2d9a5-d219-41f1-a66b-20df39bbd17a) | ||
|
||
28. 🎥 Video Trailer Popup | ||
|
||
![trailor 1](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/7566887d-9354-408b-ad17-9f71c2cf17b4) | ||
|
||
![trailor 2](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/893d0996-a969-4671-ada2-cbbb084f3fa3) | ||
|
||
![trailor 3](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/47a7cd47-538a-40e6-aca1-68197e29b83d) | ||
|
||
29. ⚖️ Weight Converter | ||
|
||
![weight](https://github.com/nidhiupman568/CREATIVE-ANIMATED-PROJECTS/assets/130860182/b5348739-31ca-4352-a8dd-be3056fbb45e) | ||
|
||
### 🌟 Enjoy Exploring! 🌟 | ||
|
||
Feel free to explore my projects and see the progression from simple components to complete websites. Your feedback is always welcome! If you'd like to contribute or suggest improvements, please make a pull request. Happy coding! 🎉 | ||
---- | ||
Explore and enjoy the world of web development with these foundational projects! 🚀💻🌐 |