100 Days of Code

Welcome to my 100 Days of Code GitHub repository! Here, you'll find all the projects and code snippets I've worked on during my 100-day coding journey.

Projects

Day 1

• Animated Tab Bar
• Short Description: This project features an animated tab bar developed by Aarzoo as part of the 100 Days of Code challenge. It creates a visually appealing tab interface with dynamic animations using HTML and CSS.
• Jump into the project 👉 click here

Day 2

• Animated Toogle Switch
• Short Description: This project focuses on creating a visually appealing checkbox toggle with accompanying text options. The toggle design incorporates custom styling, including animations and transitions, to enhance user interaction.
• Jump into the project 👉 click here

Day 3

• Animated Radio Button
• Short Description: This project showcases an animated radio button selection interface implemented using HTML and CSS. It's part of the #100DaysOfCode Challenge.
• Jump into the project 👉 click here

Day 4

• Animated 3D Loader
• Short Description: This project contains code for an animated 3D loader created using HTML and CSS. The loader consists of a series of dots arranged in a circular pattern, with accompanying text indicating loading activity. The animation creates a visually appealing effect suitable for various web applications .
• Jump into the project 👉 click here

Day 5

• Hand Scanning Animation Project
• Short Description: The hand scanning animation project is a simple yet visually appealing demonstration of CSS animations. It creates an illusion of a hand scanning process with lines moving up and down, representing the progress of the scan.
• Jump into the project 👉 click here

Day 6

• Animated Navigation Tab Menu
• Short Description: This project features an animated navigation tab menu built with HTML, CSS, and JavaScript. It provides an interactive and visually appealing way to navigate through different sections of a web application or website.
• Jump into the project 👉 click here

Day 7

• Animated Rocket Loader
• Short Description: The Animated Rocket Loader project showcases a visually appealing loader animation consisting of a rocket surrounded by clouds. The rocket spins while the clouds move dynamically, providing an engaging loading experience for users.
• Jump into the project 👉 click here

Day 8

• Dynamic Island of iPhone
• Short Description: This project aims to create an interactive island popup using HTML, CSS, and JavaScript. Below, you'll find information on how to get started with the project, where to download the full source code, and how to get in touch with the creator.
• Jump into the project 👉 click here

Day 9

• Animated Cute Puppy
• Short Description: This project showcases an animated cute puppy created using HTML and CSS. The animation includes various elements such as blinking eyes, wagging tail, and moving ears to bring the puppy to life.
• Jump into the project 👉 click here

Day 10

• Animated Loader
• Short Description: The Animated Loader utilizes SVG elements and CSS animations to create an eye-catching loading animation. It consists of a circular ring with a worm-like shape moving along its path. The animation is smooth and captivating, making it suitable for various web applications and projects.
• Jump into the project 👉 click here

Day 11

• Smiley Preloader Animation
• Short Description: This project is part of Day 11 of my #100DaysOfCode Challenge. It features a smiley preloader animation created using SVG and CSS animations.
• Jump into the project 👉 click here

Day 12

• Animated Eevee Pkemon
• Short Description: This project showcases an animated eevee pokemon created using HTML and CSS. The animation includes various elements such as blinking eyes, wagging tail, and moving ears to bring the eevee to life.
• Jump into the project 👉 click here

Day 13

• Animated Cat Loader
• Short Description: This is a simple HTML and CSS code snippet that creates an animated cat loader. The loader features a playful animation of a cat formed by various segments. Each segment is given a distinct gradient effect, resulting in a visually appealing and engaging loader animation.
• Jump into the project 👉 click here

Day 14

• Pencil and Paper Checkbox
• Short Description: This project consists of HTML, CSS, and JavaScript code to create a unique pencil and paper checkbox effect. The checkbox design mimics the appearance of a checkbox being filled in with a pencil, followed by the appearance of lines drawn on paper .
• Jump into the project 👉 click here

Day 15

• Animated Preloader
• Short Description: This is a simple HTML and CSS code snippet that creates an animated preloader. The preloader is designed to provide a visual indication to users that content is being loaded.
• Jump into the project 👉 click here

Day 16

• Animated Dinosaur on a Unicycle
• Short Description: This project is a fun and whimsical animation of a dinosaur riding a unicycle, created as part of Day 16 of the #100DaysOfCode Challenge. The animated dinosaur is built using HTML and CSS, with intricate styling and keyframe animations to bring it to life.
• Jump into the project 👉 click here

Day 17

• Glowing Toggle Switch
• Short Description: The Glowing Toggle Switch is a simple HTML and CSS implementation that provides a stylish toggle switch with a glowing effect. This code snippet allows you to integrate a customizable toggle switch into your web project effortlessly.
• Jump into the project 👉 click here

Day 18

• Neumorphism Loader
• Short Description: This is a simple HTML, CSS, and JavaScript implementation of a neumorphism-style loader. Neumorphism is a design trend that aims to create a soft, 3D-like appearance, often with elements that appear to be pressed into or extruded from a background surface.
• Jump into the project 👉 click here

