Learn HTML – step by step study plan and resources

And so it begins! You have chosen to take your first steps to web dev – yay you. And your first milestone: learn HTML. In this piece, we’ll have a look at what HTML is, what it does and what you need to know as you get started. In a follow up article (soon), I will wrap it up with the more advanced concepts, so that, at the end, you can have the full picture.

Remember the Roadmap for getting started with web development? This article concerns the 1st leg of the Roadmap: HTML.

So, what it HTML and why is learning it the very first step in your journey to web development?

As mentioned in the Roadmap – HTML (Hyper Text Markup Language) is a standardized markup language for creating webpages. You can use it to create the backbone of a site and to add the content (text, images, audio and video). HTML marks these up so they can be interpreted and displayed correctly by the browser As you’ll see in later steps, CSS will later come in to style your page – to make it look like website, not like a plain document.

In short, using HTML you get to lay the foundations of your site. You add all your text, create your structure (headings, paragraphs, lists, tables), you add links to other pages, images, audio, video. HTML then marks these up (it is a markup language, after all) to clearly indicate to browsers what each of your pieces of content is so it, the browser, can interpret and display it correctly.

What do I need to get started learning HTML?

Well, first of all, a computer, obviously. The good news? You don’t need anything fancy – any computer will do, regardless of the operating system (Mac, Windows, Linux).

Next, you’ll need a code editor – and no, Word will not do. At a minimum, you’ll use the default text editor like Notepad if you’re on a Windows machine; on a Mac, look for something called TextEdit. These come pre-installed on your machines, you just to dig them up. If you’re using Linux , you’ll need to install a code editor – you can read this article to see how to choose one. In fact, it’s a good idea to go ahead and read the article and install a dedicated program as they come packed full of features that will facilitate your learning (such as syntax highlighting, signal errors etc.)

Finally, you’ll need a web browser – any modern browser will do – Chrome, Firefox, Safari if you’re on a Mac. Of course, since you’ll be studying using online resources – you’ll need an internet connection.

You’re all set.

OK, I’m staring at the code editor, now what?

Now you create a new document – you know File, New… and then you save it to a nice little folder that you would have created for your learning. Give it whatever name you will but be sure you save it as an .html document (with an .html extension).

Here’s what you’ll need to learn to get started:

SO, now you have your checklist for getting started with HTML. You can check them off here (they’ll stay checked off). Here’s where you can go to start learning.

Wait – you know what? Before you get into all that…

…maybe watch this What is HTML video by Jeremie Patonnier. It’s beginner-friendly, sets you off on the right foot plus he’s got this adorable French accent! In fact, to be sure you do, here it is, embedded right here!

HTML learning resources

Ok, NOW on to the resource list (in no particular order – have a go at each – repetition is the mother of learning, as you know):

FreeCodeCamp (free)

FreeCodeCamp is, without a shadow of a doubt, one of the best learning resources out there. It starts you off right where you are (complete novice) and moves you seamlessly through a ton of information without you even realising. To make sure it all sticks, it offers plenty of real-life projects, and to help your employability, there are certifications along the way. Not only that but there’s a solid world-wide community of like-minded people. Hands on, practical and informational at the same time, yu get to learn by doing and gett immediate feedback, which is always helpful when you’re learning. You also get to debug your code early on – another useful addition. You simply cannot go wrong with them but, be warned, it’s highly addictive; you’ll be coming back day in, day out, to make sure that streak is not broken!

Mozilla Developer Network (MDN) (free)

Regardless of the browser you choose to use, it’s totally worth having a look at the Mozilla Developer Network web docs page. You find here an introduction to learning HTML (obvi, or else I wouldn’t have it in the list) but OH SO MUCH MORE. As was the case before, you will be able to find plenty more resources as you progress on your path. Complete with code examples. Feel free to roam around – they have plenty of goodies wherever you look. I think you’ll be bookmarking this very quickly.

W3C Schools (free)

