Everything Just Seemed To Click

My  path to HTML CSS proficiency probably mirrors the path taken by the majority of PhotoHow2′s visitors.  I’m a photographer, and I wanted to find an inexpensive way to represent my photography online.  Basically, I needed a virtual business card, I was interested in developing websites, and I figured the time was right to jump in.

Finding an online HTML school and learning HTML code wasn’t my first priority–my journey started with a Blogger/Blogspot website–Google’s free content management system (if you’ve ever wondered what the difference is between the two, check Isasc Yassar’s blogpost).  I wanted my introduction to website development to run as smoothly as possible, but what I found was that Blogger, as the name implies, isn’t really set up for photographers looking to post photos online.

My search for a simple gallery setup to showcase my photography online eventually led to WordPress, and WordPress led to a theme called Minimatica.  Getting to know the dashboard and how pluggins worked took some doing, but the results were well worth the effort (have a look at my photography portfolio to judge for yourself).  When I started working with WordPress, everything just started to click.

“The First Rule Of Intelligent Tinkering Is To Save All The Parts.”  –Biologist Paul R. Ehrlich

If you’re logged into your WordPress website right now, navigate to the dashboard, click on “Appearance,” and then “Editor.”  Do you see what I see?  Tinkering heaven.

Actually, what I used to see on the editor page, until just recently, was an unintelligible mess of code and the real possibility of destroying everything that I had previously accomplished with my website project.  Sane WordPress tinkerers find themes that do what they need to do, and then use the theme’s option panel to customize their website’s look and functionality.  Fledgling coders create child themes before tearing into HTML and CSS revisions (for more on creating a simple WordPress child theme for your website, see this article).  But the truly adventurous go back to school.

My Four Favorite Free Ways To Learn HTML and CSS Online

That’s right–at some point curiosity got the best of this WordPress jockey, and education became the best way to keep me from wrecking my website.  Again, my first inclination was to find free online resources.  Online HTML and CSS classes abound, but I was looking for HTML tutorials for beginners which featured clear instruction and hopefully enough media to keep my attention fixed.  After researching many possibilites and working on through the tutorials in fits and starts, I settled on a series of tutorials that I think are the best (of course, opinions may vary).  So, here’s a quick rundown of my four favorite online HTML schools.

HTML Dog

The first website that I tried for learning HTML and CSS was htmldog.com.  I was immediately drawn to the site’s simple interface and the fact that the website’s developer, Patrick Griffiths, had written a book on the subject (HTML Dog: The Best Practice Guide to XHTML and CSS).  The information presented on the website is, as Griffiths explains, “comprehensive (yet concise and entertaining).”  I liked the fact that HTML Dog presented tutorials for beginning, intermediate, and advanced coders.  And most of all, I liked the site’s witty style and clear instruction.  The only drawback for me was the site’s lack of video tutorials.

HTML.net

If you’re working on a Windows machine (I’m a Mac), then give www.html.net a try.  They provide HTML, CSS and PHP tutorials, and even though they lack the wit you’d find if you go with the Dog, the classes are easy to follow and offer top-notch instruction.

W3Schools

W3Schools.com bills itself as the world’s largest web development site.  They have an amazing web presence and provide up-to-date information, including tutorials about coding in HTML 5.  I like the fact that they include a free quiz and that they offer the option of seeking accreditation (although I’m only interested in building my own website at this point, taking the next step and making my coding education a little more official might not be a bad idea).  W3Schools also includes a “Try it yourself” online editor, so there’s no need learn about text editors before you start.

On the negative side, W3Schools’ website incorporates a bit of what I call “Voodoo Web Design” (in other words, navigation hampered by advertising that looks almost identical to content), and like the other sites, W3Schools doesn’t do video.

TutsPlus: My Favorite Online HTML School

All of the previously mentioned websites provide the kind of instruction that can take a coder from absolute noob to knowledgable HTML and CSS user, but Tuts+ does the same thing with style–and video.  In fact, the net.tutsplus.com tutorial, “30 Days To Learn HTML and CSS: A Free Tuts+ Premium Course,” consists of thirty different video tutorials starting with “Hello World” using TextEdit or NotePad (text editors that neophytes are encouraged to quickly abandoned for more advanced coding tools), and finishing with a complete website.

All of the videos are presented by Jeffrey Way, the head of web development courses at Tuts+ Premium.  Each video lasts between ten and twenty minutes, and packs a huge amount of information into well structured lessons on subjects like, “Parent-Child Relationships,” “Heading Tags,” “Relative and Absolute Positioning,” and “How To Create Snippets.”  Lessons are fast paced–perfect for video tutorials since the viewer can pause at any time to type code into their text editors or to refresh their browsers when updating their website projects.  There’s no fluff–just the facts.

Overall, professional production values, relevant course material, and the fact that all lessons are delivered as easy to understand video tutorials, puts the TutsPlus course way ahead of the other HTML/CSS courses available online.  There’s a great deal of information out there for anyone who wants to learn the basics of HTML and CSS, but “30 Days” has my head reeling with code snippets and design ideas–now I feel like I’m ready to build my own website.