Blog

How to create a “To-do list” with HTML, CSS and JavaScript

Learn How to create a “To-do list” with HTML, CSS and JavaScript Step 1) Add HTML: <div id=”myDIV” class=”header”> <h2 style=”margin:5px”>Create a To-Do List</h2> <input type=”text” id=”myInput” placeholder=”Title…”> <span onclick=”newElement()” class=”addBtn”>Add</span> </div> <ul id=”myUL”> <li>Wake up at 5</li> <li class=”checked”>Go to GYM @ 6</li> <li>Make breakfast</li> <li>Go for Grocery Shopping</li> <li>Call Client for Briefing the […]

How to create a Password Validation Form with CSS and JavaScript.

How to create a Password Validation Form with CSS and JavaScript. Create A Form and apply Regex : Step 1) Add HTML: <h3>Password Validation</h3> <p>Try to submit the form.</p> <div class=”container”> <form action=”/action_page.php”> <label for=”usrname”>Username</label> <input type=”text” id=”usrname” name=”usrname” required> <label for=”psw”>Password</label> <input type=”password” id=”psw” name=”psw” pattern=”(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}” title=”Must contain at least one number and one […]

How to create a Sliding Full screen Curtain navigation menu with CSS and JavaScript

How to create a Sliding Full screen Curtain navigation menu with CSS and JavaScript Step 1 : Adding HTML, Creating basic Structure of the page and Menu <!– The overlay Wrap or the Curtain Menu –> <div id=”myNav” class=”overlay”> <!– Button to close the overlay navigation –> <a href=”javascript:void(0)” class=”closebtn” onclick=”closeNav()”>&times;</a> <!– Overlay content –> […]

How to Create an Off-Canvas Menu / Side Bar Navigation

How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id=”mySidenav” class=”sidenav”> <a href=”javascript:void(0)” class=”closebtn” onclick=”closeNav()”>&times;</a> <a href=”#”>About</a> <a href=”#”>Services</a> <a href=”#”>Clients</a> <a href=”#”>Contact</a> </div> <div id=”main”> <h2>Off-Canvas Menu / Side Bar Navigation</h2> <p>Click on the element below to open the side navigation menu, and push this content to the […]

How To Create a Sticky Social Bar / Fixed Social Bar Using HTML / CSS

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=”#” […]

How to shake/wiggle an image with CSS.

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 […]

How to Create an AutoComplete Form using HTML, CSS and Java Script

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 with CSS and JavaScript.

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: […]

Scroll to top