Not Just CSS—But Also Layout!
Apr 16, 2020 • posted by Michael Hartl
Learning to code? Learn Enough is based on the idea that you don’t have to learn everything about tech to get started—you just have to learn enough to be dangerous. This is the fifth in a series of posts introducing the main Learn Enough tutorials. You can also read the previous one and the next one. You might also enjoy the Learn Enough CSS & Layout free sample chapters and free sample videos.
Learn Enough CSS & Layout
In “The Learn Enough HTML Difference”, I talked about how Learn Enough HTML to Be Dangerous is different from other HTML tutorials. The short version is that it puts everything together in a way most tutorials don’t, such as showing you how deploy a simple but real website to the live Web. Its natural sequel, Learn Enough CSS & Layout to Be Dangerous, is like Learn Enough HTML, only more so.
CSS—short for “Cascading Style Sheets”—is the design language of the World Wide Web. As you might expect, Learn Enough CSS & Layout (via both the online course and the ebook) teaches you how to use CSS to style websites. There are lots of tutorials that do that, though. What sets Learn Enough CSS & Layout apart?
Well, for one, other CSS tutorials don’t have Learn Enough cofounder Lee Donahoe on the team. He was the main author on the ebook, and he’s also the guide in the videos who walks a mostly design-ignorant developer (me) through the many intricacies of CSS.
More generally, most CSS tutorials teach the subject in isolation, showing you how to make individual changes to things like text color or font size, but without showing you how to put everything together as an integrated whole. In contrast, Learn Enough CSS & Layout shows you how to make websites the Right Way™ using not only CSS, but CSS & Layout. The result is a unique tutorial that students love:
First off, thank you guys as always. Your courses are so helpful and inspiring. I just finished Learn Enough CSS Layout to Be Dangerous and loved it… I love your guy’s courses and have learned so much. I hope to continue down this course and build plenty of new resources!
—Learn Enough student Thomas Osborn in an email on April 13, 2020
Sample website
To see how CSS & Layout work together, let’s take a look at the final sample application made in Learn Enough CSS & Layout, which appears as in Figure 1.
Now, every page of the site in Figure 1 has code that looks like something like Listing 1. (I’m leaving some things out here, but Listing 1 gives you the general idea.)
<!DOCTYPE html>
<html>
<head>
<title>Test Page: Don't Panic</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
.
.
.
</body>
</html>
Note the highlighted line about Listing 1, which includes the stylesheet as part of every page. That includes CSS rules like the ones shown in Listing 2. Don’t worry about the details—the point is that there’s plenty of CSS in Learn Enough CSS & Layout to Be Dangerous.
.header {
background-color: #000;
color: #fff;
position: fixed;
width: 100%;
z-index: 20;
}
.header-nav {
float: right;
padding: 5.5vh 60px 0 0;
}
.header-nav > li {
display: inline-block;
margin-left: 1em;
}
.header-nav > li ~ li {
border-left: 1px solid rgba(255, 255, 255, 0.3);
padding-left: 1em;
}
There’s something else to notice about Listing 1, though: the exact same code appears at the top of every single page. This is incredibly repetitive and—if we ever want to change anything—a nightmare to maintain.
Templates and static site generators
Most CSS tutorials don’t even attempt to solve this problem of repeated code, but as noted above Learn Enough CSS & Layout teaches you the Right Way™ to do it. The key technology is a templating system that allows us to factor repeated elements into common files (called templates) and then reuse them anywhere we want. We’ll see a concrete example of this in just a second.
Now, every good web development framework (like Ruby on Rails) lets you make reusable templates, and you can see Learn Enough Ruby to Be Dangerous and the Ruby on Rails Tutorial to learn how to do that. But such systems are complicated and typically require a significant amount of programming knowledge, which is overkill for most static websites. Instead, in this case the right tool for the job is an unsung hero of web development known as a static site generator.
Let’s see how this works with the code in Listing 1. The trick is to define a layout template for a general page on the site, as shown in Listing 3. (Please note that this is only meant to give you a taste of things. There’s not nearly enough detail in this post to make a working site—that’s what the full tutorial is for.)
<!DOCTYPE html>
<html>
<head>
<title>Test Page: Don't Panic</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
{{ content }}
</body>
</html>
Listing 3 highlights the key line, which looks like this:
{{ content }}
Note that this is not HTML; instead, it is special code that tells the static site generator to insert the content of each particular page at that point in the template (in this case, inside the body tag).
The code in Listing 3 is just a sketch to give you the general idea. In case you’re curious, the full template for the real sample website appears in Listing 4.
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="content-container">
{{ content }}
</div>
{% include footer.html %}
</body>
</html>
Listing 4 includes additional syntax that automatically includes things like the head of the page (the part with a head tag in Listing 1), a site header (with navigation menu), and a site footer. Here head.html, header.html, and footer.html are separate files that factor out elements common to all pages, and the syntax
{% include <filename>.html %}
automatically includes the corresponding file’s contents into the template. Because most of the site’s complexity is encapsulated in those included files, the main template in Listing 4 is relatively simple and easy to understand.
This sort of nearly pure-HTML code is common to static site generators in general, and once you learn one generator any of the others are easy to pick up as well. The particular one we cover in Learn Enough CSS & Layout is a powerful system called Jekyll, which was originally developed by GitHub founder Tom Preston-Werner and is supported natively by GitHub Pages.
Professional-grade websites
If you’ve followed either Learn Enough Git or Learn Enough HTML, you’ve already met GitHub Pages, a great free service for hosting static websites. Those tutorials used plain HTML example sites, but in Learn Enough CSS & Layout we knock it up a notch by deploying a Jekyll website that gets built automatically by GitHub Pages every time we do a git push.
Amazingly, both Jekyll and GitHub Pages are 100% free, and together they’re a perfect platform for deploying and hosting professional-grade custom websites. In fact, lest there be any doubt, we absolutely practice what we preach—you’re actually looking at a Jekyll site right now, hosted at GitHub Pages! The Learn Enough blog is designed, built, and deployed using the exact same principles covered in Learn Enough CSS & Layout to Be Dangerous.1
Those same principles take you from a website that looks like this:
to one that looks like this:
For more information, check out the short video I made about Learn Enough CSS & Layout to Be Dangerous:
How to get it
There are multiple ways to get Learn Enough CSS & Layout to Be Dangerous. All the different formats cover the same basic material in slightly different ways.
- The Learn Enough CSS & Layout to Be Dangerous online course subscription or ebook (including three free sample chapters).
- All Access Subscription: Get full access to the online courses for Learn Enough Command Line, Text Editor, Git, HTML, CSS & Layout, and all the Learn Enough courses for one monthly price. Includes the full 6th edition of the Ruby on Rails Tutorial.