Tips & Tutorials – HTML & CSS

How To Create A Box Around Text In HTML (The Easy Way)

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 »

HTML Form Validation Without Javascript (Simple Examples)

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 »

How To Disable Pinch Zoom With HTML Viewport (A Quick Guide)

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 »

3 Ways To Auto Resize Images In HTML CSS (Simple Examples)

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 »

3 Steps Simple Full Screen Loading Spinner in Pure CSS JS

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 »