Web Design Tutorial > Overview | Resources | Design | Pages | Sites | Praxis

Web Design Class Overview

Welcome to my Web Site Design tutorial. I developed these materials while teaching a Web design class at the College of the Redwoods in Fort Bragg, CA between 2006 and 2010. While some of the materials are dated (6 years is forever in Web years), I’ve left this up because there are some good overviews and explanations.

  • How Web sites are structured, and how Web servers provide Web pages on request.
  • How to use a WYSIWYG editor, FTP client, and various other Web development tools.
  • Basic HTML and CSS style sheets.
  • How to design and build a simple Web site.
  • How Javascript can enhance your Web site. (Not programming—just usage of libraries.)

You’ll also learn a new way of looking at the Web—from the inside. The better you understand how things are put together, the more likely that the final creation will meet your goals for the site, and look good doing it.

There is a vast amount of material that could be taught for this class, so we will be taking a breadth-first approach to covering the material. Each student will be encouraged to more deeply pursue topics of particular interest. There will be more information than anyone can possibly absorb, but that’s OK. Don’t be intimidated by the detail!

Why do we need to know HTML? Isn’t that why we have Dreamweaver? If you know how something is built, your designs will be more informed since you will know what is possible. Most visual editors write terrible or bloated HTML code, which can be a pain to understand and maintain. If you see an effect on someone’s site, you can understand how they did it – and recreate it for yourself.

I cannot emphasize enough the importance of syntax and good typing. 90% of the errors that beginners make are either from typos or misapplication of the rules of HTML syntax. These are both alien concepts to non-programmers: (1) that you must type accurately at all times, and (2) that all of the picky details of syntax must be correct, especially including commas, semicolons, colons, and quotes. This will be the hardest thing about this tutorial for most people, since you really must pay attention to this or your code won’t work.

Some of the time, you’ll be learning how things work. Some of the time, though, you’ll just be getting familiar with things so that you know they exist when you need them. Don’t obsess about knowing every option and variation—that’s why we have ready access to references. Mark the sections in your books that have the handy reference charts for HTML and CSS syntax, or bookmark the cheatsheets you want to use.

If you already know some HTML, some of the beginning material will be basic—but necessary. If you learned HTML informally, then this will provide a good opportunity to take it to the next level by gaining a firm understanding of the key concepts.

The tutorial pages and the other references have a whole lot of words about an intrinsically visual and interactive thing. That means that the logical thinkers out there will get the words and concepts, but maybe struggle to understand the big picture. At the same time, the visual thinkers may struggle to work through the words, but will likely understand the visual concepts easily. In either case, the overall picture will click pretty quickly for most people, and it will begin to make sense.

Back to TOP Page UP Page DOWN