Skip to main content

Posts

How to Create Shopping Cart using HTML, CSS and JavaScript

See the Pen Untitled by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . How to Create Shopping Cart using HTML, CSS and JavaScript In this tutorial, you'll learn how to make Shopping Cart using HTML CSS and JavaScript. Complete this JavaScript project to practice your HTML CSS and JavaScript. Download Source Code: https://drive.google.com Source Code HTML Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SaampleKart</title> </head> <!-- css file --> <link rel="stylesheet" href="/site.css"> <!-- font awesome icon --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font...
Post a Comment
Read more

Find Your Location using HTML, CSS & JavaScript

See the Pen Untitled by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . Find Your Location using HTML, CSS & JavaScript It is against policy to access Geolocation in Blogger.com . However, you can still find your location by clicking on CodePen button and then clicking the Get Location button to retrieve your location data Source Code HTML Copy Code <div class="container"> <h1>Find Your Location</h1> <p>Your location: <span id="location"></span></p> <button id="getLocation">Get Location</button> </div> CSS Copy Code body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; } .container { max-width: 800px; margin: 0 auto; padding: 50px; background-color: #fff; border...
Post a Comment
Read more

How to Make a Professional Admin Dashboard Page with HTML and CSS | Free Code

See the Pen Untitled by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . How to Make a Professional Admin Dashboard Page with HTML and CSS | Free Code In this tutorial you will learn how to make a professional Admin Dashboard Page with HTML and CSS . You will learn to create the good looking, admin dashboard page that you can use in your web applications and it is mobile friendly. This is a tutorial geared towards beginners, who want to learn HTML and CSS website design and development and also learn how to design a cool looking Admin dashboard template. Source Code HTML Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
Post a Comment
Read more

Login Form using only HTML & CSS with Code Example

See the Pen Login Form using only HTML & CSS with Code Example by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . How to Create a Circular Scroll Progress with HTML, CSS & JavaScript A login form is an essential component of many websites and applications that require users to authenticate before accessing certain contents. Source Code HTML Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <!-- Font Awesome Cdn Link --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> </head> <body> <div class="wrapper"> <h1>Hello World!</h1> <p>Welcome to the Website</p> ...
Post a Comment
Read more

How to Add Form Validation on the Client-side using JavaScript

See the Pen How to Add Form Validation on the Client-side using JavaScript by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . How to Create a Circular Scroll Progress with HTML, CSS & JavaScript In this JavaScript guide, our focus will be on implementing client-side form validation using JavaScript. Additionally, we will explore two distinct input styles: success and error, which represent various states that inputs can assume. Source Code HTML Copy Code <div class="container"> <div class="header"> <h2>Create Account</h2> </div> <form id="form" class="form"> <div class="form-control"> <label for="username">Username</label> <input type="text" placeholder="florinpop17" id="username" /> <i class="fas fa-che...
Post a Comment
Read more

How to Create a Circular Scroll Progress with HTML, CSS & JavaScript

See the Pen How to Create a Circular Scroll Progress with HTML, CSS & JavaScript by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . How to Create a Circular Scroll Progress with HTML, CSS & JavaScript In this guide, we will explore process of using HTML, CSS, and JavaScript to design a circular scroll progress indicator. This type of indicator displays percentage of a webpage that has been scrolled. Specifically, we will create a circular indicator and position it in bottom right corner of webpage. The indicator's fill level will correspond to amount of page that has been scrolled. HTML Copy Code <!DOCTYPE html> <html lang="en"> <head> <title>Scroll Percentage</title> <!-- Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body>...
Post a Comment
Read more