Tips & Tutorials

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 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>&#9888;</i>

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%

Welcome to a tutorial on how to display HTML code as text. Want to add an HTML code snippet to your website? But the <TAGS> automatically gets parsed as a part of the webpage? To display HTML code as text, simply replace < with &lt;, and > with &gt;. For example: &lt;strong&gt; Hello World! &lt;/strong&gt; &lt;p&gt;

Welcome to a quick tutorial on how to get the HTML code from websites. Is there a certain website that you find interesting? Want to know how it works behind the scenes? Or maybe you just need to email a part of the website to someone. In most modern browsers, there are a few ways

Welcome to a tutorial on how to disable pinch zoom with the HTML viewport meta tag. Having some trouble with your website design on mobile devices? Is it zooming in too much, or zooming out too far? Well, here’s a quick fix. To disable pinch-zoom in HTML, simply add <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>

Welcome to a tutorial and examples on how to add CSS in HTML. Just started with web development and wondering how CSS styles are added into HTML? There are actually a couple of ways to do it: Inline CSS, by adding a style attribute to the HTML tag – <p style=”color:red”>Demo</p> Internal CSS, by inserting

Welcome to a tutorial on how to create simple arrows and animate them using pure CSS only. Want to add an arrow icon to a block of text? Create an “arrow button”? Or add an arrow to a menu item? The easiest way to attach an arrow is to use HTML symbols and CSS content.

Welcome to a quick tutorial on how to keep HTML footers at the bottom. Once upon a time in the Dark Ages of the Internet, we have to use all sorts of crazy negative margin, position, and CSS hacks to stick a footer at the bottom. But thankfully, we are long past that painful age.

Welcome to a quick tutorial on how to remove or reset CSS styles from an HTML element. So a certain element on your webpage is showing the wrong CSS styles and needs to be reset? To reset a single CSS property for an element – #ID { PROPERTY: initial; } To reset all CSS styles