If you’re new to web design you’ll find yourself confronted with a vast amount of information. This is very frustrating if you are uncertain where to begin. When I first began as a web designer, I frequently found myself confused and disheartened and wishing someone would just tell me how and where to begin. I was searching for a “step 1″ — and not just any “step 1,” but an authoritative “step 1.”
Unfortunately, in the dark days of table-based layouts, missing DOCTYPE’s, animated gifs, infamous non-standard HTML tags like “marquee” and “blink” and a complete lack of adherence to standards based web design, knowing how and where to begin was almost impossible. Fortunately, for experienced designers and those new to the field, web design has come a long way in the past several years. And even though knowing where to begin can still be a challenge, there is far more clarity and authoritative information available than ever before to help you know where to start.
This article will be the first in a series on how and where to begin as a web designer. It is my hope that these will be the kind of articles that I was searching for when I first set out to design my first website. There are a lot of excellent sites out there with great tutorials on how to advance as a web designer, but not as many on where to start as a web designer.
When I first began, I remember being confronted by a tremendous amount of information that apparently was all related to building websites. I remember going into the bookstore and seeing those massive phone book style web design reference books and feeling completely overwhelmed and not up to the challenge. I knew I needed to know HTML, but based on all the information online and in the twelve pound “how to” books, apparently, before I could build a website, I also needed to know JavaScript, PHP, Flash, ActionScript, MySQL, Photoshop, Dreamweaver, GoLive, Fireworks, Illustrator, CSS, XML, AJAX, jQuery, XHTML, DHTML, HTML DOM, and the list goes on. What a nightmare. I was confused. Especially when I compared the massive amount of information with all of the exceedingly crappy websites I encountered on a daily basis. Really? It takes this much information to build all of these really crummy websites? Okay. Maybe this isn’t the right thing for me. Well, the truth is, it doesn’t require all of this information. In fact, you can be an exceptional web designer without the “how to” phone book. An exceptional contemporary web designer has a firm grasp on HTML, CSS, standards based web design, the principles of user experience and interactive design and, to round things out, some understanding of the fundamentals of graphic design. The rest is just icing on the cake.
So, what do you need to be an exceptional web designer? Let’s begin with step 1.
Step 1: HTML
The only thing you really need to know to build a website is HTML or “Hyper Text Markup Language.” And you’ll be happy to know that HTML is easy to learn. And though a purely HTML site will look boring, and will be limited in its interactivity, it will contain all of the content you intended to place on your website. This is your first lesson: the purpose of HTML is to display content. This is why you can build a fully functional website with only HTML. At the end of the day, a website is all about displaying content — your text and images.
Before you can begin learning HTML you will need to download an HTML editor. There are several available online for free, or for a reasonable fee, or if you’d prefer something really fancy, you can spend several hundred dollars on a WYSIWYG (”What You See Is What You Get”) editor like Dreamweaver. If you want to go the Dreamweaver route, that’s fine, but I highly recommend learning how to hand code your websites in a simple HTML editor. You will have far more control over your website and a much greater understanding of how a website and the Internet works. Plus, you’ll be surprised to discover that learning how to use a program like Dreamweaver is more complicated than learning how to hand code your HTML.
Here are my recommendations for learning HTML:
First, start with the people who actually make the rules: the World Wide Web Consortium. The W3C has an excellent online school with easy to follow tutorials — and it’s free! The lessons even include a built in HTML editor to try out. This is a great place to start if you’re not ready to download an HTML editor.
Visit www.w3schools.com/html/default.asp to begin learning HTML now.
Once you’ve spent some time learning the basics of HTML at W3C Schools, visit www.lynda.com for easy to follow video tutorials. But be careful, lynda.com has plenty of tutorials on all kinds of cool website design related topics, so it’s easy to get sidetracked — just stick to the HTML at first. Lynda.com is a subscription based website so there is a monthly fee. They do offer the first several tutorials on each subject for free, but to get the full content you will have to bust out your credit card. The monthly fee is reasonable, especially when you take into consideration the cost of web design books and magazines.
Visit: www.lynda.com
Once you’ve learned some HTML you can then advance to learning CSS or “Cascading Style Sheets.” CSS is the code that gives “style” to your website. It adds a layout to your content, adds color, controls typography, allows you control over how your links appear — and this is just the beginning of what CSS can do for your website. By learning only HTML and CSS, you will have the power to create beautiful and highly functional websites. To see the kind of sites you can build with HTML and CSS, visit www.csszengarden.com for several excellent examples.
Once you’ve mastered, or at least have a firm grasp on HTML and CSS, you can then start to investigate all of the other cool web design related stuff that I mentioned at the beginning of the article. Stuff like JavaScript, jQuery, ActionScript, PHP, etc. You may be asking yourself, “Wait, what kind of HTML do I start with? I’ve seen HTML 4, DHTML, XHTML — and now I’m hearing something about HTML 5. Which one?” These are all versions of HTML, the newest one being HTML 5. I recommend adopting the rules of XHTML, which is simply a more strict version of HTML. HTML 5 is not yet in widespread use, but, once it becomes the standard, all of your XHTML pages, and the XHTML you’ve spent learning, will work just fine as HTML 5. Once you’re comfortable with HTML and XHTML, you can check out HTML 5 which has some very cool new tags like the <canvas> tag and the <video> tag.
In the next article, I’ll discuss CSS. Subsequent articles will include more advanced information on HTML and CSS, plus information on graphic design, and how to use software like Photoshop and Illustrator for your websites.
