Skip to main content

Posts

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
Post a Comment
Read more

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
Post a Comment
Read more

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
Post a Comment
Read more

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
Post a Comment
Read more

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>
Post a Comment
Read more

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
Post a Comment
Read more

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
Post a Comment
Read more