Whether you can’t tell the difference between HTML and CSS or you’re trying to perfect the website you’ve already built, there’s one thing that can take your website design to the next level—tutorials. There’s a huge wealth of resources out there to help you hone your web design skills, but chances are you don’t have time to troll through hundreds of web design websites to find the best training.
That’s where we can help. We’ve gone through the top websites and forums where web designers share best practices, and pulled together the top 8 web design tutorials worth your time. These are sorted in order of least to most advanced, so don’t be afraid to dive in wherever your skill level lands you.
Don’t Fear the Internet: Basic HTML & CSS for Non-Web Designers
It doesn’t get more beginner than these beautifully designed video tutorials; the dynamic duo of illustrator Jessica Hirsche and web designer Russ Maschmeyer turn website design tutorials into a work of art. Unless you have no idea what the Internet is (we told you it was beginner!) you can jump ahead to tutorial #2, an intro to HTML—in which they describe HTML in relation to hamburgers, complete with defining it as ‘hamburger text markup language.’ It doesn’t get more accessible (or delicious) than that.
Web Design Library: HTML for Beginners
This four-part tutorial is a great resource for beginners who have little to no knowledge of programming, as it describes the basics of HTML in layman’s terms (though not quite as accessible as ‘‘hamburger text markup language,’ we’ll admit).
1stWebDesigner: Basic Web Design Video Course
This three-part tutorial (with handy videos) is essentially a one-stop shop for web design basics, providing a thorough walkthrough of the web design process and the tools you will need. The first tutorial covers planning and wireframing, Photoshop basic tools and panels, and designing in Photoshop; the second covers HTML tags and structure as well as basic CSS properties; and the third covers complete HTML markup and applying CSS styles.
Lynda.com: Web Design Tutorials
Lynda’s subscription-based video tutorials have a wide range of courses and standalone videos on web design—203 courses and 6,506 video tutorials, to be exact. The web design fundamentals course is a great place to start, and there are copious options at other skill levels once you master the basics. Editor’s Note: For other online education options, check out our recent blog post reviewing Lynda and similar services.
w3schools.com: Skills Tutorials
Tuts+: An Introduction to Composition
Sure, you need to know about HTML and CSS to design a website—but you also need to know where everything should go. That’s where Tuts+ comes in, with a handy tutorial on web page composition. After all, it doesn’t really matter how clean your code is if users can’t find what they’re looking for.
Codrops: Web Design Tutorials
Now that you’re well-versed in how to build a website from scratch, we have good news—you don’t have to. Codrops has put together an awesome cheat sheet of basic ready-to-use CSS styles that definitely earns a spot on your bookmarks bar. In addition, the Codrops web design tutorials library has a huge selection of detailed how-to posts for almost any functionality you want to build into your site.
Treehouse: Build a Responsive Website
Once you’ve mastered the basics of web design, the next step is to make the site responsive—that is, the design should change depending on the visitor’s screen size and resolution, so users will have a great experience from any and all devices. That’s easier said than done, though. Fortunately the folks at Treehouse have a comprehensive set of tutorials for getting your site mobile-ready in no time. Editor’s Note: Make sure to check out our list of great responsive website examples to give you an idea of what to aim for.
Did we miss any of your favorite website design tutorials? We’d love for you to share them in the comments section below! Or if you’d like to get some expert help, check out oDesk’s listings of freelance web designers.