How To Teach Yourself Web Design

Yes, it is perfectly possible to teach yourself web design. I asked around this week to see how people managed to acquire the skills and I tried to remember what worked for me.

learning-web-design-first-lesson

There are three main ways you can teach yourself web design.

  1. By doing. People learn by actually creating websites.
  2. By using online resources. Everyone at some point finds answers online about how to design websites.
  3. By reading. This one surprised me. Most designers say they learn web design, in part, by reading books.

So, let’s go through each of these categories to find out how to teach yourself web design.

1. Learning web design by doing

The best way to start to understand web pages is to look how existing websites are put together and build them yourself.

Observe how other websites work

To start off, most web pages on the internet are written, at least in part, in HTML. In order to see the HTML that creates this page you need to “View Source” in the browser you are using. Try going Cmd/Ctrl-U (for Firefox), go Cmd/Ctrl-Alt/Opt-U (for Chrome), and if you’re using Internet Explorer, you really need to ask yourself if web design is the right career path for you.

Try looking through the HTML to see how the different elements on a web page are marked up. You may be able to identify certain tags straightaway. For example <p> is for paragraph, <h1,2,3> are headings, <img> is for an image, etc. You will notice that most of these tags work in pairs to denote the beginning and end of the mark up, for example <p>Text here</p> shows the opening and closing of the paragraph tag with the slash (/) preceding the closing tag. Other tags don’t work in pairs, for example the image tag self closes <img src = "http://robcubbon.com/images/rob.jpg" /> this instructs the browser to display an image with a particular web address as the source (src).

learning-web-design-second-lesson

Another thing you might notice from the HTML source is that all HTML pages have similar structure. They all start with a <!DOCTYPE> declaration saying which version of HTML it’s in, followed by an <HTML> declaration, followed by the <head> of the document which is a container of various elements including links to scripts, style sheets, the meta information, etc. After the <head> comes the <body> where the elements of the web page are marked up.

Exercise: Select all the source code of this page into a NotePad (PC) or TextEdit (Mac) document and save it to your computer as “test.html” or something. Open this file in a browser and it should look exactly the same as the online version. Now turn off your connection to the internet and see what the test page looks like. Pretty different, huh? Try to work out why.

Tools of the trade

While you’re doing this, there will be certain tools you’ll need.

  • Multiple browsers and smart phones. Try testing your own sites on different browsers and phones (this is where you’ll start a long standing hate affair with Internet Explorer).
  • Text editor. You may use the basic NotePad (PC) or TextEdit (Mac), or maybe Coda (Mac) or Dreamweaver – don’t use Dreamweaver in the visual mode, just work on the code, you need to understand how this stuff works under the hood.
  • Validator. Validate your web pages with the HTML Validator and the CSS Validator (use a browser plugin like Web Developer for Chrome to call on them quickly).
  • Chrome Developer Tools and Firebug for Firefox. These tools help you understand CSS and JavaScript which, if you thought HTML was difficult, do take some understanding.
  • Graphics and image editors. Central to web design are image editors like Photoshop or Fireworks. These are quite expensive but there is GIMP plus a host of online image editors if you’re just starting out.

learning-web-design-third-lesson

Creating your own static HTML websites

While your understanding of HTML, CSS and JavaScript grows you should be creating static HTML sites, either locally or on a web server. Continuously play with the code to try to do cool things. Try to recreate certain elements in other websites by copying bits of the code.

Although the websites you eventually create are not likely to be made from HTML files, it is vital you understand how to create static HTML sites first before you can start using PHP and/or Content Management Systems (CMSs) to create HTML.

Creating your own websites with CMSs

Most websites are created by CMSs – software that can create HTML pages within specified templates. The best ones are WordPress, Joomla and Drupal, but there are a host of lighter, open source CMSs you can experiment with, these will teach you how PHP, and with other CMSs, ASP, are used to piece together websites.

Use MAMP (Mac) or WAMP (Windows) on your computer to run these systems locally so that you can get a good understanding of how they work.

Using image editors

