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.
There are three main ways you can teach yourself web design.
- By doing. People learn by actually creating websites.
- By using online resources. Everyone at some point finds answers online about how to design websites.
- 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 = "https://robcubbon.com/images/rob.jpg" /> this instructs the browser to display an image with a particular web address as the source (src).
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.
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.
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.
- Chris Colyer‘s CSS Tricks is a great looking responsive website but also has great web design info and tricks
- Veerle Pieters has great Photoshop and Illustrator tutorials on Veerle’s blog
- David Airey is someone I’ve followed for a while on his own eponymous blog, LogoDesignLove and IdentityDesigned. David is interested in the overarching identity of organisations amongst other things.
- Chris Spooner has taught me a lot with tutorials at his blog at SpoonGraphics and plus information and inspiration at Line25
- Fabio Sasso‘s wonderfully designed site Abduzeedo offers great inspiration and weirdness.
- Nick La‘s N.Design Studio and WebDesignerWall have some fantastic information and great inspiration.
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.
- Build Your Own Website The Right Way Using HTML & CSS 3th (third) edition by Ian Lloyd is a Sitepoint book I read years ago. It really helped me at the time as it focuses on web design best practices. Make sure you buy an up-to-date edition (at the moment the third edition which includes a lot on HTML5).
- CSS: The Missing Manual by David Sawyer McFarland includes explanations, examples, and step-by-step tutorials. This book is especially recommended as it gives you the background to CSS and includes a lot about CSS3.
- The Principles of Beautiful Web Design, 2nd Edition by Jason Beaird, maintains that design is a skill that can be learned and teaches you the fundamental principles of design.
- Color Design Workbook: A Real World Guide to Using Color in Graphic Design by AdamsMorioka (editor) provides the vital information necessary to apply color creatively and effectively to design work.
- Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug an instant classic on web usability, loaded with insights and practical advice.
- Getting Real: The smarter, faster, easier way to build a successful web application by 37 Signals may be about creating web applications not sites, but it has such a marvellous way of simplifying web processes that I found it such a useful read.
- Digging into WordPress by Chris Coyier & Jeff Starr comes highly recommended as the great WordPress book. Available as a PDF version (handy for copying code) as well as a physical version.
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.
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.
There are some great YouTube videos out there, Eric. Best of luck with the lessons!
Really accessible, learn at your own pace 30 Day course to learn the basics of HTML and CSS.
And it’s FREE!
They’re part of the Envato network, Dexter, awesome stuff!
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.
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. 🙂
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.
That’s great Steve, I wish you the best on our long, challenging and rewarding journey! 🙂
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.
That’s great to hear, Divyesh, you’re going to benefit from all that studying. 🙂
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
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! 🙂
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.
Good advice, Shane. Proper, correct, validated, clean code is the way to go. 🙂
HTML Manual of Style is a godsend.
Thanks for the recommendation, Kay.
Thanks Rob for a very informative article and taking the time to share
No problem, Rich, thank you!
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.
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. 🙂
if you’re using Internet Explorer, you really need to ask yourself if web design is the right career path for you
HAHHA great! 🙂
Glad you liked my little joke, Ali.
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.
Thank you, Wilson, glad you liked it. I guess we all have to keep working on it! 🙂
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”
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 🙂
You are going to benefit from all studying. Good advice and information. It is a great. Nice one. Cheers…
Thank you, Manish.
Am very much grateful of yr wonderful service to we guys.
That’s no problem at all, kibuuka.
Great information! Thanks for this.
No problem, Terry!
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.
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!
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
I’m not sure, Colin, certainly there are many great web designers out there who don’t have any formal training.
You need a lot more where that came from to become an good webdesigner… Well that’s my opinion 😉
Your opinion would be better backed up by some examples of what you’re talking about.
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.
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. 🙂
Thank you for publishing these details within
your website.
No problem, Bernie.
Good advice and information. It is a great. Nice one.
Thank you, ziajme.
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.
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.
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..
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. 🙂
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.
I’m happy you’ve bumped into my blog too, Oksana. Best of luck!
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.
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.
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.
My pleasure, Raju, I hope you have found something of use here.
I enjoy looking through your website. Thank you!
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.
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. 🙂
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!
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.
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.
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. 🙂
Touche. Great arguments.Keep up the greawt spirit.