We are going to use JavaScript to detect which key is pressed in keyboard. We will track an event listener to know the key code and key name of the key that is being pressed and show it in webpage.... Read more
In this tutorial, we are going to learn to hide/show HTML element on scroll inside a webpage. Source Code : <style type="text/css"> .more-stories{ display: none; position: fixed; bottom: -50px; right: 10px; width: 350px; background: #fff; padding: 20px 40px; } .more-item{... Read more
JExcel is a lightweight JQuery plugin that enables us to create a Microsoft Excel like environment in our webpage. Source Code : <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>JQuery Excel</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/4.6.1/jexcel.css" rel="stylesheet"> </head>... Read more
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> <head> <meta... Read more
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... Read more
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 : https://youthsforum.com/programming/php/google-analytics-ga4-realtime-api-using-php/ Please follow these steps to develop your own Google... Read more
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" content="width=device-width, initial-scale=1"> <title>Live Code Editor</title> <link rel="stylesheet"... Read more
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... Read more
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: 100px;... Read more
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. Source Code : <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style... Read more
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"> </head> <body> <div class="fan fan-1"> <div class="core-part"> <div class="wing... Read more
In this tutorial, we will be learning to create sticky navbar on scroll using CSS and few lines of JavaScript code. Source Code : <style type="text/css"> body{ background-color: #aacad6; margin:0; } .sticky{ position: fixed; top:0; width: 100%; } .header{ background-color:... Read more
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; } .box{ background:bisque; border-radius: 15px; box-shadow: 3px... Read more
In this tutorial, we are going to design a webpage with parallax effect using HTML and CSS. Source Code : index.html <!DOCTYPE HTML> <html> <head> <title>Design Parallax Scrolling Webpage using HTML and CSS</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <link... Read more
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... Read more