You will need to know how to use Photoshop or something similar. You will need this to create graphics for the site as well as to provide complete visuals of how the site will look when finished to aid the design process.

Get designing

Of course, I haven’t mentioned that the resulting websites will not only have to validate, work, be found by search engines, serve a purpose and be marketed but also … they have to look good.

In order to improve your artistic eye, regularly produce work and then try to better it. Sketch designs on paper then work on them in Photoshop or whatever graphics program you have. Practice will help you become a better designer. I will be recommending more resources later that will help you with design principles.

learning-web-design-lesson-four

2. Online resources

When people want answers they go to the internet and “Google it” or search YouTube. Web design is no different. There are many resources that will help you online. First and foremost there is W3 Schools which web designers refer to as the best online self teaching resource, there is also Tizag. Some people recommend Lynda.com although I’ve not used it personally.

Blogs

There are a number of great design blogs out there. There are big ones that can help you like SmashingMagazine, WebDesignerDepot, 1stWebDesigner and the Envato network.

Personally, I get more from the independent web and graphic designers who blog. There are, however, loads that I have learned from over the years so here are just a few and I apologise to any excellent bloggers that I’ve left off the list.

Please feel free to add your favorite design blogs in the comments below.

Forums

When you are bashing your head against a brick wall forums are great places to get answers. Post a description of your issue and the web address and very often someone will get back to you with a solution. Here are some of my favorite forums.

I like Estetica Design Forum, DesignForums.co.uk, and Designer’s Talk. There’s Digital Point and Sitepoint for more wider ranging queries, the WordPress forum is excellent and there’s the Warrior Forum for internet marketing.

3. Books

Many web designers maintain that good old-fashioned physical books have helped teach them web design. Here are a few of my favorites and some others that have been recommended to me. The links are Amazon.com affiliate links.

There are many more books I could have included especially about design theory. If you have any suggestions of books that have helped you with web design, please let us know about them in the comments.

What you can do

Many designers maintain that failure is actually the best teacher. So get out there and design websites! When, as undoubtedly will happen, you come across a brick wall, you can use some of the online resources here to help you. And, when you can’t look at the computer screen any more, you can read a book about it!

I would love to hear your suggestions of web design resources and tips for teaching yourself here in the comments. Plus, ask me here if there’s anything you’re stuck on at the moment.

And you can download my e-book on how to run your own design business.

Did you enjoy the article? If so, please share!

Download my 2 free e-books and 2 free MP3s on running an online business & getting clients

Plus a list of my 12 favorite resources for online business

two free books and two free mp3s and a list of favorite online tools

