Tips & Tutorials

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

Welcome to a tutorial on how to create a responsive horizontal list in HTML and CSS. So you need to create a horizontal list in your project? Maybe to show a list of hashtags? Well, let’s walk through a real quick example – Read on!     TABLE OF CONTENTS Download & Demo HTML Horizontal

BOOKMARKS Bookmarks are pretty much “links within the same page”. Give the element an id. For example – <h1 id=”intro”>Introduction</h1>. Create an anchor tag as usual, and link to the element with #ID. For example – <a href=”#intro”>To introduction</a>.   ID NAME RULES Alphanumeric characters (A-Z a-z 0-9) accepted. Cannot start with a number, can

Welcome to a tutorial on how to create a Gantt Chart with pure HTML and CSS. Want to include a Gantt Chart in your project? Without using complicated and bloated libraries? Yes, it is possible with the modern CSS grid – Read on for an example!     TABLE OF CONTENTS Download & Demo HTML

Welcome to a quick tutorial on how to create a countdown timer using pure CSS only. Want to create a countdown timer without any Javascript? Yes, it is possible with modern CSS animations and keyframes – Read on for the example!     TABLE OF CONTENTS Download & Demo CSS Countdown Extras The End  

Welcome to a tutorial on how to create a simple bounce effect with pure CSS. Once upon a time in the Stone Age of the Internet, we have to work with all kinds of third-party plugins to do simple animation. Fast-forward today, things are so easy with CSS animation. To create a simple bounce effect