A Guide to Modern Web Development
I recently completed the HTML & CSS Is Hard tutorial (see my work here) and I want to give my honest review.
TL;DR It is great, I learned a lot, and you should totally check it out.
My job title is “Full Stack Web Developer”, and that means different things to different people, but it essentially means that I work on both frontend and backend features on a web application. If we take a closer look at the “frontend” part of that, what that really means is that I write a lot of javascript, a little bit of HTML and even less CSS, then I ask our Designer to take a look and he fixes my HTML and my CSS. I work on “frontend features” multiple times a week, but I wasn’t comfortable writing HTML or CSS. I wasn’t comfortable with not being comfortable so I decided to learn. (My, albeit not very much, experience shouldn’t turn you away, if you are a complete beginner this tutorial is still for you. Keep reading!)
In comes HTML & CSS Is Hard, an online tutorial written by Oliver James. It is a part of his Interneting is Hard series and is an incredibly well designed and easy to follow tutorial about, you guessed it, HTML & CSS. From Introduction (chapter 1), to Flexbox (chapter 8), to Semantic HTML (chapter 12), to Web Typography (chapter 14), there was a lot of information. Lets take a bit of a deeper look.
Overall Thoughts
The site and content look great. The page wasn’t jolting and the font was easy to read. I think we’ve all learned how to block out distractions from web pages but luckily, this tutorial didn’t have any.
The author assumed very little (if any) prior experience. Even the smallest things, like picking a tool to write your code in, were thoughtfully explained. That wasn’t something I needed, but I can see the need for others. If that isn’t something you’re interested in, just skip it! The tutorial also starts at a very basic level, great for complete beginners, and a nice reminder for myself.
Here is a list of all chapters:
- Introduction
- Basic Web Pages
- Links and Images
- Hello, CSS
- The Box Model
- CSS Selectors
- Floats
- Flexbox
- Advanced Positioning
- Responsive Design
- Responsive Images
- Semantic HTML
- Forms
- Web Typography
For me, Flexbox (chapter 8) and beyond are where things really got interesting. These cover what I consider the “Modern Techniques of Web Development” and are incredibly valuable. I learned what Flexbox actually was, and how to use it. How to really do responsive, mobile-first design. And about semantic HTML (I was still writing <div class=“header”>). If you are an experienced web developer and have any doubts about any of those things I just mentioned, start with chapter 8 and go from there.
How To Read the Tutorial
The author mentions this multiple times but you really should type out all of the code examples. I did, see my Github project, and you should too. That means that it will take a while to get all the way through, it took me about 30–45 minutes each chapter but it was well worth it in the end. Don’t fret if you have no clue what “Github” is, that isn’t a requirement for this tutorial and is a discussion for another day. The most important thing is to do a lot of reading and typing! Even if it doesn’t make sense at first, it will eventually.
Final Thoughts
If you are a complete beginner, this tutorial is for you. It will be a lot to take in, go through it over a couple of days, take a small break and then go through it again.
If you are someone like me, with a few years of “frontend web development” experience, this tutorial is also for you. You will probably learn something new, “Modern Web Development” moves at a staggering pace and you have to keep reading updated material for your knowledge to stay relevant.
If you are a “Web Development Rockstar”, then this tutorial may still be for you, if just to serve as a refresher.
Finally, I want to say thanks to Oliver James. I can’t begin to think how much time and effort you put into make this tutorial and you are giving it all away for free. As someone who spent the time reading almost every word and looking at basically every diagram, I can’t thank you enough. Keep doing great work!
Please subscribe to the Interneting is Hard newsletter at the bottom of the page here and follow on twitter/facebook/etc which can be found here.
