Simple Tips for Writing Great HTML & CSS
Mintbean.io hosted its first Learn-a-bit challenge, focusing on learning one bit of code at a time.
Here are some mind blowing-ly simple tips for writing great HTML & CSS from our first challenge that you can implement in no time.
Select classes in your CSS, not HTML elements
Ever wonder why a <button> HTML element has a class of .button? For example:
<button class=”button”>You’ve probably also seen:
<header class=”header”>The selectors in your CSS should be selecting by the .header class, not the <header> HTML element. So, why do this?
If you select the <header> HTML element in your CSS, this will style every <header> HTML element. But as you add different types of headers, selecting by <header> no longer becomes scaleable.
For example, you could have an article header vs. site header. You’ll want to style these by specific classes: .article_header and .site_header.
Another disadvantage when you select by tag rather than class is that your HTML markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.
Of course with every rule, there are exceptions. You’ll want to select by tag for global font styles, default colors, and CSS resets.
For more advantages on decoupling your CSS and HTML (and the exceptions too), check out why: You Need to Stop Targeting Tags in CSS
display: none actually hides an element from the DOM
As part of our first Mintbean Learn-a-bit challenge, we had to create a collapsing navbar where the menu buttons become the classic “hamburger” menu icon on mobile.
Generally, the most accepted method and best approach is to have the “hamburger” menu icon inline in the navbar on desktop but set it to display: none.
display: none actually hides the element from the DOM and removes it from the normal flow of the page. display: none also keeps it from taking up space and affecting other elements being rendered.
In contrast, visibility: hidden leaves the element in the normal flow of the page such that it still occupies space but is not displayed.
If you want the element to have a transition or fade-in effect when becoming visible, use opacity: 0. But this also keeps the element in the flow of the document.
For more on the difference between display, visibility, and opacity, check out: Hiding an Element with CSS: Display vs Visibility vs Opacity
Use an HTML entity for a hamburger icon
To create a hamburger icon, you could code up an svg, import an entire icon font library, or (painfully) build one out of CSS.
But the quickest and neatest way to render the “hamburger” icon is with the HTML entity code: ☰
Example HTML:
<span class="navigation__hamburger">☰</span>Using CSS pseudo-elements does give you the advantage of being able to animate the hamburger icon, but using the ☰ HTML entity:
- Requires no HTTP requests,
- Is scalable for high density screens,
- Can be manipulated with CSS, and
- Is so simple it’s mind blowing.
Just make sure your document is using the UTF-8 character set (which is probably already is) by placing a meta tag in the <head> of the page.
<meta charset="UTF-8" />And before creating your next icon from scratch, check out Copy Paste Character (especially the “Graphic shapes” section) for a library of HTML characters you can just copy and paste.
How to build your own homemade Bootstrap grid
Everyone knows the 12-column Bootstrap grid. But how do you code up your own from scratch?
The simple answer: Create a <div class="container"> and set margin: 0 auto.
But what happens if you’ve got elements like your navbar that go full width, but you want your content to stay on a grid?
Easy: Place your content in the <div class="container"> but style your .nav to be full width. Here’s an example — note the classes for the first 2 HTML elements:
<nav class="nav">
<div class="container">
<img
class="logo"
src="./images/learnabit-logo.png"
alt="learn-a-bit logo"
/>
<div class="hamburger">☰</div>
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Intro</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">About</a>
</li>
</ul>
</div>
</nav>You can target your .nav class to be full width. But everything in <div class="container"> stays on your grid.
If you want to know the order you should list your CSS properties and why you should link your font in HTML rather than CSS, check out the feedback doc from the first Mintbean Learn-a-bit challenge on Github for more fundamental concepts and best practices.
Join Mintbean’s next Learn-a-bit challenge
Learn-a-bit is a great way for beginners to have fun casual challenges that are focused on the fundamentals of coding in HTML, CSS, and Javascript.
There is no pressure, it is not a competition. But it does offer practice in the fundamentals that are overlooked in favor of bloated libraries and plugins.
If you want to participate in the next Learn-a-bit challenge, check out Mintbean.io.
Special thanks goes to Emsad Ahmetašević, Julio Alcantara, and Chris DiPiero for putting the Learn-a-bit challenge together.
