Achievement unlocked: Hypertexter
Congratulations to you—you made a freaking website using HTML! What started as a sentence or two written in Notepad became a full-blown, multipage website. You learned all sorts of stuff:
- Creating HTML pages
- Structuring content with headings and sections
- Linking to other webpages
- Formatting text
- Quoting text with block quotes
- Displaying data with tables
- Hiding content behind a clickable summary
- Creating secondary content using asides
- Embedding images
- Embedding video
- Using third-party web components
- Putting a website on the internet
- …and more besides!
I hope you feel empowered to create your own custom websites. But even if you don’t create websites from scratch, familiarity with HTML is helpful. Many content management systems allow you to put custom HTML on a page. Even knowing how to use the <a>
tag to create a link is its own little superpower.
So, where to now?
Bonus chapters
We’ve completed the main content I wanted to cover in HTML for People. That said, I have a few topics I’d like to expand upon as an appendix to the main book.
- Customizing Simple.css. Even without learning much CSS, you can change the appearance of your Simple site by overriding a few variables.
- CSS basics. This side quest teaches you how to make a nicely designed webpage from scratch using CSS.
- Reusable HTML with PHP. We’ll look at how to reuse chunks of HTML—like a nav menu—using PHP includes. This is a programming-lite introduction to dynamic websites.
Resources from this book
I peppered in quite a few links along the way, pointing you to various demos and documentation. For convenience, here is a list of the main ones.
- Blake’s Homepage demo. This is my version of the site this book teaches you how to make. If you followed along and made your own site, I’d love to hear about it.
- Blake’s Homepage source code. This is the code repository for the demo site. Here, you can browse all the code and download it if you’d like.
- Blake’s Homepage, PHP version. This is another version of the source code where I converted the site to PHP as described in the bonus chapter, Reusable HTML with PHP.
- Planets of the Solar System demo. This is a demo of the page we’ll build in the bonus chapter, CSS basics.
- Planets of the Solar System source code. This is the code repository for said webpage.
Helpful resources and documentation
- MDN. If you need details about a particular HTML tag, CSS property, or other specific technical info, this is the best place to get it. MDN is more or less the official user manual for website making.
- Neocities and Neocities FAQs. I chose to use this web hosting service in the book because it’s free and has a similar ethos (people-focused website creation). The FAQs have a lot of good information and insight into the service if you want more information about it.
- Neocities Tutorials: A list of tutorials and resources published by Neocities. Check out their fantastic HTML course.
- Simple.css. This is the CSS framework we used throughout the book. The site has documentation on how to use Simple.css and a demo of various HTML elements.
- Butterick’s Practical Typography. An excellent book about typography and design. If you’re short on time, check out Typography in ten minutes.
- EntityCode. Here’s a reference of HTML entities you can use to reproduce special characters and symbols.
- Coolers color contrast checker. A nice tool for making sure your text and background colors have enough contrast to be legible.
Web hosts for static websites
In addition to Neocities, other good choices exist for hosting your HTML websites.
- Yay.boo: Silly name, really easy website publishing. You drag and drop a folder, pick a name, and your website is online. The free tier puts a yay.boo link in the corner of your site.
- Glitch: This is a good option if you’d rather code everything directly in the browser. Build it, then publish.
- Netlify: More sophisticated, but has a drag-and-drop-folder-to-publish feature and gives you more developer-centric features.
Code editor alternatives
I used Visual Studio Code as my code editor throughout this book. And for good reason—it’s free and massively popular. But it’s not the only code editor around.
I use a Mac, so I’m not as familiar with editors for other systems, but I know a few that you should check out and evaluate yourself. Some are free, some are paid, and some are both.
- Sublime Text: Cross-platform with an unlimited free trial (will occasionally nag you to pay). Sublime Text was the standard in web development until VS Code took the throne. It’s still quite good, though. Super fast and lightweight. The plugin-in/extensions system is more difficult to use, but you may not need any if you do basic HTML/CSS, as it has good support for those right out of the box.
- WebStorm: One of the many paid IDEs (integrated development environments) from JetBrains. It’s cross-platform and has a ton of features. It’s pricey but has a 30-day free trial. People love it. I haven’t used it much, so I can’t say much except that it has a solid reputation.
- Zed: Cross-platform (Mac and Linux, with Windows “coming soon”) and free. This one feels like a mix of VS Code and Sublime Text and has a lot of hype around it at the time of this writing.
- Nova: Mac-only and paid (but with a free trial). This is the sequel to Coda, a beloved web dev editor for Mac by the same developer (Panic). Panic apps are always fantastic, so give Nova a look if you’re on a Mac.
- NotePad++: Free and open source editor for Windows. I can’t say much about it other than it has been around for a long time.
- BBEdit: One of the oldest Mac apps around that is still actively developed. BBedit is paid but has a free trial and a free-forever mode that limits you to a particular feature subset.
- Glitch: Yes, this is the same one listed above under web hosts. Glitch is a good option if you want to work “in the cloud.” It provides a web-based interface for making websites, including creating files and editing code. Everything is in the browser, which is a good option if you don’t want to bother downloading and installing things on your computer.
- Many, many more. There are far too many to list, but if none of these suit your fancy, query your favorite search engine and brace yourself for the deluge of results.