Preface
Learn Enough HTML, CSS and Layout to Be Dangerous teaches you how to make modern web-sites using HyperText Markup Language (HTML) and Cascading Style Sheets (CSS). Learn Enough HTML, CSS and Layout to Be Dangerous 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, Learn Enough HTML, CSS and Layout shows you how to register and configure custom domains, including both custom URLs and custom email addresses. You can think of this tutorial as a website in a box: everything you need (and nothing you dont) to design, using 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 youll develop in Learn Enough HTML, CSS and Layout to Be Dangerous are valuable whether your interest is in collaborating with developers or becoming a developer yourself. No matter what your goals arelevel up in your current job, start a new career, or even start your own companyLearn 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 well focus on the most important aspects of the subject, grounded in the philosophy that you dont have to learn everything to get startedyou just have to learn enough to be dangerous.
In addition to teaching you specific skills, Learn Enough HTML, CSS and Layout also helps you develop technical sophisticationthe 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, well have abundant opportunities to develop technical sophistication in the context of real-world examples.
Finally, although the individual parts of Learn Enough HTML, CSS and Layout are as self-contained as possible, they are also extensively cross-referenced to show you how all the different pieces fit together. Youll 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 thats practically impossible to find anywhere else.
HyperText Markup Language
), is an introduction to HyperTextMarkup Language, the language of the World Wide Web. It doesnt 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. , 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 PageLayout
Building on the simple styling techniques introduced in )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 , well 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).
on the box model, which determines how different elements fit together on the page.
In , well learn how to make flexible page layouts using flexbox, adding layouts for a photo gallery page (to be filled in in Learn Enough JavaScript to Be Dangerous) and a blog with posts.
In well cover the basics of using CSS and media queries to make mobile-friendly sites without violating the DRY (Dont Repeat Yourself) principle.
As a concluding step in developing the main sample application, in well 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 well 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 ), youll learn how to associate your website with a custom domain. This means your site will live at a domain like exam-ple.com instead of example.someoneelsesdomain.comin other words, at a domain you control and that no one can ever take away.
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). Youll also learn how to use Cloudflare to configure the DNS settings for your custom domain. As part of this, youll 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.
shows you how to use custom email addresses with your domain using Google Workspace. The result is the ability to use yourname@example.com instead of yourname152@gmail.com. As a special bonus, youll 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