HTML, CSS and JavaScript projects from basic to advance level
-
Updated
Jun 2, 2024 - CSS
HTML, CSS and JavaScript projects from basic to advance level
This repo includes my #30Days30Projects challenge projects.
30 days 30 projects.
Created a button with a ripple effect using HTML, CSS, and JavaScript. This adds interactivity to the webpage and uses CSS ::before pseudo-elements and transform to create the ripple circle, while JavaScript calculates the position of the user's mouse and updates the CSS custom properties used for the ripple animation.
This is a collection of 30 days of JavaScript projects. Each day I will create a new project using vanilla JavaScript. The projects will be simple and easy to understand. I will also add a README.md file to each project with a description of the project and how to run it.
The code creates an animated search bar using HTML, CSS, and JavaScript, with a stylish design that includes a shadow effect, magnifier and microphone icons, and a transparent input field.
The project is a New Year's countdown created using HTML, CSS, and JavaScript. It features a dynamic countdown that updates every second, displaying the exact amount of time left until the new year. The project offers a fun and interactive experience for users.
A really cool feature that allows me to showcase a set of images on my website in a continuous loop, rotating them one by one.
This project is a webpage that displays the X and Y position of the user's mouse cursor in real-time. The JavaScript code updates the values in the boxes as the user moves their mouse. This project demonstrates dynamic HTML updates with user interaction.
In this project, I created a stylish analog clock with the Rolex logo using HTML, CSS, and JavaScript. It dynamically retrieves the time from the user's browser to accurately represent the current time. This allowed me to practice my front-end skills while learning about working with the DOM, handling user events, and creating animations.
This repo contains completed tasks from April's 30DaysOfCode challenge. I gained a lot of experience and my coding skills went up a level after this challenge. You can view links to the completed projects in the Readme file.
This project creates a social media selector menu using HTML, CSS, and JavaScript. Clicking the button shows a list of social media platforms and selecting one updates the button text.
This digital clock was built using HTML, CSS, and JavaScript, with no external libraries or frameworks. The clock displays the current time with hours, minutes, and seconds, and updates in real-time. The design is sleek and minimalistic, making it easy to read and use.
30 HTML5 & CSS3 Projects in 30 Days Challenge and Beyond
Add a description, image, and links to the 30dayscodechallenge topic page so that developers can more easily learn about it.
To associate your repository with the 30dayscodechallenge topic, visit your repo's landing page and select "manage topics."