Blog

How To Create a Sticky Social Bar / Fixed Social Bar Using HTML / CSS Step 1 : Loading Font awesome CDN in HTML and Adding Dummy Content (Lorem ipsum) <!– Load font awesome icons –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– The social media icon bar –> <div class=”icon-bar”> <a href=”#” class=”facebook”><i class=”fa fa-facebook”></i></a> <a href=”#” […]

Learn how to create a skill bar / Progress bar with CSS Skills bar / Progress bar is often needed in a website, where a user want to show his skills or the progress of a given task. Via this tutorial we going to learn how to how to create a skill bar / Progress […]

Learn how to shake/wiggle an image with CSS. Step 1 : Adding HTML – Giving image path <h2> Hover on the image</h2> <img src=”https://image.freepik.com/free-photo/adorable-brown-white-basenji-dog-smiling-giving-high-five-isolated-white_346278-1657.jpg” alt=”Pineapple” width=”30%” height=”30%”> Step 2 : Adding Css img:hover { /* Start the shake animation and make the animation last for 0.5 seconds */ animation: shake 0.5s; /* When the animation […]

Learn How to Create an AutoComplete Form using HTML, CSS and Java Script Step 1) Add HTML: <!–Make sure the form has the autocomplete function switched off:–> <form autocomplete=”off” action=”/action_page.php”> <div class=”autocomplete” style=”width:300px;”> <input id=”myInput” type=”text” name=”myCountry” placeholder=”Country”> </div> <input type=”submit”> </form> Step 2) Create a JavaScript Array: var countries = [“Afghanistan”,”Albania”,”Algeria”,”Andorra”,”Angola”,”Anguilla”,”Antigua &amp; Barbuda”,”Argentina”,”Armenia”,”Aruba”,”Australia”,”Austria”,”Azerbaijan”,”Bahamas”,”Bahrain”,”Bangladesh”,”Barbados”,”Belarus”,”Belgium”,”Belize”,”Benin”,”Bermuda”,”Bhutan”,”Bolivia”,”Bosnia &amp; […]

How To Create a Popup Form Step 1) Add HTML Use a <form> element to process the input. <div class=”form-popup” id=”myForm”> <form action=”/action_page.php” class=”form-container”> <h1>Login</h1> <label for=”email”><b>Email</b></label> <input type=”text” placeholder=”Enter Email” name=”email” required> <label for=”psw”><b>Password</b></label> <input type=”password” placeholder=”Enter Password” name=”psw” required> <button type=”submit” class=”btn”>Login</button> <button type=”submit” class=”btn cancel” onclick=”closeForm()”>Close</button> </form> </div> Step 2) Add CSS: […]

There are many a times, when you’re going to need a countdown clock for your project. You may have an event, a sale, a promotion, or a game, where you want to show off the remaining time to the viewers/visitors. Well you can always opt for in built plugins, but here are the benefits you’ll […]

Via this article we gonna Learn how to create a responsive slideshow with CSS and JavaScript. Step 1) Add HTML: <!– Slideshow container –> <div class=”slideshow-container”> <!– Full-width images with number and caption text –> <div class=”mySlides fade”> <div class=”numbertext”>1 / 3</div> <img src=”img1.jpg” style=”width:100%”> <div class=”text”>Caption Text</div> </div> <div class=”mySlides fade”> <div class=”numbertext”>2 / […]