https://github.com/nidhiupman568/my-first-tiny-web-dev-creations-html-css-js-

🎉 Hi there! I'm thrilled to share my web development journey with HTML 📝, CSS 🎨, and JavaScript 💻. I started with small projects to learn how these technologies work together. From creating websites 🌐 and games 🎮 to designing footers 🔻, navigation bars 🧭, and button animations 🔲, I've explored it all! 🚀
https://github.com/nidhiupman568/my-first-tiny-web-dev-creations-html-css-js-

css front-end-development html interactive-web-design javascript web-animation web-development

Last synced: about 1 month ago
JSON representation

🎉 Hi there! I'm thrilled to share my web development journey with HTML 📝, CSS 🎨, and JavaScript 💻. I started with small projects to learn how these technologies work together. From creating websites 🌐 and games 🎮 to designing footers 🔻, navigation bars 🧭, and button animations 🔲, I've explored it all! 🚀

• Host: GitHub
• URL: https://github.com/nidhiupman568/my-first-tiny-web-dev-creations-html-css-js-
• Owner: nidhiupman568
• Created: 2024-06-05T17:51:48.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-09-06T20:55:30.000Z (6 months ago)
• Last Synced: 2024-11-11T16:27:06.011Z (3 months ago)
• Topics: css, front-end-development, html, interactive-web-design, javascript, web-animation, web-development
• Language: HTML
• Homepage:
• Size: 17.4 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🛠️ 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. 🚀

Project Demo: https://nidhiupman568.github.io/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/

## 🚀 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/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-.git`

2. Open `index.html` in your web browser to view the projects.

## 📸 Screenshots (Output) 📸

1. 🌐 Responsive Navigation Bar Tutorial Using HTML, CSS, and JavaScript 🧭

![NAVBAR](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/88dd09c5-08a8-46ca-aee9-7655056e54ab)

2. 🌟 How to Build Image Slider Using HTML, CSS, and JavaScript 🎞️

![2](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/cdad6f23-5e95-4408-b19c-1535000bcfa8)

3. 🖱️ How To Create Tab Using HTML, CSS, and JavaScript 🔄

![3](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/aebb4fd5-36bd-4fd8-bfa5-0f2a17bee7a6)

4. ↕️ How To Create Vertical Tab Using HTML, CSS, and JavaScript ⬆️⬇️

![4](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/f968e6a4-a904-4909-8f34-10a6d13ec1ba)

5. 🔽 How to create drop down, drop up, drop left, and drop right ↩️↪️

![5](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/3604adb4-7365-4555-8e80-641d8203e5f4)

6. 🖼️ How To Create a Modal Using HTML, CSS, and JavaScript 🔲

![6](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/874a7ea8-1c4a-4bfc-90c2-668e70cf2e17)

7. 🎛️ How To Create an Accordion 🎚️

![7](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/25ce5cc8-4986-4c77-89c1-713b79a8916c)

8. 🗨️ Tooltip with Only CSS 💬

![8](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/3b7ceab7-9783-4354-b8e1-20279ca25837)

9. 📂 How To Create Sidebar Menu using HTML, CSS, and JavaScript 📑

![9](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/47ef4237-0662-47cf-a5df-aa0367a9ebe0)

10. 📝 Create Todo App (Drag & Drop) ✅

![10](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/b0938fb7-11e5-43f7-b422-81306ddbcbb6)

11. 📋 Checklist Todo App 📃

![11](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/faef67da-e256-43be-9a6b-701cf70b60d5)

12. 🎛️ CSS Switch Tutorial & Card 🔁

![12](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/a7244ebd-d281-48db-af0d-0a8564eadce3)

13. ✨ Button Ripple Effect 🌊

![13](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/e4ef0c9e-258f-479d-b2ba-d8e91fef5dee)

14. 🔑 Responsive Registration Form 📝

![14](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/b5773eb2-50a9-4b95-8379-e1fb4d6a734c)

15. 🧭 Animated Responsive Navbar 🎨

![15](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/9637e5b0-6414-4501-8081-e976e0e74159)

16. 🌗 Build Responsive Animated Navbar With Light & Dark Theme Toggler 🌞🌜

![16](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/d401abf0-5718-4d2f-9a05-8924a61e1c6c)

17. 📜 Build Draggable Slides ↔️

![17](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/7cf49841-b661-4a7d-a5cf-cf5cbbc1c1e8)

18. 📊 Animated Counter 🔢

![18](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/5f57d1f7-91e4-4ebf-ab06-1fd7b54ede2c)

19. 📈 Scroll Indicator and Animation 🎢

![19](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/e7fcd0c1-71e3-4dfe-a31e-7ac786b51bf8)

20. ↔️ Draggable & Touchscreen Slideshow 📱

![20](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/cb834c77-dc21-4af6-aaf6-7383d27e4895)

21. 🔄 Create CSS Spinner 🎡

![21](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/d25b6d11-c998-4f2e-b0c0-1ced1d525447)

22. 📚 Creative 3D Book Animation 📖

![22](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/00646259-f1da-43f8-b23b-c376253f053c)

23. ⚪ Custom Radio 🔘

![23](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/d360122b-8977-49f8-a613-94ec34599f12)

24. ☑️ Custom Checkbox ✅

![24](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/5f98cbe9-1ab3-4cf0-99ae-4b192d6f3535)

25. 📃 Folded Card 📑

![25](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/de6ba963-72ae-4fdb-9e3d-2d9ab3a09102)

26. 🗂️ Responsive Side Menu 🗃️

![26](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/6e57cb91-d29d-4242-ae0a-8fb0ba866417)

27. 🌟 Glassmorphism Card 💎

![27](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/64ca685f-57cb-4352-b865-b1f0c94d9713)

28. 🎲 TicTacToe Game ❌⭕

![28](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/dffe973c-6f3c-45b8-9ff9-02750030432d)

29. 🔗 Links Hover Effects 🌐

![29](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/93e375c2-a357-4802-85b8-287754dbd916)

30. 🎨 Button Effects ✨

![30](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/c004c246-aeba-44a4-a075-a761115c6a91)

31. 📸 Image Hover Effect 🖼️

![31](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/ecdc2373-5882-479b-95c9-3fcd0654e7e3)

32. 📝 Multi Step Form 🖊️

![32](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/2614d63e-11e1-4876-ba99-3b037700ff42)

33. 🔍 Input Focus Effects 🕵️

![33](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/5b3e1060-6c28-4fe2-bcab-c718e8b3af35)

34. 📜 Custom Select Component 🔽

![34](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/35d00282-bfd6-4937-87fa-9fb58f41c5c4)

35. 🧊 3D Cube 🧩

![35](https://github.com/nidhiupman568/MY-FIRST-TINY-WEB-DEV-CREATIONS-HTML-CSS-JS-/assets/130860182/e0b6ed39-4d48-4791-8b1b-51fc43eb4978)

## 🌟 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! 🚀💻🌐