Tutorials Warehouse

Posts

Display Battery Status using HTML, CSS and Javascript

Hey everyone, welcome to Code Instinct! In this tutorial, we're going to show you how to create a battery status indicator using HTML, CSS and Javascript. This is a great Javascript project for beginners who want to learn how to use the Battery API Javascript and create a battery level indicator. We'll also be showing you how to add a battery charging animation and CSS battery shape to make it more visually appealing.Our tutorial will cover all the steps needed to create your own battery status indicator with ease. You'll learn how to use the Battery API Javascript to get the current battery level of your device, and display it using HTML and CSS. We'll also be covering the different types of battery indicators you can use and how to customize them to fit your website design. You'll learn how to create a battery charging animation using Javascript and CSS to give your battery status indicator a more dynamic look.At Code Instinct, we're dedicated to p

Image with Accordion Effect on Hover using CSS and HTML

Hey there, folks! Are you looking to jazz up your website's image galleries? Well, you've come to the right place! In this tutorial, we'll show you how to create an image with accordion effect on hover using HTML and CSS. First off, let's chat about HTML and CSS. HTML is like the building blocks of web pages, while CSS adds style and personality to your website. By combining these two, you can create some seriously cool designs that'll knock your user's socks off!In this tutorial, we're gonna be using CSS animation effects to make an accordion effect on an image when a user hovers over it. It's a slick way to add a bit of movement and interactivity to your web design. To get started, we'll walk you through creating a basic HTML structure for your image. Then, we'll apply some CSS styles to give it that fancy accordion look. Finally, we'll create a hover effect using CSS animation that'll make your image expand and colla

Glass Fill Effect using CSS Only

In this tutorial, we will be creating a glass fill animation effect without using any SVG graphics or JavaScript. We will be using only CSS to create the animation. This animation is perfect for creating a liquid filling effect on a website. The tutorial is easy to follow and can be implemented on any website. So, if you're looking to add a cool animation effect to your website, this tutorial is for you. With this method, you can create a realistic looking glass fill animation effect without the need for any additional graphics or libraries. index.html <html> <head> <title>TUTORIAL</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="glass-ctr"> <div class="glass"></div> <div class="water-ctr"> <div class="water"></div>

Create a Real Time Digital Clock using Javascript

In this tutorial, we'll be creating a real-time clock using JavaScript. We'll be using the Date object to access the current time and updating the clock display on the screen using JavaScript's built-in methods. This clock can be easily integrated into any web page, and can be customized to match the design of your website. Whether you're a beginner or an experienced developer, this tutorial will show you how to create a functional and visually appealing real-time clock using JavaScript. index.html <html> <head> <title>Realtime Clock</title> <script src="js/script.js"></script> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Oswald|Roboto:100" rel="stylesheet"> </head> <body onload="realtimeClock()"> <div class="main-cont

Scoll in Animation using ScrollMagic.js Plugin

In this tutorial, we will learn how to create a scrolling text effect using the ScrollMagic.js plugin. This powerful JavaScript library allows us to easily create complex scrolling animations and interactions. We will be using the ScrollMagic.js plugin to create a scrolling text effect that can be used to add dynamic and engaging elements to your website or web application. Whether you're a beginner or an experienced developer, this tutorial will provide you with the knowledge and tools you need to create your own scrolling text effect using ScrollMagic.js. index.html <html> <head> <title>Fade In Text On Scrolling</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans|S

Make a Simple Parallax Scrolling Effect for beginners

In this Tutorial, we will show you how to create a simple parallax scrolling effect using only CSS. Parallax scrolling is a popular web design technique where background images move slower than foreground images, creating a 3D illusion as you scroll down the page. We'll be using CSS transforms and transitions to achieve this effect, so no JavaScript is required. Whether you're a beginner or an experienced web developer, this tutorial will provide you with the knowledge you need to add a touch of depth and movement to your website. So sit back, relax, and enjoy the tutorial. index.html <!DOCTYPE html> <html> <head> <title>Parallax Scrolling</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=M

Create Side Navigation Bar using Javascript

In this tutorial, we will be creating a side menu bar using JavaScript. The side menu bar will allow users to easily navigate through your website and access different pages and content. We will start by setting up the HTML and CSS for the side menu bar, and then we will use JavaScript to add the functionality to toggle the menu bar open and closed. By the end of this tutorial, you will have a fully functional side menu bar that can be easily added to any website. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>Tutorial 8</title> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <script type="text/javascript" src="js/sidemenubar.js"></script>