“Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.”
What you will learn: HTML, CSS, how to copy/paste huge amounts of random text
Duration: ~ 6 hours
Price: free on http://learn.shayhowe.com/html-css/
I found out about this HTML/CSS tutorial via FreeCodeCamp forums. The community created a couple of learning paths for wannabe web developers, and this tutorial was on the top of the list, as the first recommended resource.
At this point, I was learning front-end development for a couple of months already, and I decided to follow the study plan mentioned above, at the same time reinforcing my knowledge of HTML and CSS that was still sinking into my head slowly.
There are 12 lessons in the tutorial, and each of them is covering different aspect of making a website. Along with the tutorial, you are encouraged to make your own version of the website, for hosting imaginary speaking event. There are five different pages, with different sections and the same styling across all of them.
Each of the 12 lessons takes just about 30 minutes to read and complete the exercises. At least in the beginning…
Website looks great, and although you are hand-held in the process of making it, you still feel kind of proud on yourself as you build it.
The Good Parts
Shay Howe explains in detail not only the most basic topics (like what is a tag, a paragraph or an attribute) but he also covers some of the advanced topics (box model, flow of a page, etc.). He shows the process of making a site nicely, there are a lot of tips and tricks along the way, and at the end of the course there is a section with recommendations about how to write good code, what resources to use next for learning, etc.
For example, I struggled a lot in the past months with setting my floats and clearfixes properly, I always ended up with different sections of the website overlapping and/or not flowing properly, and for the first time, I really understood flow of the web page very well, thanks to this tutorial.
On the other hand, this tutorial has some serious issues. First of all, the audience. If you are a complete beginner, this course will go too fast for you, you will miss a lot of important things because it will teach you just what you need to make this one web site. If you want to clone it, that’s great, but if you want to make something just a little bit different, you will have to start learning again from another resource with more broad and more in-depth lessons. If you are intermediate, this tutorial will be a giant waste of time, which could be better used elsewhere really, either googling for the exact thing that you need on stackoverflow.com, www.w3schools.com etc. Six hours (or even more, as you will see later in the text) would definitely be better spent if you actually worked on your own project and learn in the process.
Another issue is that after 4-5 lessons, the assignments become really overwhelming to make, and you basically just copy and paste what the author has created because it is unrealistic to type it all by hand, and it distracts a lot from the reading material. In the first couple of lessons all goes well. Insert a couple of DIVs, add a class here and there, style it in the CSS file and that’s it. Around the middle of the course, the author starts adding hundreds and hundreds of lines of text, and you are expected to type it all, change tags for most of it during the next lessons, do it on multiple different pages without explaining a lot really. It would be so much better tutorial if the author didn’t put that much random text into it, and showed the principles on just a couple of paragraphs, so you could follow the process and do all the assignments on your own, instead of just copying and pasting huge amounts of text, without really understanding the idea behind it.
Luckily there is a .zip file at the end of the each lesson, so you don’t even have to make your own version of the website. But that kind of kills the whole idea of interactive tutorial, right?
Six+ hours is a lot of time. There are a lot of videos on YouTube which will show you HTML/CSS a lot better than this tutorial, and you won’t lose time copy/pasting nonsense. Also, you can always speed up a video on YouTube, fast forward it, etc.
You won’t properly learn HTML and CSS with this tutorial, although it will give you a perspective on what you can do with those two technologies, and a lot of resources on what to read next. It seems to me that the author couldn’t decide whether to do a beginner or a more advanced tutorial, so he got stuck somewhere in between, not actually creating a lot of value for either of those two categories.
It does feel more interesting to read this tutorial than let’s say www.w3schools.com or www.tutorialspoint.com, because it shows the knowledge put in practice, but it goes too fast and has too many lines of random code for a beginner, and lacks a whole lot of information for an intermediate learner, so in the long run it’s a waste of time for both of them.
And that’s compared to the free resources. If you have any chance dropping your hands on a Lynda tutorial, don’t even bother with this one. Otherwise, just read documentation, start making some simple web pages on your own, and when you are stuck, consult the internet for answers.