Day 19

• Animated Sleeping Cat
• Short Description: This project showcases an animated sleeping cat created using HTML and CSS. It's a fun and creative way to explore front-end development and animation techniques.
• Jump into the project 👉 click here

Day 20

• Animated Puppy
• Short Description: This project is a delightful animation of a puppy created using HTML and CSS. The animated puppy consists of various elements such as its body, head, ears, eyes, nose, tail, and legs, all of which come together to create a cute and lively visual .
• Jump into the project 👉 click here

Day 21

• Totoro Toggle Switch
• Short Description: Welcome to the Totoro Toggle Switch project, a fun and interactive way to implement a toggle switch using HTML and CSS. This project is part of Day 21 of the #100DaysOfCode Challenge.
• Jump into the project 👉 click here

Day 22

• Animated Jumping Totoro
• Short Description: This is a simple HTML and CSS project that creates an animated jumping Totoro character. Totoro is a popular character from the Studio Ghibli film "My Neighbor Totoro." In this project, Totoro is animated to appear as if it is jumping up and down. The animation is achieved using CSS keyframes and transforms.
• Jump into the project 👉 click here

Day 23

• Animated Rocket Loader
• Short Description: This is a simple HTML and CSS code snippet that creates an animated rocket loader. It's a fun and visually appealing way to indicate that something is loading or processing in your web application. The rocket moves upward and emits smoke as it goes, giving the impression of a rocket taking off.
• Jump into the project 👉 click here

Day 24

• Menu With Hover Reveal
• Short Description: This is a simple menu with hover reveal effects using HTML and CSS. When you hover over the menu items, they expand to reveal additional information. Each menu item consists of an icon and a title.
• Jump into the project 👉 click here

Day 25

• Animated Paper Plane Button
• Short Description: Create an engaging and interactive animated paper plane button with this HTML, CSS, and JavaScript code. When clicked, this button transforms into a paper plane and sends with a success message, adding a delightful touch to your web application.
• Jump into the project 👉 click here

Day 26

• Animated Eye Toggle
• Short Description: This project showcases an animated eye toggle created using HTML and CSS. The toggle switch features an eye that opens and closes as the switch is toggled on and off.
• Jump into the project 👉 click here

Day 27

• Animated Cute Lion
• Short Description: Welcome to the Animated Cute Lion repository! This project showcases a delightful animated lion created using HTML and CSS animations. It's a fun and engaging way to learn about web animations while enjoying the cuteness of a lion.
• Jump into the project 👉 click here

Day 28

• Animated Walking Dog
• Short Description: The code provided creates an animated walking dog using CSS. The dog's various body parts, such as the head, ears, legs, and tail, are animated to create a lifelike movement. The animation is achieved through the use of CSS variables, keyframes, and various positioning and transformation techniques.
• Jump into the project 👉 click here

Day 29

• Animated Doraemon
• Short Description: This is a simple HTML and CSS code snippet to create an animated representation of Doraemon, the famous cartoon character. The code utilizes basic HTML structure along with CSS styling to create the visual effect .
• Jump into the project 👉 click here

Day 30

• 3D Rotate Tube with Animated Text
• Short Description: This is a simple HTML and CSS code snippet that creates a 3D rotating tube with animated text on its faces. The tube is displayed in a webpage and the text on each face of the tubr changes dynamically, creating a visually engaging effect.
• Jump into the project 👉 click here

Day 31

• Animated Pencil Loader
• Short Description: This repository contains HTML and CSS code for an animated pencil loader, designed to be used as a loading animation for web pages. The loader consists of a pencil icon that animates in a loop, giving users a visual cue that the page is still loading.
• Jump into the project 👉 click here

Day 32

• Pencil Loader
• Short Description: This is an HTML and CSS code for a pencil loader animation. The loader consists of a pencil with three different-colored circular bodies, an eraser, and a point.
• Jump into the project 👉 click here

Day 33

• Animated Cube Loader
• Short Description: This project contains the code for a simple yet visually appealing animated cube loader that can be used to indicate loading progress on a website.
• Jump into the project 👉 click here

Day 34

• Animated Mail Button
• Short Description: It features an animated mail button created using HTML and CSS. When you hover over the mail button, the top fold of the envelope rotates, and the letter inside expands to reveal its content. A shadow effect also adjusts to enhance the animation.
• Jump into the project 👉 click here

Day 35

• Animated Cube Wheel Loader
• Short Description: This is a simple HTML and CSS project that demonstrates an animated cube wheel loader. The project can be used as a preloader on websites, applications, and other digital products to indicate loading progress.
• Jump into the project 👉 click here

Day 36

• Animated Compress File Button
• Short Description: This project demonstrates an animated button compression effect using HTML, CSS, and JavaScript. The primary objective is to create an engaging user interface element that visually indicates a button press or action.
• Jump into the project 👉 click here

Day 37