Comments

  1. says

    Great post for a newbies like me :) I’ve learned some web design basics by watching youtube videos and now I’m going to take some private lessons to make the things faster.

      • says

        Yep, Love Envato. Their Graphic River offshoot has some great content, easily matches the quality of Dreamstime/Shutterstock/iStock etc.

        Lynda.com also have some quality tuts. Full courses run a little steep but there are also subscriptions that can fit most budgets.

        • says

          Yes, me too. They do FreelanceSwitch and PSTuts+ too. A few people recommend Lynda as well, but I’ve never wanted to spend the money. :)

    • Steve says

      Thanks for recommending Tuts. I started their free “30 days to learn HTML & CSS” course yesterday and completed the first 3 days’ lessons before bed. So far the lessons are very informative, the presentation is put together well, and the instructor is easy to follow.

  2. Divyesh Patel says

    I have been teaching myself web-design and development for over a year now, I thought my input may matter to you.

    I am a formally trained graphic designer. And I have learnt enormously from reading four books listed below (all O’Reilly).

    JavaScript: The Definitive Guide: Activate Your Web Pages (Definitive Guides)
    HTML & XHTML: The Definitive Guide (6th Edition)
    CSS: The Definitive Guide
    Ajax: The Definitive Guide

    I recommend them to anyone and everyone interested in web programming, and not just in web-page designing.

    I am currently reading books on PHP and JQuery. I am at least a year or two away from becoming a web developer, but am quite confident in making web-page layouts.

  3. Martin says

    Hi Rob, I like the post, it’s been a 3 year journey for an ex print designer like me to learn web development and I concur with everything you have said. Recently, I’ve been working with a bunch of very experienced web programmers and they’ve taught me to code from scratch for each website I do, stop cutting and pasting, it make the eventual site much more efficient. And once you understand CSS a little, you must move onto mastering decendant selectors and CSS inheritance, it’s like moving out of 1st gear into 5th!!! Cheers Martin

    • says

      Hello Martin, yes, it was exactly the same for me. I got myself into all sorts of trouble copying and pasting without understanding. Once you realise with CSS that you can do everything you want to, as you say, it puts you in 5th gear! :)

  4. says

    I’ve been working with a bunch of very experienced web programmers and they’ve taught me to code from scratch for each website I do, stop cutting and pasting.

  5. Aaron Johnston says

    I’m currently learning HTML & CSS, a book from O’Reilly – HTML with CSS & XHTML. very informative book and easy to learn from it. I’m up to pace with HTML and will have mastered it soon.

    I’ve planned a project to build my own portfolio website and I’m moving on to the CSS section of the book to style it and master CSS at the same time.

    I will then move on to HTML5 & CSS3 and then some JavaScript and jQuery.

    Brilliant post by the way, there is soo many sources to from online and some of those blogs and websites you mentioned are at the forefront of knowledge passed along.

    • says

      Hello Aaron, yes, someone else recommended that O’Reilly book in the comments as well. There are certainly loads of good book out there everyone’s been reading. Best of luck building your portfolio website – it’s the most frustratingly wonderful thing! And, glad you liked the post. :)

  6. says

    if you’re using Internet Explorer, you really need to ask yourself if web design is the right career path for you

    HAHHA great! :)

  7. says

    Great article. I’m still learning web design and so far those are exactly the steps or ways I’ve taught myself what I currently know.

    The only problem is that if you stop working on webdesign or any other field then you’ll loose what you learned and have to start reviewing all the material read.

  8. Stuart M says

    Hi, i have just started learning website design to try and get a career in it. I have books and looking through online resources, its soo much fun! so far i have done most of html and a little css.

    Im so glad i starting using chrome years ago, i couldnt stop laughing at the

    “if you’re using Internet Explorer, you really need to ask yourself if web design is the right career path for you”

    • says

      Best of luck, Stuart. It’s great fun … or it can be frustrating fun but most of the time it’s great fun. Glad you liked my little joke :)

  9. says

    Just read this post and I can say it has a lot of useful information in it. Lots for me and others to go off and read.

    One thing you did touch on but didn’t really go into details and I find useful is to go and view lots of websites because you can get ideas from their design as well as inspiration on things you want to do.. Just something I like to do which maybe other people find useful too?

    Just off to read some of those blogs you recommended now.

    • says

      Hello, Sean, absolutely. You’re right you not only get inspiration from other sites but you can also find out how they did certain things by looking at the source. I’m always doing that!

  10. Colin Sizemore says

    Incredibly helpful, but I was curious. Would getting an associates in web design be a waste of time? I’m just starting out and wasn’t to sure if 2 years is the average

  11. Lee Johnson says

    Loved the article. I’ve started learning web design as I want to eventually run my own business and be my own boss.

    I’ve been reading various books that I have found helpful:
    Stunning CSS3 – A Project-Based Guide to the Latest CSS by Zoe Mickley Gillenwater
    Learning Web Design (4th Ed.) by Jennifer Niederst Robbins
    Five Simple Steps – Hardboiled Web Design by Andy Clarke
    The WebDesigner’s Roadmap by Giovanni Difeterici

    Plus a number of websites like your own (and your e-books) and podcasts. I thoroughly enjoyed “Starting a Web Design Business with John Romaine” and “Interview with Andy Sowards”. I look forward to your next broadcast.

    Keep up the good work.

    • says

      Hey Lee. Thanks for your comment and thanks for your kind words about the site, the e-books and the podcast. There’s plenty here about setting up a web design business, as I’m sure you’ve seen. Drop me a line if there’s something specifically you want to know about.

      Some great book recommendations, as well! Thanks for them. :)

  12. Jonathan Kempf says

    I love your blog Rob, but I don’t know how I feel about posts like this. While technically, web design(development) is about the tools, having a strong foundation in design principles is much more important then HTML and CSS. Those skills cannot really be taught by blogs, articles and tutorials alone. Also, the major driving force in web design nowadays is typography, and you didn’t even touch on using web fonts. Overall, a very informative post for designers who are looking to get into web design, but misleading to people who have no design background.

    • says

      Thanks, Jonathan. I disagree. Speaking as someone with no “design background” at all (by which I mean training), I think it is definitely possible to be able to teach yourself design principles.

  13. Sunny says

    Hey Rob,

    As mentioned already, a very informative blog. Kind of makes you realise that you’re not alone!

    Just curious for your opinion, but which languages do you think are used by the majority now for web design and which ones do you think will be used predominately in the next 5-10 years?

    Asking the question as I have now mastered HTML and CSS and was starting PHP. Not sure if this is the best route?

    Thanks and appreciate your thoughts..

    • says

      Hi Sunny, good question. If I was to guess, I would say HTML, CSS and PHP are great to learn for the next 5 years. Good luck! Glad you find the blog informative. :)

  14. Oksana Frewer says

    Hi Bob, I’m happy that I bumped into your blog. I’ve already made a few websites, but I never try to use SMS yet. But I’m going to do it soon. Anyway, I’ve learnt a lot over the last few days. Thanks.
    P.S. I am fully agreed with the lesson N1 about IE.

  15. Gaurav says

    Hello Rob
    Again a great post as usual, I am a great fan of yours writing skills and knowledge…..I also followed almost all blogs which you recommended. Chris Spooner, css tricks and rob cubbon are my favorite. After successfully spending 2.5 years in web design industry, I would like to recommend wpbeginner.com for WordPress beginner like me.

    • says

      Wow, I’m mentioned in the same breath as Chris Spooner and Chris Coyier there, Gaurav, that’s awesome! I agree, WPbeginner.com is a great site too.

  16. Raju Yarida says

    I cannot stop my self from Thanking you after reading this article. Many Thanks to you Robb. The blogs and e-books and all the tools you posted, they are very helpful to me as i am a beginner. Thanks for the great post.

  17. Chris says

    Greetings Rob,

    Great article! I have to say that I agree with one of the previous comments about I’d you stop doing this you will lose it. However, I think that was the case with my college instructor. I’m glad that I got my college expenses paid in full for me because the entire course was taught based on tables, Dreamweaver (which I apologize if I offended those that use it), and really outdated concepts that after graduation I found to be behind current standards. One benefit of it is that I started to see how to put ideas and thoughts together (with no “design” background) to make a basic functional website with a contact form.

    I am looking forward to teaching myself web design again so I can create my own business. I already got a few inquiries about making sites, and the info here will definitely help me on my journey.

    Keep up the good work.

    • says

      Hello Chris, thanks for popping by and leaving a comment. Yes college courses can be outdated by the time people finish them. Best of luck in your journey and let me know if you need any help. :)

  18. Jeni Gold says

    Hi!
    I’ve been learning some HTML and CSS coding…and i really want to try it out on a website! I would love to play around with creating one actually using HTML/CSS but I can’t seem to find a place to do that, all I have found are places that have a template that you fill in. Help please??

    Thanks!

    • says

      Hi Jeni, if you want to try HTML and CSS you can just write the files locally and test them out on a browser – you don’t even need to be connected to the internet. Or you can get some cheap hosting. There’s nothing stopping you.

  19. Salo T. says

    Thanks Rob. Your information is just what I need now. I have been frustrated badly trying to have others build websites for me. One company out in New York after taking my money designed a website that was non-functional and would’nt fix it. The next guy just disappeared. I have many good Domain names I want to build into full functioning websites. I hope to keep in touch with you. May God reward you for freely sharing the knowledge He gave you.

    • says

      Glad to be of help, Salo. Knowledge is power. It’s really not that difficult to build a website. It’s just a little confusing at first. :)