Want to go straight to the lessons? Get started!
Welcome to Best Practices Web Design. I’m glad you’re here. I’m Michael Tuck, owner and proprietor of Black Max Web Design, a small freelance Web design outfit. I am also an advisor for the SitePoint Web Design forums, one of the most active and user-friendly design forums on the Internet. I’ve written this site to provide tutorials and walkthroughs for beginning and intermediate-level designers, based on modern, standards-oriented best practices for HTML and CSS. It’s my contention that by going through the lessons, learning the principles I advocate, and spending some time practicing, you will learn to build beautiful, elegant, and standards-compliant Web sites. And you’ll learn to build Web sites the right way!
Full disclosure right off the bat: I am no expert on HTML, CSS, or Web design. I know experts, I work closely with experts, and I count them among my friends and colleagues. But I am not an expert myself.
So why should you follow these lessons or read a word on this site?
What I am, is a teacher, a researcher, a writer, and a Web designer. I know how to research accurate information and present it in a form that’s easy to understand, simple to follow, and designed to produce strong, desirable results.
I’ve spent a lot of time researching and learning Web design. I’ve designed dozens of sites, and, as I said above, I run my own freelance Web design business. And, as I noted above, I serve as an advisor on the SitePoint Web Design forums. I have a strong knowledge base, and more importantly, I know how to present it to up-and-coming Web designers so they can begin quickly learning how to design Web sites.
If you can’t explain it simply, you don’t know it well enough. — Albert Einstein
I began putting together this information in early 2009, for a Web design class made up of teenagers with socialization issues. In plain English, they were easily frustrated, easily bored, and impatient with anything except quick results. In the process, I had to think about how people learn, and how they choose to continue learning. In teaching them how to build basic Web sites, I had to weed out much of the theory behind Web design and keep the learning – and the perceived results – coming at almost a breakneck pace.
This site is the result of those early efforts. Much of the theory has been re-entered into the lessons, but not in large, indigestible chunks. Instead, it’s “salted” into the lessons in small, easily digestible chunks. You can skip them entirely, at least for a while, if you’re in a terrific hurry to get something done as soon as possible.
People think that design is styling. Design is not style. It’s not about giving shape to the shell and not giving a damn about the guts. Good design is a renaissance attitude that combines technology, cognitive science, human need and beauty to produce something that the world didn’t know it was missing. — Paola Antonelli
This site does two things that many other HTML/CSS lesson sites do not do. First, it presents HTML and CSS together. Designers do not separate the two, and design a site’s HTML structure before turning to the CSS. They constantly move from HTML file to CSS stylesheet and back, and changes made in one create changes in the other. You will learn to create and expand them together. (No, the two are not the same thing – far from it – but they are so deeply intertwined that I decided early on not to try to teach one without the other’s involvement.)
Chris Coyier, an expert whose opinion and skills I value, reminds us:
You can think of HTML as the content of your website: a bunch of text and references to images wrapped in tags. CSS is the design of your website. It targets the tags you wrote in your HTML and applies the style. Keeping these two things separate is key to quality web design.
He’s right. I don’t attempt to blend them, that would be pointless and idiotic. Rather, I “ping-pong” you back and forth between your HTML page and your CSS stylesheet, letting you see how one affects the other and how they work together to build your design. Some who know more than I do about Web design may not approve of this methodology. As a teacher with a score of years in the classroom, I think it’s a valid approach. (I’m a good Web designer. I’m a damn good teacher. Let’s see if it works!)
Second, I emphasize best practices – teaching you the most accurate, valid, standards-compliant, and up-to-date terminology, methods, and concepts that currently exist. Naturally, I’ve had to make some decisions as to what to include and what not to include, and some of those decisions can (and no doubt will) be questioned and challenged by others, but that’s inherent in any educational setting. As your knowledge and experience deepens, you will begin to develop questions and challenges of your own. That’s a good thing!
You have to roll up your sleeves and be a stonecutter before you can become a sculptor – command of craft always precedes art: apprentice, journeyman, master. — Philip Gerard
I’m a journeyman. If you’re reading this, you’re most likely a novice or an apprentice. If I can help you become a journeyman, or even better, a master (which means that the student will have exceeded the teacher – always a teacher’s ultimate objective), then I’ve achieved my goal.
Good luck, and have fun!
Note: Since this isn’t 1999, I don’t have an “under construction” graphic or text label anywhere on this site. But essentially, every page on this site is always under construction. I am always adding new content and fleshing out older pages. Nothing remains static. But that’s the nature of the Web, isn’t it? Anyone who tells you a site is “finished” doesn’t understand the inherently fluid, inherently mutable nature of the Internet. This site is even more “unfinished” than many. There’s no way to go through all the useful information out there, pick out the good stuff, and add it to the compendium that already exists. The best I can do is try to keep up.
You’re invited to help. Send me links to good information, or even write something for the site. Collaboration is the name of the game out here.
