Tips & Tutorials – HTML & CSS

Move HTML Element Into Another In Javascript (Simple Examples)

Welcome to a quick tutorial on how to move an HTML element to another container. Working on a custom selection list? Or just want to move a piece of content? To move an element from one container to another: Get the element to move – var s = document.getElementById(“TOMOVE”); Get the target container – var …

Move HTML Element Into Another In Javascript (Simple Examples) Read More »

How To Add Table Rows & Cells In Javascript (Simple Examples)

Welcome to a quick tutorial on how to add HTML table rows and cells in Javascript. Need to dynamically update an HTML table using Javascript? To add new rows and cells to an HTML table in Javascript: Get the table – var table = document.getElementById(“TABLE”); Add a new row – var row = table.insertRow(); Append …

How To Add Table Rows & Cells In Javascript (Simple Examples) Read More »

How To Create A Grid In Javascript (Simple Examples)

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 good old days where we have to use crazy tables and CSS hacks. To create a grid in Javascript: Define an HTML grid container. <div id=”grid”></div> #grid { display: grid; grid-template-columns: …

How To Create A Grid In Javascript (Simple Examples) Read More »

3 Ways To Create Responsive Triangles In HTML CSS

Welcome to a tutorial on how to create responsive triangles in HTML and CSS. The common ways to create triangles in HTML and CSS are: Using CSS borders. width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid red; Using CSS clip-path. width: 100px; height: 100px; clip-path: polygon(50% 0%, 0% …

3 Ways To Create Responsive Triangles In HTML CSS Read More »

How To Get HTML Form Data In Javascript (Simple Examples)

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 a new form data object – var data = new FormData(); Assign an ID to the …

How To Get HTML Form Data In Javascript (Simple Examples) Read More »

3 Steps To Resize Images In Javascript (Simple Examples)

Welcome to a quick tutorial and example of how to resize images in Javascript. Yes, resizing images is no longer a server-side thing. We can also do it in Javascript with just a few lines of code. We can use the canvas API to resize images in Javascript: Start by creating a new image and …

3 Steps To Resize Images In Javascript (Simple Examples) Read More »

How To Crop Images In Javacsript (Simple Examples)

Welcome to a tutorial on how to crop images in Javascript. Want to lessen the server load by cropping the image on the client-side? Or just curious about how those “online image crop tools” work? To crop an image in Javascript: Create an image and canvas. var img = new Image(); var canvas = document.createElement(“canvas”); …

How To Crop Images In Javacsript (Simple Examples) Read More »