• Animated 3D Tree
• Short Description: This project features a captivating tree animation inspired by the design created by NlghtM4re, showcased on uiverse.io. The animation is implemented using HTML, CSS, and JavaScript to create a visually appealing and dynamic representation of a stylized tree.
• Jump into the project 👉 click here

Day 38

• Animated 3D Bee
• Short Description: The Animated 3D Bee is a fun and eye-catching project created using HTML and CSS. This project brings a delightful 3D bee to life on your webpage, sure to capture the attention of your website visitors. Whether you want to add a playful touch to your website or simply learn more about CSS animations, this project is perfect for you.
• Jump into the project 👉 click here

Day 39

• Glassmorphism Loader
• Short Description: This project contains HTML and CSS code for creating a visually appealing glassmorphism loader. Glassmorphism is a design trend that employs transparent or semi-transparent backgrounds with frosted glass-like effects, providing a sleek and modern appearance to user interfaces.
• Jump into the project 👉 click here

Day 40

• Animated Loader
• Short Description: This project is a 3D animated loader created using HTML and CSS. The loader consists of multiple boxes moving and transforming in 3D space, providing a visually appealing loading animation.
• Jump into the project 👉 click here

Day 41

• ON-OFF Toggle Switch
• Short Description: This project contains HTML and CSS code for implementing an ON-OFF toggle switch with accompanying comments for clarity and understanding. The toggle switch is designed using HTML and styled using CSS, utilizing modern techniques for layout, styling, and interactivity.
• Jump into the project 👉 click here

Day 42

• Animated 3D Loader
• Short Description: This project provides an animated 3D loader implemented in HTML and CSS. The loader consists of four boxes that move in a coordinated manner, creating a visually appealing loading animation. Each box has three sides with different colors, giving the illusion of a 3D effect as they rotate and animate.
• Jump into the project 👉 click here

Day 43

• 3D Credit Card Flip Animation
• Short Description: This project contains HTML and CSS code for creating a 3D credit card flip animation. It simulates the front and back sides of a credit card and includes animations for flipping the card when hovered over.
• Jump into the project 👉 click here

Day 44

• Animated Multi Device Loader
• Short Description: This project provides a set of animated loader elements styled with CSS. These loaders are designed to resemble multiple electronic devices and can be easily integrated into web pages to indicate loading or processing.
• Jump into the project 👉 click here

Day 45

• Animated YOU Loader
• Short Description: This project demonstrates the implementation of an animated loader using HTML and CSS. The loader is designed to provide visual feedback to users while waiting for content to load or processes to complete. It utilizes SVG elements and CSS animations to create a visually appealing loading animation.
• Jump into the project 👉 click here

Day 46

• Neumorphism Toggle Button
• Short Description: This project showcases a stylish toggle button designed using the neumorphism design trend. Neumorphism, a portmanteau of "new" and "skeuomorphism," is characterized by subtle shadows and highlights that create a soft, extruded plastic look. The toggle button is created using HTML and CSS, emphasizing modern design aesthetics and smooth transitions.
• Jump into the project 👉 click here

Day 47

• Animated Rubik Cube Loader
• Short Description: This project showcases an animated Rubik's Cube loader using HTML and CSS. The loader is a visually appealing animation that can be used as a loading indicator for web applications. The cube rotates smoothly, giving a 3D effect that enhances the user experience during loading times.
• Jump into the project 👉 click here

Day 48

• Animated Modern Button
• Short Description: This project showcases a dynamic, interactive button with a sparkle animation effect using pure CSS. The button is designed to provide an engaging user experience with responsive animations that react to user interactions such as hovering and clicking. This project is a great example of using advanced CSS techniques like custom properties, animations, and pseudo-elements to create visually appealing UI components without relying on JavaScript.
• Jump into the project 👉 click here

Day 49

• Animated Heart Shape Toggle Switch
• Short Description: This project showcases an animated heart-shaped toggle switch implemented using HTML and CSS. The toggle switch is designed to visually represent a heart, which changes its appearance when toggled. The animation is smooth and visually appealing, providing a delightful user experience.
• Jump into the project 👉 click here

Day 50

• Animated Loader
• Short Description: This project showcases a 3D animated loader built with HTML and CSS. The animation features a series of boxes that rotate and move to create an engaging visual effect. This README provides a comprehensive explanation of the project's structure and implementation.
• Jump into the project 👉 click here

Day 51

• Animated Loader
• Short Description: This project showcases a simple yet elegant loading animation using HTML and CSS. The loader consists of a series of circles that animate in a visually appealing sequence, providing a smooth loading experience for users.
• Jump into the project 👉 click here

Day 52

• Animated Compass Loader
• Short Description: This project features an animated compass loader built using HTML and CSS. The loader is designed to be visually appealing and is implemented with scalable vector graphics (SVG) to ensure sharp rendering at any size. The compass loader can be used in web projects as a preloader or a loading animation.
• Jump into the project 👉 click here

Contact Me

• YouTube: click here
• Instagram: click here
• X: click here
• Threads: click here
• My Agency: click here

Feel free to explore the projects and code snippets. If you have any questions or suggestions, don't hesitate to reach out!