6 Web Design Tutorials For Anyone Starting Web Design

First of all, congratulations on deciding to learn web design. Every web designer has to start somewhere, where you decide to start is another story. There are very few select places that teach you from beginning to end how to become a web designer. It seems to be scattered all over the internet.

When I first started learning web design, I pretty much “winged” the entire process and spent an endless amount of time researching online for whatever answers I was looking for.

Let’s face it, you’re not going to avoid the endless hours of research, but what you can do is make the whole learning process a little easier for yourself. These 6 web design tutorials and multiple resources will kick you off in the right direction, you’re not going to become an expert web designer over night, but you’ll be on the right track.

There are a few different tutorials and resources that I feel every learner web designer needs to use, starting with learning how to design in Photoshop and ultimately coding your own website in HTML & CSS.

The Process – Design, Setup & Develop.

There are several ways to develop a website, some people use content management systems such as WordPress, Drupal and Joomla etc, others may code the website using HTML, JavaScript and CSS. There is not one single way to developing a website it all comes down to the needs of the user. For simplicities sake my goal is to explain the process for coding a website from scratch so you can understand more of how it all works.

This here is my own brief typical process to designing/developing a website. For each process you’ll find different web design tutorials to guide you through each section.

Design – First I start with designing the website and images in Photoshop.

Setup – Once complete, I setup my HTML documents (sometimes I use PHP for creating templates, but I’ll avoid that for now.)

Develop – As I’m building the structure with HTML, I’ve also created and linked a CSS style sheet to the website. I add my style references as I go along, working from the top, down (you’ll understand this more as you view the tutorials below).

It sound’s simple as I’m explaining it and I guess it is, but there are a lot more details involved and it can be fairly time consuming depending on the complexity of the website. But like I said, you’ll understand this as you read and watch the tutorials I’ve rounded up below.

Tutorial 1: Designing a website in Photoshop

These are two different tutorials that show you how to create a design mockup in Photoshop. This is the primary step for any web designer, because at some point or other you’re going to need to learn how to use Photoshop. Basically what you’re creating here is a web design concept, developing the website is a whole different process, but you use elements from Photoshop to create the actual finished product.

Tutorial 2: How to Create a Professional Web Layout in Photoshop

This is the second web layout Photoshop tutorial which is similar to the first tutorial.

photoshop-layout-tut

Photoshop references

Here are 3 references if you need some guidance using Photoshop.

Adobe Photoshop
photoshoptutorials.ws
psd.tutsplus.com

First Website Using HTML & CSS

This here is a set of step by step instructions from Code Acedemy. Basically what your doing here is your following the instructions on the left hand side and editing the documents on your right which is what you would do when you code a website (without the instructions). You’ll be editing the HTML layout and styling using CSS references. After you’ve completed each step, click save and submit code and it will take you on to the next step. I think this is probably one of the best ways to learn as you’re doing the work yourself and at your own pace. Unlike trying to keep up with a video and sometimes not learning what your doing, just following along. Give it a try and if it’s not for you, there’s another tutorial below that guides you through pretty much the same process.

Code Academy: First Website Using HTML & CSS

first-site-css
Coding up a web design concept into HTML & CSS – Line25

This is the next tutorial I was referring too that walks you through a similar process to the “First Website Using HTML & CSS”. Here you will be coding a concept created in Photoshop and you’ll be using HTML & CSS.

code-a-site

Coding References

W3Schools
Stack Overflow (Q & A’s related to web development)

Designing your website navigation

Designing a navigation is one of the most important elements to your website, knowing how to build a user friendly navigation is definitely something you should be learning to do. You start with designing the concept of the navigation in Photoshop, after you’ve created the design you need to put it together. You can build the navigation with the images you create in Photoshop or you can code the complete design using CSS, which is recommended as a CSS navigation will typically make your website load faster. Below are two tutorials, one showing you how to create a navigation in Photoshop and the other is using CSS to build your navigation. The simple white navigation tutorial was one of the first design tutorials I ever did and the second tutorial was one of the first tutorials I ever wrote. As your skills progress you’ll be making much more appealing user friendly navigation’s, but these are simple that allow for you to easily grasp the concept.

Clean White Navigation Bar

simple-white-navigation

Simple CSS Hover Over Menu

simple-css-hoverover

One More Tutorial For CSS Navigation Menus

This is a round up I created a while back of 20 CSS3 menu tutorials. CSS3 is basically an enhanced version of CSS with new features and style references for CSS. It’s not compatible on every browser, but it’s almost there. These might be of some use to you.

20 Fresh HTML5 and CSS3 Menu Tutorials

Conclusion

We’ve covered Photoshop design, HTML & CSS documents, briefly how to design and build a navigation and we’ve even got into a little CSS3. Sure, there is a whole lot more to learn, but from these tutorials you should be well on your way to developing a website. It may not be the best website in the world, but it’s a start and a learning process.

Once you’ve tried these tutorials the next best thing is to do is create your own concept and start coding. There isn’t a better way to learn web design then to just do it. If you need some guidance or advice leave a comment below and I’ll get back to you as soon as I can.

Thanks for reading..

Sign On Up..

Enjoyed this post? Please consider signing up to our newsletter by entering your email address in the form below. You will receive our recent blog updates, our exclusives, top resources and latest web trends all in your inbox. We value your privacy and will not re-distribute your email address. Plus no spam!

Author: Jake

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *