Top 10 HTML Beginner Resources

Beginning with HTML

Over the past few weeks I’ve noticed a few people have been asking me if I had any tips for the best HTML beginner resources. This is something that comes up for myself once in while when needing some bit of HTML reference that I have forgotten through under-use.

In order to kill two (three?) birds with one stone I thought I would make a list for myself–in the form of a post–that I could share with those people. There are lots of sites with tutorials and tips on HTML so I didn’t see any particular need to reinvent the wheel, there are people out there better at HTML/CSS etc. than myself so why not let them do the teaching?

What I have done here is split my top 10 resources into a few areas, since although HTML is perhaps the absolute minimum to get started on the web, it’s difficult to ignore the involvement of CSS in helping to style HTML content. I’ve not gone to town on JS/MySQL/PHP/Node.js/other here because I’m not sure they qualify as beginner! Maybe another time.

HTML resources

The main reason we are here! Links to HTML resources below. Broadly speaking, HTML is the content of your web page (although it is also possible and in some cases required to style the content using HTML).

The HTML(5) Tutorial from W3Schools.com is thorough and lets you test out example code as you go along. Recommended and an old, trustworthy source of reference for many web technologies.
Codecademy have a great technical setup and a comprehensive online course that you can do. It covers CSS too (see next section) but that actually underlines the importance of the relationship between HTML and CSS.
Test the correctness your HTML live or just upload the files to the W3C Validator.
If by some freak chance the above don’t cover some aspect of HTML that you have questions about, if a quick Google doesn’t help you then consider asking Stack Overflow, a brilliant site for all kinds of programming questions, including HTML-based. Be warned though, read the rules first and you will be received in a much more friendly way!

CSS resources

CSS (cascading stylesheets) are, you guessed it, sheets that style in a cascading way. Okay, that’s vague. Essentially they apply uniform styling to the bits of the HTML that match a certain ID or class, and are typically held in different files (although they can be applied at the top of an HTML file or even alongside each element, but this removes much of the desirable ‘cascading’).

One of the most complete tutorials I’ve found is by Jakob Jenkov. If it isn’t in here, it probably isn’t a thing.
Just like the HTML validator above, there is a CSS version!
If you know what you want but can’t figure it out, the CSS generator at enjoycss.com/ may help — but please do try to understand the code or what was the point in getting the helping hand?!

HTML/CSS templates

A good way of getting started with HTML/CSS is to use existing themes. You can then see how a good designer/coder structures their content and style to make it readable and efficient, but also how to achieve the desired effect on the screen. Here are some decent sites to help the beginner in HTML in need of a boost, but remember to always read the license before using a template — in some cases you may need to pay if you plan to use one for commercial purposes, or you may need to retain some kind of attribution to the original author.

Special mention: in exchange for a mere credit on your site, templated.co offer a huge range of great looking, varied templates.
htmltemplates.net/ offer some reliable, not-too-crazy HTML/CSS templates that would suit various corporate style websites.
Similar to templated.co, html5up.net/ offer a bunch of HTML themes but with the added bonus that all of theirs are responsive to boot. Being responsive means that they will adapt to various screen sizes, which with the growth of mobile and tablet internet usage is not a bad idea at all!

Summary

I hope some of these HTML and CSS resources have been useful. My aim has been to give beginners a pointer at how to start and where to test their skills. If you need somewhere to host your code there are a number of places you can go. One interesting method I’ve seen is to use Google Drive but a search for ‘free html hosting’ should reveal at least a few options wherever you are based.

There are literally thousands of great HTML beginner resources out there; to have picked out only ten links does seem a bit silly, but I’ve had pretty good mileage with these over the years! All the same, do let me know in the comments if there are some really obvious ones missing.