Preface
Learn Enough HTML, CSS and Layout to Be Dangerous teaches you how to make modern websites using HyperText Markup Language (HTML) and Cascading Style Sheets (CSS). This tutorial includes several much-neglected yet essential techniques for page layout, including more advanced CSS techniques like flexbox and grid. It also covers the use of a static site generator to make websites that are easy to maintain and update. Finally, this tutorial shows you how to register and configure custom domains, including both custom URLs and custom email addresses. You can think of Learn Enough HTML, CSS and Layout to Be Dangerous as “a website in a box”: everything you need (and nothing you don’t) to design, build, and deploy modern, professional-grade websites.
The only prerequisites for Learn Enough HTML, CSS and Layout to Be Dangerous are knowledge of the Unix command line, a text editor, and version control with Git (as covered, for example, by Learn Enough Developer Tools to Be Dangerous). These prerequisites allow us to use good software development practices throughout the tutorial. This includes using a text editor to ensure readable code formatting and using version control to track changes in our projects. It also enables frequent deployment to production (for free!) using GitHub Pages.
The skills you’ll develop in this tutorial are valuable whether your interest is in collaborating with developers or becoming a developer yourself. No matter what your goals are—level up in your current job, start a new career, or even start your own company—Learn Enough HTML, CSS and Layout will help get you where you want to go. To get you there as quickly as possible, throughout the tutorial we’ll focus on the most important aspects of the subject, grounded in the philosophy that you don’t have to learn everything to get started—you just have to learn enough to be dangerous.
In addition to teaching you specific skills, this tutorial also helps you develop technical sophistication—the seemingly magical ability to solve practically any technical problem. Technical sophistication includes concrete skills like version control and HTML, as well as fuzzier skills like Googling the error message and knowing when to just reboot the darn thing. Throughout Learn Enough HTML, CSS and Layout, we’ll have abundant opportunities to develop technical sophistication in the context of real-world examples.
Finally, although the individual parts of this tutorial are as self-contained as possible, they are also extensively cross-referenced to show you how all the different pieces fit together. You’ll learn how to use CSS to style your HTML elements into a flexible multicolumn layout, use a static site generator to put the same elements on every page without repeating any code, and then deploy your site to the live Web using a custom domain of your choice. The result is an integrated introduction to the foundations of front-end web development that’s practically impossible to find anywhere else.
HyperText Markup Language
Part I of Learn Enough HTML, CSS and Layout to Be Dangerous, also known as Learn Enough HTML to Be Dangerous (https://www.learnenough.com/html), is an introduction to HyperTextMarkup Language, the language of the World Wide Web. It doesn’t assume any prior knowledge of web technologies (though readers of Learn Enough Developer Tools to Be Dangerous will quickly realize they got a big head start when developing a sample website using version control).
Like all Learn Enough tutorials, Learn Enough HTML to Be Dangerous is structured as a technical narrative, with each step carefully motivated by real-world uses. Chapter 1 starts with a “hello, world!” page that you’ll immediately deploy to production (!). We’ll then fill in the index page with formatted text, links, and images in Chapter 2, expanding it into a multiple-page site with more advanced features like tables and lists in Chapter 3. Finally, we’ll add some inline styling in Chapter 4, which will allow us to see the effect of simple style rules on plain HTML elements.
The result of finishing Learn Enough HTML to Be Dangerous is a mastery of the core HTML needed for making static websites. It also gives you a big head start on learning how to develop dynamic web applications with technologies like JavaScript (Learn Enough JavaScript to Be Dangerous (https://www.learnenough.com/javascript)) or Ruby and Ruby on Rails (Learn Enough Ruby to Be Dangerous (https://www.learnenough.com/ruby) and the Ruby on Rails Tutorial (https://www.railstutorial.org/)).
Cascading Style Sheets and Page Layout
Building on the simple styling techniques introduced in Chapter 4 of Part I, Part II— also known as Learn Enough CSS and Layout to Be Dangerous (https://www.learnenough.com/css-and-layout)—covers both web design with Cascading Style Sheets and front-end web development with a static site generator. We know of no comparable tutorial that brings all this material together in one place, and the result is the ability to make and deploy websites that are attractive, maintainable, and 100% professional-grade.
In Chapter 5, we’ll learn the basics of CSS declarations and values by starting with a few super-simple elements on a sample page. We’ll end with a first introduction to the essential technique of CSS selectors to target particular page elements for styling. In Chapter 6, we’ll discuss aspects of selectors that are important to get right at the beginning of a project, with a focus on managing complexity and maintaining flexibility by choosing good names for things (including an introduction to CSS color conventions).
Chapter 7 introduces two of the most important kinds of CSS values: colors and sizes. These lay an essential foundation for Chapter 8 on the box model, which determines how different elements fit together on the page.
In Chapter 9 and Chapter 10, we’ll take the page that we’ve been working on and factor it into a layout using a static site generator called Jekyll to build professional-grade websites that are easy to maintain and update. In Chapter 11, we’ll learn how to make flexible page layouts using flexbox, adding layouts for a photo gallery page (covered in Learn Enough JavaScript to Be Dangerous) and a blog with posts.
In Chapter 12, we’ll add the blog itself, showing how to use Jekyll to make a professional-grade blog without black-box solutions like WordPress or Tumblr. Because a large and growing amount of web traffic comes from mobile devices, in Chapter 13 we’ll cover the basics of using CSS and media queries to make mobile-friendly sites without violating the DRY (“Don’t Repeat Yourself ”) principle.
As a concluding step in developing the main sample application, in Chapter 14 we’ll add the kinds of little details that make a site feel complete. The result will be an industrial-strength, nicely styled site deployed to the live Web.
Finally, as a special bonus, in Chapter 15 we’ll introduce a more recent and advanced layout technique known as CSS grid. The result is a largely self-contained discussion of how to use grid to accomplish some of the same effects mentioned in previous chapters, as well as some effects you can only accomplish easily with grid.
Custom Domains
In Part III, also known as Learn Enough Custom Domains to Be Dangerous (https://www.learnenough.com/custom-domains), you’ll learn how to associate your website with a custom domain. This means your site will live at a domain like example.com instead of example.someoneelsesdomain.com—in other words, at a domain you control and that no one can ever take away.
Chapter 16 shows you how to register a custom domain, including guidance on how to pick a good domain name and a discussion of the pros and cons of various top-level domains (TLDs). You’ll also learn how to use Cloudflare to configure the DNS settings for your custom domain. As part of this, you’ll learn how to use Secure Sockets Layer/Transport Layer Security (SSL/TLS) to make sure your site is secure and how to redirect URLs for a more pleasant user experience.
Chapter 17 shows you how to use custom email addresses with your domain using Google Workspace. The result is the ability to use [email protected] instead of [email protected]. As a special bonus, you’ll learn how to use another Google service, Google Analytics, to monitor traffic to your site and gain insight into how visitors are using it.
Additional Features
In addition to the main tutorial material, Learn Enough HTML, CSS and Layout to Be Dangerous includes a large number of exercises to help you test your understanding and to extend the material in the main text. The exercises include frequent hints and often include the expected answers, with community solutions available by separate subscription at www.learnenough.com.
Final Thoughts
Learn Enough HTML, CSS and Layout to Be Dangerous covers everything you need to know to make a website for a personal homepage, hobby, or business—it’s basically a one-stop shop for all things “Web.” After learning the techniques covered in this tutorial, and especially after developing your technical sophistication, you’ll know everything you need to design and deploy professional-grade websites. You’ll also be ready for a huge variety of other resources, including books, blog posts, and online documentation. Learn Enough JavaScript to Be Dangerous, which builds on this tutorial to make a website with an interactive image gallery, is especially recommended. You can even go on to learn dynamic, database-backed web development with Learn Enough Ruby to Be Dangerous and the Ruby on Rails Tutorial.
Learn Enough Scholarships
Learn Enough is committed to making a technical education available to as wide a variety of people as possible. As part of this commitment, in 2016 we created the Learn Enough Scholarship program (https://www.learnenough.com/scholarship). Scholarship recipients get free or deeply discounted access to the Learn Enough All Access subscription, which includes all of the Learn Enough online book content, embedded videos, exercises, and community exercise answers.
As noted in a 2019 RailsConf Lightning Talk (https://www.learnenough.com/scholarship-talk), the Learn Enough Scholarship application process is incredibly simple: just fill out a confidential text area telling us a little about your situation. The scholarship criteria are generous and flexible—we understand that there are an enormous number of reasons for wanting a scholarship, from being a student, to being between jobs, to living in a country with an unfavorable exchange rate against the U.S. dollar. Chances are that, if you feel like you’ve got a good reason, we’ll think so, too.
So far, Learn Enough has awarded more than 2,500 scholarships to aspiring developers around the country and around the world. To apply, visit the Learn Enough Scholarship page at www.learnenough.com/scholarship. Maybe the next scholarship recipient could be you!