Tips & Tutorials – HTML & CSS

Javascript Restaurant Food Ordering System (With Code Download)

Welcome to a tutorial on how to create a restaurant food ordering system with Javascript. Yes, you read that right, Javascript-only. There are no server-side databases, and only minimal NodeJS involved. But be warned, this is not a “complete ordering system”, but more of an experiment of mine to see how far we can go with …

Javascript Restaurant Food Ordering System (With Code Download) Read More »

Simple Tabs With AJAX Pure Javascript (Free Download)

Welcome to a tutorial on how to create responsive tabs with Javascript and CSS. There sure are a lot of “tab plugins” on the Internet, but how do we create one that loads content with AJAX? Here is a quick sharing of my version, without any dependencies on third-party frameworks. Read on! ⓘ I have …

Simple Tabs With AJAX Pure Javascript (Free Download) Read More »

Drag and Drop Sortable List With Javascript (Simple Example)

Welcome to a quick tutorial on how to create a drag and drop sortable list with HTML and Javascript. Once upon a time in the Dark Ages of the Internet, implementing drag-and-drop is a massive task that involves a lot of coding with 3rd party libraries. But ever since HTML5, it has been made a …

Drag and Drop Sortable List With Javascript (Simple Example) Read More »

Reset HTML Form After Submission – Simple Examples

Welcome to a quick beginner’s tutorial on how to reset an HTML form after submission. So you are working on a form that needs to clear after the user submits it? There are 2 mechanisms in HTML and Javascript to take note of when it comes to resetting forms: Use document.getElementById(“FORM”).reset() in Javascript to reset …

Reset HTML Form After Submission – Simple Examples Read More »

Fade In and Out With Pure CSS Javascript (Simple Examples)

Welcome to a tutorial on how to fade in and out using pure CSS and Javascript. So you may want to fade in a section on selection, or maybe fade a button out once it is clicked on. Some libraries provide a convenient fade function, but we really don’t need to load an entire library …

Fade In and Out With Pure CSS Javascript (Simple Examples) Read More »

6 Ways To Display Messages In HTML Javascript (Simple Examples)

Welcome to a quick tutorial on how to display messages in HTML and Javascript. Just started with Javascript and wondered how to display a message? The common ways to show messages in HTML and Javascript are: Alert, prompt, confirm. Output the message to the developer’s console. Dialog box (popup box). Message bar. Inline messages. Toast …

6 Ways To Display Messages In HTML Javascript (Simple Examples) Read More »

How To Overlap (Or Layer) Elements In HTML & CSS

Welcome to a tutorial on how to overlap or layer HTML elements. So you want to create your own overlapping elements? Maybe a customized popup dialog boxes, a “now loading” screen, or an overlay menu. To overlap or layer HTML elements: Set the position of the elements to relative, absolute, or fixed. Then, use z-index …

How To Overlap (Or Layer) Elements In HTML & CSS Read More »

Very Simple Popup In Pure HTML CSS JS (Free Download)

Welcome to a quick tutorial on how to create a simple popup with HTML, CSS, and Javascript. I am sure there are tons of popup plugins all over the Internet, but some of them depend on 3rd party frameworks and add too much loading bloat. So here it is – We will walk through a …

Very Simple Popup In Pure HTML CSS JS (Free Download) Read More »

Show/Hide HTML Elements With Animation (Simple Examples)

Welcome to a tutorial on how to show/hide HTML elements with animations. So you need to toggle the visibility of an element, but with bells-and-whistles? Here is an easy example to show/hide an HTML element with a fade effect: The HTML element – <div id=”fade”>TEXT</div> The CSS classes: #fade { transition: opacity 1s; } .hide …

Show/Hide HTML Elements With Animation (Simple Examples) Read More »