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 …
3 Ways To Clip Or Crop Images In HTML CSS (Simple Examples) Read More »
Want to show some text or an image caption on mouse hover? Yes, we can do that without a single line of Javascript – Let us walk through a few simple examples in this guide. Read on! ⓘ I have included a zip file with all the source code at the start of this tutorial, …
Text Over Image On Hover With HTML CSS (Simple Examples) Read More »
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> …
How To Create A Box Around Text In HTML (The Easy Way) Read More »
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 …
HTML Form Validation Without Javascript (Simple Examples) Read More »
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 the 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” …
How To Disable Pinch Zoom With HTML Viewport (A Quick Guide) Read More »
Welcome to a quick tutorial and examples on how to freeze rows and columns in HTML tables. Want to “fix a table row or column” in HTML? Only to find out that there are no direct ways in HTML? The possible ways to freeze or fix a row/column in HTML and CSS are: Limit the …
4 Ways To Freeze Rows & Columns Of HTML Tables (Simple Examples) Read More »
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 quick tutorial on how to auto-resize images in HTML and CSS. Just started with HTML CSS and struggling to fit images? The easiest way to create an auto-resize, scale-to-fit image is to set 100% width on it – <img src=”IMAGE.JPG” style=”width: 100%”/> Yes, that’s all. We don’t need even crazy Javascript calculations …
3 Ways To Auto Resize Images In HTML CSS (Simple Examples) Read More »
Welcome to a step-by-step tutorial and example on how to create a full-screen loading spinner, with vanilla CSS and (a little bit of) Javascript. Looking to add a “now loading” splash screen, but can’t seem to find a decent one? Well, let us walk through how to create one yourself – In pure CSS and …
3 Steps Simple Full Screen Loading Spinner in Pure CSS JS Read More »
Welcome to a quick tutorial and examples of how to create a responsive background video. Want to set a video as the background? Sadly, CSS can only set images as the background at the time of writing. To create a responsive background video, the general idea is to set a video tag as the background and …
3 Simple Ways To Create CSS Responsive Background Video Read More »
