Tips & Tutorials

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

Welcome to a quick tutorial and examples on how to freeze rows and columns in HTML tables. Need to “fix a table row or column”? Only to find out that there are no direct ways to do so in HTML and CSS? The possible ways to freeze a row/column in HTML and CSS are: Limit

Welcome to a tutorial on how to create a simple donut chart using pure HTML and CSS. Want to display a donut chart in your project? But without using complicated third-party libraries? Yes, it is possible to draw one using only HTML CSS – Read on for the example!     TABLE OF CONTENTS Download

ANCHOR TAG <a href=”https://code-boxx.com” target=”_self”> Code Boxx (same window). </a> <a href=”https://code-boxx.com” target=”_blank”> Code Boxx (new tab). </a> <a> Anchor tag. Used to create links. href Where to link to. target Where to open the link. _self Open in the same window. This is the default if target is omitted. _blank Open in another tab.

Welcome to a tutorial on how to create a fullscreen overlay in CSS and CSS. Want to build a popup, fullscreen menu, or just “block” the current page? There’s no need to load an entire 3rd party framework, it’s dreadfully easy to build an overlay – Read on!     TABLE OF CONTENTS Download &