10 Hand-Picked Tutorials for Beginning Web Designers

So you’re starting to show interest in web design, but are having trouble figuring out where to start? Want to create awesome websites, learn how to code HTML/CSS, and learn about web standards and the user experience? If so, we have a list of hand-picked Envato tutorials that should get you started on your journey!

First Things First

Before you dig into all of these great tutorials written by very talented designers and developers, remember one thing: nothing is impossible and if they can do it…so can you – just like I did few years ago. I began traversing design-related forums (Envato wasn’t present at the time), dug into every web design related post I could find, tried things myself, experienced trial and error until I finally created my first website (which was pretty bad). Don’t be shy to ask for help, we are a great community filled with love to share our knowledge for free! That said, here is a list of, in my opinion, great beginner-level tutorials, which will help you understand the terms “web” and “design”, teach you how HTML and CSS work, and how you can do it all by yourself. Let’s begin.

Please note: some tutorials listed here are part of the Plus Membership program. More info about Plus Tuts could be found here.

Let’s Start with Color Theory…

“The Importance of Color in Web Design”

All too often, I see a great design concept with a poor choice of colors. Part of what makes a great web design “great” is layout, typography and color. When each of these aspects work to compliment each other, great design is born.

Visual Hierarchy in Web Design

On a daily basis I view all sorts of websites and all kinds of designs. One thing in common with successful templates on ThemeForest or with websites around the web is strong visual hierarchy. Often times I see templates that have a great concept going but has poor visual hierarchy. I’ll cover what visual hierarchy is and some great examples in this article.

Common Mistakes in Web Design

Many rejected templates here on Themeforest suffer from the same few common mistakes: typography (font, line-height, letter-spacing, color), alignment (grid), and spacing (padding). In this tutorial, we are going to take a closer look at how to avoid these common errors.

CSS: The Very First Steps

This one is for those who are hoping to take their first steps into web design. This 70 minute Plus video tutorial will assume that you have zero knowledge of CSS. Over the course of the screencast, you’ll learn about the basic syntax, a plethora of different properties, and how to create the beginnings of your very first website.

Design and Code Your First Website in Easy to Understand Steps

In this tutorial, we’re going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give you the tools to write your own standards-compliant websites! It’s a brand new week; maybe it’s time to learn a new skill!

30 HTML Best Practices for Beginners – Basix

The most difficult aspect of running Nettuts+ is accounting for so many different skill levels. If we post too many advanced tutorials, our beginner audience won’t benefit. The same holds true for the opposite. We do our best, but always feel free to pipe in if you feel you’re being neglected. This site is for you, so speak up! With that said, today’s tutorial is specifically for those who are just diving into web development. If you’ve one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!

Without further ado, let’s review thirty best practices to observe when creating your markup.

Moving on…

Now that we’ve a basic understanding of theory, and have learned how to design and code a very basic web page, we are ready to move on a bit further. The following articles and tutorials are here to teach you more about the web design process and best coding practices.

Elements of Great Web Design: The Polish

When I put together designs, I usually do so in two phases – Layout and Polish. During the layout phase, I place the main objects on the page usually finishing with something that looks relatively complete. In the second stage – the Polish – I go over the design and adjust colors, type treatments, shadows, layers, and generally clean it all up. In this first of a series of tutorials on web design, we’ll be looking at the Polish.

Designing a Family of Websites

The tutorial I’ve added today is called “How to Design a Family of Website Designs” and is a step-by-step follow-along of a set of WordPress blog designs that I recently did. Because the Photoshop skills involved aren’t that advanced, I’ve spent more time talking about why certain things are done.

From PSD to HTML, Building a Set of Website Designs Step by Step

Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!

Last, but Equally Important…

Be Inspired, but Don’t Copy

There’s a thin line between inspiration and copying. We are surrounded with objects and art in our every day life. Finding inspiration for a design is an easy task these days. In this article, I will guide you through the design process of a website I recently finished. I will provide images of websites that inspired me to create a new and unique web layout.

A Freebie to get you Started…

30 Photoshop Web Elements, Backgrounds and Icon Sets (via GraphicRiver)

When you’re designing or building a website, chances are you’re going to need various little elements designed. I personally tend to reuse a lot of the same buttons, menus, icons and so on. Since we launched GraphicRiver earlier this year though we’ve seen a lot of cool little web graphics coming in, in the form of web elements, backgrounds and icons. So I’ve compiled 30 of the best to give you a flavour of what is available over there. Of course don’t forget if you just need a complete PSD design template to build off you can grab those at ThemeForest!

We’re not Done Yet…

Take a few minutes and read these great interviews by some of the leading names in web industry. You’ll be amazed by how much you can learn from these guys!

… and more. Read all of the interviews here.

Final Thoughts…

Every new beginning is tough; the same holds true for web design. I remember myself when I was first learning: hours of HTML/CSS debugging, all while the solution was right there in front of me; but hey, we learn from our mistakes and repetition. I wish I had access to the Tuts+ network when I was first beginning. It could have saved me a lot of time and frustration. Consider this article as the starting point, if you find yourself taking the first steps into this industry. Any questions?

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at [email protected].

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.