Tutorials Warehouse

Posts

Control Your Weights using this Javascript App - Simple BMI Calculator

Embark on a coding journey that will demystify the intricacies of web development with our comprehensive tutorial, "Creating a BMI Calculator Using JavaScript." Whether you're a novice in the realm of programming or an enthusiast seeking to augment your JavaScript skills, this step-by-step guide promises to be an illuminating experience. To kick off our journey, we'll delve into the fundamental building blocks of web development—HTML, CSS, and JavaScript. This tutorial caters to individuals ranging from absolute beginners to those looking to fortify their existing skill set. By providing a holistic understanding of these essential languages, participants can lay a solid foundation for their future endeavors in the dynamic field of web development. As we progress through the tutorial, we'll focus extensively on JavaScript, unraveling its intricacies in a manner accessible to beginners. The comprehensive nature of this tutorial makes it an ideal starting

Roll the Dice Application Using Javascript

Learn how to create a fun dice roll app using JavaScript in this easy-to-follow tutorial. Perfect for beginners and web designers looking to enhance their skills. Join us now and build your own interactive dice game! Like, comment, and subscribe for more coding and web design tutorials. Let's get rolling! index.html <!DOCTYPE html> <html> <head> <title>Tutorial</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="dice-container"> <div class="dice-text" id="diceText"></div> <div class="dice-icon" id="diceResult"></div> <button class="roll-button" onclick="rollDiceWithAnimation()">Roll the Dice</button

SIMPLE & RESPONSIVE GLASSMORPHISM LOGIN FORM using HTML & CSS

In this tutorial, we will show you how to create a simple and responsive glassmorphism login form using HTML and CSS. If you're interested in web development and want to learn how to create a sleek and modern login form for your website, then this video is perfect for you!Glassmorphism is a popular design trend that gives a glass-like effect to elements on a web page. It involves using translucent backgrounds and blurred elements to create a sleek and modern look. In this tutorial, we will show you how to apply glassmorphism to a login form using HTML and CSS. To start, we will create a basic login form in HTML. This will include input fields for the username and password, as well as a submit button for users to sign in. We will also add some basic styling using CSS, such as setting the background color and font styles. Next, we will dive into the main focus of this tutorial - creating the glassmorphism effect. We will use CSS properties such as backdrop-filter and blur

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