Welcome to a tutorial on how to create a custom dropdown arrow using pure CSS and HTML. Yes, we can pretty much do any customization with modern HTML and CSS. But strangely, there is no straightforward way to customize a dropdown arrow in pure CSS. To create a custom dropdown arrow: Wrap the select box …
Custom Dropdown Arrow With Pure CSS (Simple Example) Read More »
Welcome to a tutorial on absolute and relative URLs, also the use of the HTML <base> tag. Getting “missing” images and files on your web page? Made sure that the path is “correct”? Well, don’t be surprised, the URL is a common confusion among many beginners. Absolute URL refers to a “full website address”. For …
Absolute Relative URL & HTML Base Tag (A Simple Guide) Read More »
Welcome to a tutorial on how to create a responsive drop-down menu with pure CSS. Yep, there are a ton of these “dropdown menu plugins” all over the Internet, but some of them require a third-party library. It really doesn’t make sense to load an entire library just for a simple menu, so here it …
Responsive Drop-Down Menu In Pure CSS (NO Javascript) Read More »
Welcome to a quick tutorial on how to create a grid in HTML and CSS. Still using tables, CSS hacks, and complicated Javascript code to create grids? It’s time to stop. To create a simple grid in HTML and CSS: Define the HTML container – <div class=”grid”> <div>Cell</div> <div>Cell</div> </div> Create a grid container and …
Welcome to a tutorial on how to create a simple pie chart using pure HTML and CSS. Need to display a pie chart in your project? But don’t want to introduce loading bloat with third-party libraries? Here’s a really simple version – Read on! ⓘ I have included a zip file with all the source …
Welcome to a tutorial on how to create a simple donut chart using pure HTML and CSS. Want to display a pie chart in your project? But without using complicated third-party libraries? Yes, it is possible to draw a donut chart using only HTML CSS – Read on for the example! ⓘ I have included …
Welcome to a quick tutorial on how to create custom error messages with pure CSS. By now, you should have experienced the intrusive default Javascript alert box. Every time it shows up, users get scared away. We can create a custom non-intrusive error message with HTML <div>. <div style=”border: 1px solid darkred; background: salmon”> <i>⚠</i> …
Welcome to a tutorial on how to create a Gantt Chart with pure HTML and CSS. Want to include a Gantt Chart in your project? Without using complicated and bloated libraries? Yes, it is possible with the modern CSS grid – Read on for an example! ⓘ I have included a zip file with all …
Very Simple Responsive Gantt Chart With Pure HTML CSS Read More »
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 …
Create Lists From JSON Data in Javascript (Simple Examples) Read More »
Welcome to a quick tutorial and example on how to expand and collapse an HTML DIV using pure CSS only. So you want to hide a section of the page, a form, or maybe even create a hidden menu? A simple way to create a collapsible DIV is to use a checkbox and CSS sibling …
