Counter App using HTML, CSS and JavaScript
In this tutorial, we are going to develop a simple Counter App using HTML, CSS and JavaScript. The code uses JavaScript event listener to either increment or decrement the counter value. Source Code : <!DOCTYPE html> <html>…
BS / AD Date Converter using PHP
In this tutorial, we are going to use a PHP library NepaliCalender.php to convert date from AD to BS and BS to AD. Download NepaliCalender.php library from here : NepaliCalender Use the following function to convert English Date (A.D.) to Nepali Date…
Google Analytics Realtime Traffic Viewer using Analytics API
In this tutorial, we are going to develop a complete Google Analytics Realtime Traffic Tracking tool using Analytics API. UPDATE : New tutorial is made for GA4 Realtime API :…
Live Code Editor using HTML, CSS and JavaScript
In this video, we will create a Codepen like Live Code Editor for HTML, CSS and JavaScript with Live Realtime Preview. Source Code : index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport"…
Thanos Snap Effect Using HTML and CSS
Most of us have watched the movie Avengers : Infinity War where Thanos had killed half of the universe with just one snap. Here, in this tutorial we will be creating the same snap effect using JavaScript and CSS. Follow this video for guidance : Source…
Control a circle with HTML, CSS and JavaScript
In this video, we will use JavaScript to move a circle through a webpage with left, right, up and down keys from keyboard. Source Code : <style> body{ background: #2bc198; } .circle{ border-radius: 50%; background: #1f3fdc; width: 100px; height:…
Navigation Bar Using HTML & CSS | HTML & CSS Tutorial
In this video, we are going to create a simple Navigation Bar using HTML and CSS. Also we will make the navigation bar fixed at the top of the webpage. https://www.youtube.com/watch?v=obD48HjV81w Source Code : <html> <head> <meta…
Rotating Fan Animation using HTML and CSS
In this tutorial, we are going to create a rotating fan animation using HTML and CSS. Source Code index.html <html> <head> <title>Moving Fan Animation using HTML and CSS</title> <link rel="stylesheet" href="style.css">…
News site Design with HTML, CSS and Bootstrap
In this tutorial, we are going to design a responsive news site using HTML, CSS and Bootstrap library. LIVE DEMODOWNLOAD
How to create Sticky Navbar on scroll ?
In this tutorial, we will be learning to create sticky navbar on scroll using CSS and few lines of JavaScript code. https://www.youtube.com/watch?v=RCvoPMW8X2g Source Code : <style type="text/css"> body{ background-color: #aacad6; margin:0; }…
Get random jokes with PHP using Joke API
In this tutorial, we are going to get random jokes with Joke API using PHP. Source Code : <style type="text/css"> body{ background-color: aliceblue; } .box-container{ display: flex; justify-content: center; align-items: center; height: 100vh; }…
Parallax Webpage Design using HTML and CSS
In this tutorial, we are going to design a webpage with parallax effect using HTML and CSS. https://www.youtube.com/watch?v=ZwPKyccZsFI Source Code : index.html <!DOCTYPE HTML> <html> <head> <title>Design Parallax Scrolling…
How to make Breadcrumb using HTML and CSS
In this tutorial, we are going to learn to make Breadcrumbs using HTML and CSS. A breadcrumb or breadcrumb trail is a graphical control element used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain…
Loan EMI Calculator and Payment Schedule Generator using PHP
An Equated Monthly Installment (EMI) is defined as “A fixed payment amount made by a borrower to a lender at a specified date each calendar month. Equated monthly installments are used to pay off both interest and principal each month, so that over…
Responsive Blog List Design with overlay title
In this tutorial, we are going to design a responsive blog list design using Bootstrap. The layout design comprises of a list of blog posts along with an image and title associated with it. The title is displayed over the image with gradient background…
