Tips & Tutorials

Welcome to a tutorial on how to create a simple list grid view. Once upon a time in the Dark Ages of the Internet, we have to use all sorts of CSS hacks and fight digital dragons to transform a list into a grid. But fear not, it is pretty easy with modern HTML CSS […]

Want to create a custom toggle button without 3rd party frameworks and Javascript? Yes, it is possible with some clever CSS – Read on for the example!     TABLE OF CONTENTS Download & Demo HTML CSS Toggle Button Extras The End   DOWNLOAD & DEMO Here is the download link to the example code,

ADD CLICKABLE AREAS TO IMAGE <map name=”mymap”> <area title=”Code Boxx” href=”https://code-boxx.com” coords=”219,36,383,199″ shape=”rect”> <area title=”Wikipedia” href=”https://wikipedia.org” coords=”416,405,67″ shape=”circle”> </map> <img src=”MY-IMAGE.JPG” title=”Image Title” usemap=”#mymap”> Create an image map with <map>, and give it a name=”MYMAP”. Set usemap=”MYMAP” on the image. Finally, define clickable areas in the image using <area>. title The title or caption of

Welcome to a tutorial on how to create glowing text in HTML and CSS. Need to catch the attention of users, or want to add some funky effects to your website? A block of glowing text can be easily created by using the CSS text-shadow property. For example, p.glow { text-shadow: 0 0 10px #fff700

INSERTING IMAGES <img src=”MY-IMAGE.JPG” title=”Image Title”> <img> Image tag. src Image source file. title Optional, the image title. Shows on mouse hover and when the image fails to load.   WIDTH & HEIGHT By default – Images will only be inserted into the page when it loads. This will cause the content to be pushed

Welcome to a tutorial and examples on how to create a simple sticky menu with HTML and CSS. So you need to “fix” a navigation menu on the web page, and make it follow along as the user scrolls? Read on for the examples!     TABLE OF CONTENTS Download & Notes Sticky Menu Extras

ORDERED & UNORDERED LISTS <ol> <li>ITEM 1</li> <li>ITEM 2</li> <li>ITEM 3</li> </ol> <ul> <li>ITEM 1</li> <li>ITEM 2</li> <li>ITEM 3</li> </ul> <ol> Ordered lists – Numbered. <ul> Unordered lists – Bullet points. <li> List items.   START COUNT & REVERSE <ol start=”999″ reversed> <li>ITEM 1</li> <li>ITEM 2</li> <li>ITEM 3</li> </ol> start Start from this number. reversed

Welcome to a tutorial on how to create a simple responsive accordion with HTML and CSS. Yes, you read that right, no Javascript is involved. To create an accordion using HTML and CSS only: Create a “stack” of checkbox, label, and container. <input id=”check” type=”checkbox”> <label for=”check”>Title</label> <div id=”content”>Content</div> Hide the checkbox and content by

So, you are trying to create a blinking text and/or background in your project? First, stop using <blink> that everyone else is recommending – The HTML blink tag is deprecated at the time of writing. A simple modern way to create a blink effect in HTML CSS is to create an animation that toggles the

TABLE SECTIONS <style> thead { background: red; } tbody { background: green; } tfoot { background: blue; } </style> <table> <thead> <tr><th>HEAD</th> <th>HEAD</th></tr> </thead> <tbody> <tr><td>CELL</td> <td>CELL</td></tr> </tbody> <tfoot> <tr><td>CELL</td> <td>CELL</td></tr> </tfoot> </table> <thead> Header section. <tbody> Body section. <tfoot> Footer section. These are more used for styling – Which we will cover in a