W3C Schools: W3C is the consortium that actually manages HTML – so it makes sense that they are a good source for learning. They have laid out their content in a very clean, straightforward fashion, with a good, clear structure, bitesized content, some very handy recommended practices, examples of code in practice and plenty of very exhaustive lists . They also provide plenty of examples and opportunities to go off and try it yourself so you can see each feature in action. As you progress, you can test your knowledge with their exercises and their quiz and you can even get a little certification while you’re at it (although the jury is still out on its utility / relevance; I’d say that a nice portfolio project would weigh way more…).

Khan Academy (always free)

The other learning site I will swear by any day is Khan Academy. Their courses, including the Intro to HTML&CSS – making webpages, have got everything – the structure, the videos, the examples, the challenges, But on top of that – there’s a tab with documentation, summarizing the essentials, You get to practice on their model code – and even make you own cool little spin-offs that you can then share so you can get feedback (and/or accolades 🙂 ) and, last but not least, there’s a transcript that may come in handy if you have any particular limitations. Oh, and there are many language versions available, in case English is not yours.

EdX (free-ish)

REALLY great site with some stellar courses (I’ll tell you more in a different article); I found it brings incredible value for free (or a small amount, should you choose the certification path (by the way, their certificates actually count for something since they are issued by *major* universities and your identity is verified at every step of the way). Have a look at HTML5&CSS Fundamentals by W3C and Microsoft on edx.org – with 300.000 people enrolled! For the free version get an account, enrol and choose Audit this course. It brings you a mix of video, background info, quick quizes,independent exploration and more.

Finally – LinkedIn Learning and Pluralsight: a couple of paid options (amazing value at a relatively small cost)

While not free – LinkedIn Learning (formerly Lynda.com) is my absolute go-to for almost all my learning. There’s NOTHING they don’t have – and this is especially true when it comes to learning HTML. Go ahead and take advantage of their free trial month and try a course (or five :)) out of their catalog of some 220 HTML-related courses. You can try the HTML Essential training and maybe see how it all fits together by also taking the Web programming foundations. The courses, absolutely all of them, are extremely well done – not just in terms of content but also in terms of the presentation and learning resources. Since their courses are all bite-sized video – you get to see, stop, think, do, rewind and so on – which is practical especially as the difficulty level (eventually) spikes. A word of warning though: you will get hooked!

Pretty much the same can be said for Pluralsight – extremely high quality, well delivered courses created by their team of some 1500 expert authors! The only difference is that Pluralsight seems to be geared mostly for professionals – but that doesn’t mean they don’t have some good beginner courses. Take this for instance: HTML Fundamentals – maybe take advantage of their 10 day trial to check it out.

A few other resources I found really helpful & well done:

• Learn to code HTML&CSS by Shay Howe
• HTML Tutorial for beginners by WebsiteSetup
• HTML Basics – main concepts and principles explained by BitDegree
• Practice web development by DevPractical (the absolute basics)
• HTML Tutorial by HTML.net
• HTML Tutorials by Landofcode.com
• HTML5 tutorial by Duncan Aitken
• HTML5 tutorial by TutorialBrain
• HTML&CSS is hard (but it doesn’t have to be) by Oliver James at Interneting is hard
• HTML Crash course for absolute beginners by Brad Traversy
• HTML for beginners the easy way by html.com
• Need a basic setup to work with? Download the HTML5 boilerplate (kind of like a template) here. Now, it says HTML – but it’s a lot more complex than that. In fact, when you first look at it, it’ll look a lot more complicated since there’s more than just HTML there – but tinker away and little by little it’ll all start to make sense. And it’ll give you a good start into the next step – CSS.

Whatever you choose to start learning HTML, it is CRITICAL to not just read and read again; practice is key. Be sure to practice each new concept, to try it out on your own – it’s really the only way to actually make progress.

Next stop: when you’re done and feel ready to move on, check out the Learn CSS – or, if your need to see the big picture, head over to the Roadmap to web dev.

All done! Get to work and let me know how these work for you and if there are other resources you think should be included in this article – drop a line in the comments below!