HTML & CSS

Welcome to a tutorial and example on how to create a custom video player with a playlist. Want to build your own video player and add a playlist to it? Sadly, things are not that straightforward. There are no native implementations of a video playlist in HTML and Javascript. The only way to create a […]

Welcome to a quick tutorial on how to get the HTML form data in Javascript. So you have an HTML form but want to do the processing in Javascript instead? To get the HTML form data in Javascript: Create the HTML form as usual – Give the form an ID, and attach a name to

Welcome to a quick tutorial on how to create a grid in Javascript. Need to display some data in a nice grid? Gone are the days when we have to use crazy tables and CSS hacks. To create a grid in Javascript: Define a grid container and specify the number of columns in HTML CSS

Welcome to a tutorial on how to add a watermark to images in Javascript. Want to lessen the server load? Add a watermark to an image before uploading? Yes, it is possible using a canvas. To add a watermark to images in Javascript: Create a canvas element and image object. var ctx = document.createElement(“canvas”).getContext(“2d”); var

Welcome to a quick tutorial on how to create HTML lists from JSON data in Javascript. Want to dynamically generate a list from JSON data? To create an HTML list from JSON data: Parse the JSON data into an array first (assuming it is a flat array) – var data = JSON.parse(DATA); Loop through the

Welcome to a quick tutorial on how to add and remove list items in Javascript. Need to dynamically update an HTML list in Javascript? To add a list item in Javascript: <ul id=”myList”></ul> var li = document.createElement(“li”); li.innerHTML = “Item”; document.getElementById(“myList”).appendChild(li); To remove a list item in Javascript: var myList = document.getElementById(“myList”); var items =

Welcome to a tutorial on how to create an HTML list from a Javascript array or object. Need to display an array of data nicely? To create an HTML list from an array in Javascript: Create the HTML list var ol = document.createElement(“ol”); Loop through the array and append list items for (let i of

Welcome to a tutorial on how to create a very simple Progressive Web Application. Just heard of this “PWA” thing and wondering how to get started? Well, let us walk through a barebones PWA example in this guide – Feel free to use it as a template in your own project. Read on!