HTML & CSS

Welcome to a quick sharing of how to organize HTML code. Well, there are actually no hard rules on “we must organize HTML code in a certain way”. But just imagine taking over someone else’s code that is in a complete mess. The code may work, but it is full of syntax errors, has crazy camel […]

Welcome to a beginner’s tutorial on how to create a box around the text in HTML. New to HTML and want to quickly create your own notification or information box? An easy way to create a box around text is to simply add padding and border. For example, <p style=”padding: 10px; border: 2px solid red;”>TEXT</p>

Welcome to a quick tutorial on how to do HTML form validation without Javascript. Once upon a time in the Dark Ages of the Internet, form validation used to be a “complicated process” that can only be done in Javascript. But ever since the launch of HTML5, things have become a lot easier. HTML offers

Welcome to a quick tutorial on how to clip (or crop) images in HTML and CSS. Don’t have Photoshop? Or don’t want to go through the trouble of installing image editors? Yes, it is possible to crop or clip images using only CSS – Read on for the examples! ⓘ I have included a zip

The Internet has an abundance of websites today, and you might have heard of HTML – “That thing used to create web pages”. So, if you receive one of these HTML files as an attachment in your email, should you be concerned? Is it possible for HTML to contain viruses and infect computers just by

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

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

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%