Tips & Tutorials

1 Minute HTML CSS Part 13 – Image Map

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

1 Minute HTML CSS Part 13 – Image Map Read More »

1 Minute HTML CSS Part 12 – Images

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

1 Minute HTML CSS Part 12 – Images Read More »

1 Minute HTML CSS Part 11 – Lists

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

1 Minute HTML CSS Part 11 – Lists Read More »

Responsive Accordion In HTML CSS (No Javascript)

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

Responsive Accordion In HTML CSS (No Javascript) Read More »

1 Minute HTML CSS Part 10 – Table Sections & Groups

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

1 Minute HTML CSS Part 10 – Table Sections & Groups Read More »