I’ve been surfing the web since the mid-90’s and grew up on the
Internet. However, despite the fact that I spent most of my adult life working
for some Internet and software companies (in their account management teams), I
found the idea of coding a webpage extremely daunting and lumped HTML together
with just about every programming language out there.
However, while
going through a career transition last year, I decided it was time to learn
some web development skills and spent $199 on Victor Bastos’ “Become A Web
Developer From Scratch” course on Udemy. The course covered
HTML, CSS, JavaScript as well as introductions to PHP, MYSQL, AJAX, JSON, XML, and JQuery (way more than
I needed!).
In the first
few weeks, I breezed through HTML and realized just how easy a language it was
to understand and implement. At age 33, I wondered why I hadn’t done this sooner.
While I decided to pay some money for some training with a seasoned
expert, I realized afterwards that much of the information I learned is just
scattered across the web, and those who are really driven can learn basic HTML
for free.
I have scoured
the web and found the best free beginner HTML tutorial sites to make it a
little bit easier for you. That was no easy task, as HTML tutorials like
the one you see below are a dime a dozen. In the course of our research, we
found almost 200 sites similar to the ones you see below.
 |
Do you really want an HTML tutorial
from a Web 1.0 site?
|
Where Not To Start
W3Schools is a massive wiki on HTML. If
you Google anything related to HTML, chances are it will come up in the top of
your search researches — maybe in the top three spots simultaneously! While
some of the info maybe useful, it is generally disregarded as a sham amongst experienced developers.
W3Schools is not at all an HTML expert tutorial site. It is however, an expert
in search engine optimization (SEO), which has managed to rank high for
hundreds if not thousands of HTML-related keywords. This dominant position in
online searches allows W3Schools to make money off of unsuspecting web surfers
seeking HTML tutorials, who end up on the site just to click ads. Worse, some
site visitors end up purchasing a W3Schools certification. In fact, a site
called W3Fools has been set up as a crusade to
inform people of the folly of using this site for help. So proceed with caution
at W3Schools. While some of the information may be useful, it is not always
accurate.
 |
Buyer, beware of W3Schools.
|
The Primo Stuff
Usually,
everyone likes to save the best for last but let’s not waste any time. Here,
you’ll find two things: the very best tutorials and the very best interactive
coding tutorial platforms, the latter hinting at how HTML, CSS, and web design
languages will be learned in the future. What can be better than coding what you are simultaneously learning and
watching code render into a web page, live before your eyes?
 |
Codecadamy is one of a few great free
places to start learning web development.
|
- Code Academy is an education company that provides free interactive programming lessons on various topics, such as HTML, JavaScript, Ruby, PHP and Python. You must sign in with an account but all resources are free.
- Code Avengers is a provider of interactive online tutorials that teach visitors how to code games, apps and websites with HTML, CSS and JavaScript. They offer three levels of interactive courses on HTML, CSS, and JavaScript, with more coming in January 2014.
- Shay Howe’s “A Practical Guide to HTML & CSS,” is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS, covering all of the fundamentals. This guide covers all common elements of front-end design and development. Once completed, you can move on to the advanced guide.
- Mozilla Webmaker is an interactive toolset for beginners with two useful and fun tools: Thimble and X-ray Goggles. Thimble is an interactive code editor similar to what you’d get in Code Academy but you can run any code you find in any of the tutorials on this page. X-ray Goggles lets you inspect and change code on any webpage you surf. Web maker also comes with a bunch of templates you can ‘remix’ and share.
- Site Point is a respected web development and programming publishing house that has been around since the late 90’s. They’ve published a number of great books and have a treasure trove of tutorials, books, articles, and even courses via their private course platform,Learnable.
Solid Resources
These stylishly
designed websites demonstrate that they are developed and maintained by
experts. These websites provide basic, intermediate and web tutorials,
including those on CSS for people wanting to learn more about the design
aspects of a webpage. Some of these sites focus solely on the newer web
language versions — HTML5 and CSS3 — which are essentially the same languages,
but improved to support for better-looking webpages and faster browsing. Those
who are serious about a career in web design should not merely gloss over HTML5
and CSS3, as these are the future of web and application development.
 |
