Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/tonystark-19/html-css-projects

Welcome to the HTML & CSS Mini Projects Website! šŸŽØāœØ This website showcases various mini projects I created to enhance my front-end development skills. Each project is displayed with an image preview, source code link, and live deployment link for easy access.
https://github.com/tonystark-19/html-css-projects

css3 html-css-projects html5 mini-projects

Last synced: 10 months ago
JSON representation

Welcome to the HTML & CSS Mini Projects Website! šŸŽØāœØ This website showcases various mini projects I created to enhance my front-end development skills. Each project is displayed with an image preview, source code link, and live deployment link for easy access.

Awesome Lists containing this project

README 

          
# šŸš€ HTML & CSS Mini Projects Website  



Welcome to the **HTML & CSS Mini Projects Website!** šŸŽØāœØ  

This website showcases various **mini projects** I created to enhance my front-end development skills. Each project is displayed with an **image preview**, **source code link**, and **live deployment link** for easy access.  



This is part of my continuous journey to master HTML, CSS, and UI/UX design. šŸš€  



---



## šŸ“Œ Overview  



This website is designed to:  

āœ… Showcase **each project** with a preview image  

āœ… Provide **live deployment links** for direct interaction  

āœ… Offer **source code access** for easy learning  

āœ… Feature **JS animations** with ScrollReveal for smooth effects  

āœ… Ensure **full responsiveness** for all projects  

āœ… Include a **Back-to-Top button** for seamless navigation  

āœ… Have a **footer with useful resources**  



Built to help beginners explore and learn front-end development in an interactive way! šŸŒ±  



---



## šŸ“ø Screenshots



![Mini-Projects](Images/Screenshot.png)



---



## šŸŒ Live Demo



The project is live and can be viewed here: [HTML & CSS Mini Projects Website](https://html-css-projects-phi.vercel.app/)



---



## šŸ›  Technologies Used  



- **šŸŒ HTML5** ā€“ Structuring web pages  

- **šŸŽØ CSS3** ā€“ Styling, animations, and layouts  

- **āš” JavaScript** ā€“ Scroll animations and interactions  

- **šŸ“œ ScrollReveal.js** ā€“ Smooth animation effects  

- **šŸ–Šļø VS Code** ā€“ Primary code editor  

- **šŸ™ Git & GitHub** ā€“ Version control and hosting  



---



## šŸ“‚ Projects Listed  



Each project includes:  



šŸ“ø **Image Preview** | šŸ“œ **Code Link** | šŸ”— **Live Demo**  



---



## šŸ“‚ Projects



> **UI Components**



1. **Profile Card** ā€“ Profile card UI design.

2. **Profile Card 2** ā€“ Another profile card variation.

3. **Credit Card UI Design** ā€“ Interactive credit card design.

4. **Neumorphism Buttons** ā€“ Soft UI-inspired button design.

5. **Neumorphism Effects on Social Media Icons** ā€“ Neumorphic icons.

6. **Neumorphism Keyboard Design** ā€“ Keyboard using neumorphism.

7. **Neumorphism Pagination Design** ā€“ Pagination with soft UI effects.

8. **Popup Modal Box** ā€“ Simple popup modal design.

9. **Search Box** ā€“ Basic search box UI.

10. **Share Button Tooltip** ā€“ Interactive share button.



---



> **Form Designs**



11. **Animated Login Form** ā€“ A login form with animations.

12. **Glassmorphism Login Form** ā€“ Login form using glassmorphism.

13. **Neumorphism Login Form** ā€“ Neumorphic-style login form.

14. **Responsive Login Form** ā€“ A responsive login + sign-in form.

15. **Registration Form** ā€“ Fully functional registration form.

16. **Responsive Contact Us Form** ā€“ Contact form with responsive design.

17. **Email Subscription Box** ā€“ Stylish email subscription box.

18. **Awesome Custom Radio Buttons** ā€“ Custom radio button styles.

19. **Custom Radio Buttons** ā€“ Custom radio button style 2.

20. **Custom Checkbox** ā€“ ON/OFF switch designs.



---



> **Animations & Effects**



21. **3D Flip Card** ā€“ A 3D card that flips on hover.

22. **Gradient Text Effect** ā€“ Gradient color text animation.

23. **Google Loader** ā€“ Loader animation inspired by Google.

24. **Simple Loader** ā€“ Basic loading animation.

25. **Loading Animation** ā€“ Another creative loading animation.

26. **Image Hover Animation** ā€“ Hover transition using z-index.

27. **Neumorphism Loading Spinner** ā€“ Loading spinner with neumorphic design.

28. **Image Slider with Clip Animation** ā€“ Sliding animation effect.

29. **Flipping Card** ā€“ A card that flips when hovered.

30. **Animated Skills Bar** ā€“ Skill progress bars with animations.

31. **Navigation Links Hover Animation** ā€“ Tooltip effect on hover.



---



> **Layouts & Navigation**



32. **Animated Navigation Menu Bar** ā€“ A stylish animated navbar.

33. **Navigation Menu Bar Animation** ā€“ Various hover animations for navigation.

34. **Responsive Pricing Table** ā€“ A well-structured pricing table.

35. **Responsive Card Slider** ā€“ Card slider with smooth transitions.

36. **Responsive Full-Screen Search Bar** ā€“ Full-screen search interface.

37. **Glassmorphism Website** ā€“ Simple homepage using glassmorphism.

38. **Simple Website** ā€“ A clean homepage layout.

39. **Sidebar Menu** ā€“ Interactive sidebar navigation.

40. **Vertical Tabs** ā€“ Vertical tab-based navigation.



---



## Why This Project?

This repository was created as part of my #100DaysOfCode challenge to improve my front-end skills. Each project reflects the skills Iā€™m building along the way.



---



## āš™ļø Prerequisites  



Before running the projects, ensure you have the following installed:  



- šŸ–„ļø **A modern web browser** (Chrome, Firefox, Edge, etc.)  

- šŸ“ **VS Code** (or any code editor)  

- šŸŒ **Git** (optional, for cloning the repository)  



---



## Resources



These are the resources I used to learn and build these projects:



- [MDN Web Docs (HTML)](https://developer.mozilla.org/en-US/docs/Web/HTML)  

- [Coding lab YouTube Channel](https://www.youtube.com/@CodingLabYT)



---



## šŸ›  Installation & Usage  



To use these projects locally, follow these steps:  



1ļøāƒ£ **Clone this repository**  

```bash

git clone https://github.com/your-username/html-css-mini-projects.git

```



2ļøāƒ£ **Open a project folder and launch the `.html` file in your browser.**



šŸš€ No dependencies required! Just HTML & CSS.



---



Feel free to explore, use, and modify these projects. If you find them helpful, consider giving this repo a ā­! šŸ˜Š