For those interested in building websites and diving into the world of programming, learning HTML is often the go-to place to start. Its a simple, straightforward markup language that is necessary for building web based programs and apps. It defines the structure and content of the pages that are displayed in a web browser.
The practical reasons for learning HTML grow in size every year, especially since the release of HTML5 (the newest version of HTML). It is now completely possible to build exciting, fully animated, multiplayer games in a web browser. Thus, many first time programmers have good reason in choosing to learn HTML as the very first step in their quest to make the next hit social game.
Now, although the name is misleading, learning HTML is only the tip of the iceberg when it comes to making an HTML5 game. I don't want to disappoint anyone when they realize that the making of an HTML5 game often involves more technologies and languages than just HTML5 itself...
Nonetheless, the reason I've gathered all of you here today is to share with you my favorite resources for learning HTML. But wait! I know what you're thinking: "Nicole, there are plenty of blog articles exactly like this out there on the internet... the last thing I want is more links to sites like W3Schools or Wikipedia."
Well, person of the internet, do not fear! I'm a very practical person.
You see, I personally do not learn all that well by reading, especially when it comes to something hands-on like programming. My whole life I have struggled to read text books because the information I read never seemed to stick with me past the last sentence. It wasn't that I had poor reading comprehension skills; I could easily understand the content and think that I was learning. ...But when I actually attempted to apply the knowledge, it was like I was back to square one.
The other issue I have is that I'm very impatient. I immediately want to get into new content. I have a very low tolerance for tutorials that progress too slowly over easy material. I get frustrated when people talk too slowly in videos. I just want to learn as quickly as possible.
Thus, the resources I've listed here are efficient. They work. They are hands-on, or interesting and quickly paced enough that I personally did not get bored or lose interest. There are plenty of other articles and resources out there with great suggestions for learning HTML, but these are what I have personally found to be the most helpful to me. Hopefully you'll find them helpful as well!
Codecademy HTML&CSS Course
For the absolute beginner, Codecademy is a great resource. There are plenty of free lessons available that provide hands-on, interactive challenges. They also offer many more advanced lessons with the purchase of a premium membership subscription, but I personally do not think its worth buying just for the HTML content. If you want to take full advantage of everything else that codecademy has to offer, then by all means, go ahead and try it out. However, if you are just interested in learning HTML, the free lessons are more than enough to get you set up with my other recommendations.
Learn HTML in 15 Minutes
Derek Banas is by far the absolute best video instructor on YouTube that I have ever found. My issue with other tutorials and videos is that they are incredibly long and boring. Derek has found a way to cut out all of the unnecessary jumble and go over all the basics of HTML in just 15 minutes, in a very efficient and user friendly way. Seriously, go watch this video. It will change your life. He has made videos on many other languages and topics as well, so go support his Patreon if you're interested.
I feel very strongly that the best way to learn programming is by doing. However, some people have difficulty just playing around programming in a sandbox environment. Some people need a challenge; a goal. The link I provided was one of the only sites on the internet that I could find that had a list of HTML/CSS challenges. (...Maybe a sign I should develop some myself to share?) Go ahead and try your hand at these challenges! The more you practice, the better you will get. Try to think about what sorts of things you want to accomplish with HTML/CSS and challenge yourself to make them!
W3Schools for Reference
Now I know I said I wasn't going to post a link to W3Schools or Wikipedia... but honestly, it is good to have at least one site like this for reference that explains how each of the different tags are used. Use it like an encyclopedia. Sometimes I like to browse the different sections and end up realizing that a particular tag ever existed.
View and Edit Source Code
Did you know that the html and css of all webpages on the internet are visible to you? You can actually go to any webpage you'd like on the internet and look at its source code. This can be helpful as you can see how other sites use HTML to structure their pages. There are many ways to do this, but my favorite way is to use the Developer Tools in Chrome. Simply right click on any element on a webpage and select "Inspect". A UI will popup that will show you the HTML nicely formatted, and all the CSS style being applied. You can even make changes to the HTML and CSS locally to see how the changes impact the layout.
There you have it! All of my favorite resources for learning HTML! Let me know your favorite resources in the comments below!