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 nettuts@tutsplus.com.
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Marko Prljic
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
danmoore - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Awesome! Thanks!
WOW.. Just the post which keeps me coming back here..
Thanks for this one!
This is good. I’d recommend this post to some advanced designers too, as a reminder of the basics
wow, very nice tools
thanks for all tips
thanks alot
Nice tutorial
Thank you very much !!!
Nicely done! Great set of articles, I’m more than sure those who are just beginning will find these very helpful.
Whether it’s true or not – I think it’s better to try to give something back than just to expect and demand more.
That’s why right now I’m working on four tutorials, two of them are with screencasts
. Hope they will be accepted, so you can see some more great stuff on nettuts.com.
Thank you very much for this article..! Brilliant!
Thanks, this will be very helpful! Much appreciated.
Great articles! Thanks!
Sorry fellas, don’t mean to upset anyone, this is a pretty decent list for a new comer but does it feel like things are somewhat getting a little slow on Nettuts these days?
I mean, it used to feel like there was something fresh up fairly regulary during the weekdays and now there seem to be many more space fillers (top lists, etc).
Might be loosing it to be honest. Probably have lost it a long time ago actually and it’s getting pretty late but hey, I thought I’d throw it up.
Shoot, clicked the wrong “replay”. Anyway, I’ll say it again:
Whether it’s true or not – I think it’s better to try to give something back than just to expect and demand more.
That’s why right now I’m working on four tutorials, two of them are with screencasts
. Hope they will be accepted, so you can see some more great stuff on nettuts.com.
Nice article to outline what is need to become a web designer. Call is web design 101
Great article Marko!
Articles like this one reveal net.tutsplus commitment to those of us who are new to this field. Thank you, Marko, for this article; thank you, Envato, for this site.
Thanks for including my tutorial!
Some great stuff here
Thanks for sharing.
How does the freebie work Marko?It’s asking to pay when you click on the link. I don’t mind paying for some of the beautiful pieces of work but just wanted to make sure.
GORGEOUS GORGEOUS GORGEOUS!
great stuff, nice help.
Awesome
Thanks !
That’s awesome
Killer set. A nice refresher for all designers.
Great list. This is a God send to someone who is trying to get a head start in an industry that is genuinely becoming my passion.
Can I also thank all the other web designers out there. I’ve never known such a helpful and giving industry.
Will be working through these and hopefully one day I’ll be able to give something back.
Thanks again!!!
tnx much
I love it.
Very helpful thanks!
Exactly what i need ! Thank you !
There are some great tutorials and tools here to get your web development started, and most of them even advanced users could benefit from. The ‘Importance Of Colour in Web Design’ tool seems particularly good here, as a good design can be enhanced by a great choice of colour options.
Articles on ‘visual hierarchy’ and ‘web design polish’ are also extremely useful, helping anyone to create a website outline that functions to add interest and depth, resulting in a design that is both visually impressive and retains the readers attention.
All these tutorials are fantastic resources that I will be bookmarking for future usage. They include concepts that all designers can learn from, and advance from using. More articles like this in the future would be very beneficial as there are so many additional skills that all web developers can learn from.
Great references for beginners
Truly fantastic post, it does not only mean for beginners, but professionals too.
It is indeed very important for each web professionals to adhere to best practices and provide best solutions to the clients. And net-tuts comes handy when it comes to learn new skills..
Net tuts rocks..
Thanks for this wonderful blog post.
how about coding standards ?
Very well researched article. If I were to go back to when I was a beginner and all I had to learn was to view website’s source code, I had never even though about a tutorial. This would have been an invaluable source.
Exactly!
Great collection and great resource for those starting out. I made this one of my three links on my Design Thought for the Day blog:
http://designthoughtfortheday.blogspot.com/2010/02/02-16-dpi-truth-web-design-101-project.html
All the best, Ted
nice round-up this can be very helpful for beginners, I actually browse some tutorial sites when I look for web design lessons to teach my students…
cool and awesome!
go!go!go!
Sweet, a lil new course to study at home to go over and learn, great round up Marko! Always look forward to seeing what ya got to help people learn/study. Do wish to see you write some more of your own materials though; be nice and interesting; just sayin!
- MexiChriS
Thanks, will do of course
Great list thanks
What a packed article and full of information.
Thanks…
Time to press “Ctrl-p” (the print shortcut for those of you that still use snail mail) already!
Lovin’ it.
cool great tut, thanks alot
Thanks for a list!
Fab list of good stuff: ) – will bookmark for future reference, and to show others.
Thank you.
These are very useful tips for anyone who have interest in web designing & you can easy learn these tps.
Thank you
It’s amazing to see how much this family of sites has grown… and how little I’ve accomplished
Keep up the great work!
Great selection of tips and tools. I remember, how hard it was for me at the beginning, to find inspiration recources, tools and freebies. This is very helpful.
Great resources for a newbie….
I would recommend students and new web developers to go through this…
Thanks for sharing this great resources…
What a great web page with a simple, inteligent way to teach, for a first steps web designer (like me for example), is more than gold, infinite thanks.