The Tuts+ Network counts among the
reputable sites that provide high quality HTML tutorials.
|
- activejump is a smart-wiki tutorial page for HTML and CSS. Navigate quickly between different topics, read instructions or grab snippets of HTML code.
- Channel 9 is a video blog by Microsoft employees that demonstrates the latest trends in technology, and provides educational resources on programming and on using Microsoft services. This HTML5 course is a 21-episode series that teaches the fundamentals of HTML5 and CSS3.
- HTML Dog has step-by-step guides and tutorials on HTML, CSS, and JavaScript broken up into beginner, intermediate, and advanced categories. The guides are easy to follow and easy to read.
- HTML5-Tutorial is a no frills tutorial for absolute beginners in HTML and HTML5. It covers the basics and aims to provide the necessary skills to develop basic webpages, and when and how to use HTML5.
- Mozilla Developer Network is a daily updated wiki that offers web development articles for beginners and advanced users. The site is easy to navigate and contains guides, tutorials, and articles on HTML, CSS, JavaScript, and advanced concepts of web development.
- TutsPlus is a mammoth tutorial network with almost 5K articles on HTML-related activities alone, many of which come with downloadable project files.
- Web Design Library is a blog and mish-mash of all sorts of web design tutorials. It’s a little heavy on advertising, but actually has a lot of good tutorial content.
- Web Platform is a community site that strives to be a thorough and respected resource for web developer documentation and related concerns. It has tutorials, blogs, and a community forum.
- W3resource is a large and frequently updated tutorial wiki-site. It contains tutorials in many different subjects for beginners to advanced students, complete with code snippets.
Cures for What Ails You
These websites
have a little bit of everything and go beyond the simple building blocks of HTML.
They are for HTML learning journeymen who are looking for many perspectives on
their craft and need answers to the problems they face with current projects.
There is a plethora of information here for curious beginners.
 |
Stack Overflow is the go-to resource
for programmers. While it’s not strictly a tutorial provider, the site offers
tons of useful information for beginners who want to become excellent front-end
developers.
|
- Front End Rescue is a curated list of people, places, newsletters, websites, and podcasts, all of which are singularly focused on great web design and development. It’s definitely developed for more advanced learners but something worth bookmarking and coming back to when you are ready to kick it up a notch.
- Move The Web Forward is a another massive single-page curated learning resource list that highlights the best web development and design resources on the Internet, with content for learners of all levels.
- webdevRefinery is a specialized web development community and forum with over 16K members. It’s got content for beginners to experts and is a great place to discuss web development related issues with peers who are going through the same experiences.
- Stack Overflow is the mother of all programming forums. If you have any question you can probably find a thread about it there. Get feedback from seasoned developers and partake in conversations to help refine your craft. There is a mini-site just for HTML coding.
You Get What You Pay For
There’s a ton
of free beginner HTML tutorials out there and many of them (even the spammy
ones) will help you gain a cursory understanding of the fundamentals of HTML
and how to build a webpage. You can visit a handful of these pages and cobble
together a reasonable education. However, with a few exceptions, these guides
are static web pages with the simplest of text examples. To truly understand
HTML and put it in practice require the same elements you’d find in a college
chemistry class: a good teacher to guide you through stumbling blocks, a
thoughtful discussion around the topic, and most importantly, a live project
that allows you to see how your HTML code renders in a browser. Even the best
of free tutorial sites fall short of that. The good news is that for a small
investment (~$25/month), you can get all of the above. In fact, once you’ve got
the basics down from the free sites, it may be the only way to transform your
HTML skills from good to great. Once you are ready to step up to the next
level, Treehouse is probably the best value in paid
training. However, if you are looking to step it up a notch and get really
good, you’ll need the tutelage of seasoned front-end developers, which you can
find via Thinkfulor a coding bootcamp. Good luck
learning HTML!
No comments:
Post a Comment