Helper Duo for Web Designers: Htmlreference.io and CSSreference.io
All of us have large references of our favorite tech publishers in our shelves, and we know the monumental guide sites à la SelfHTML and others. Oftentimes, we wouldn't even need the massive encyclopedia, as a slim helper would suffice to do the trick. Just checking something real quick. What was that again?
For this exact purpose, there are two visual helpers for HTML and CSS. Both were made in the same forge, and can barely be told apart visually. Nonetheless, you'll get help on HTML at htmlreference.io and support on CSS at cssreference.io.
Behind the two short references and the slim framework Bulma, which is the technological base of both sides, is the self-proclaimed CSS guru Jeremy Thomas. Thomas funds himself via sponsors and the occasional writing of short e-books.
[caption id="attachment_104358" align="aligncenter" width="1024"] Helper #1: The HTML Reference[/caption]
At first sight, the two short references almost seem to be a bit too slim. However, this impression bears no substance and is more of a compliment to the maximally reduced display of the complex topic.
The HTML reference covers all elements and attributes. You're not forgoing anything. The CSS reference, on the other hand, does not have this claim to completion. It covers 129 of the most popular CSS attributes. Most likely, you won't miss anything here either.
From the landing page, you can either find your topic via the list of elements or attributes. Or, you use a free text search, to take you straight to the goal of your curiosity. A click on an element or an attribute gets you to the corresponding detail page.
[caption id="attachment_104356" align="aligncenter" width="1024"] Helper #2: The CSS Reference[/caption]
Here's where you'll find all the required information. With HTML elements, this can be usage instructions, as well as the available attributes, or similar essentials. Thomas always gives you an example at the very beginning. This allows you to see the respective element in action, as well as as a source code, giving you a visual idea of the correlation between the two.
Definitely, make sure to add Jeremy's references to your toolbox.
Photo by Campaign Creators on Unsplash