How To Learn Web Design in 3 Months

I co-founded The Message Studios Inc. almost exactly 3 years ago. Since then, we’ve clocked in more than 250 clients on 350 projects, ranging from small one-page landing pages to gargantuan e-commerce sites with 50,000 unique products. With so much workload, we’ve had a lot of experience hiring developers and designers of all different ages, work experience, and educational backgrounds. What surprised us was that our best programmers were self-taught, no official courses or certificates – many even without any textbooks. In fact, it seemed to us that those that did take courses were taught literally years worth of material that they would never use in contractual web design.

So, when a friend of mine from McGill University posted a request for suggestions on where to learn web design, I decided to jump in and answer – partially with the goal of turning it into a post. 😉 Keep in mind that Majd already has a solid foundation in Photoshop, which is also a must for anyone who’s looking into becoming a web designer.

Here’s my response and I hope that some of you will find it helpful in getting started. My philosophy to learning this is “learn the minimal amount to do exactly what you want, and then expand your knowledge towards those areas that interest you“:

Hey Majd,

Here’s what I would recommend as a fast track to knowing absolutely nothing to building websites that look and work exactly as how you want. Any course or dev book is going to go through a *lot* of ‘foundational information’ that you won’t need (ever). I’d break down your knowledge to three major aspects: 1. HTML/CSS, 2. WordPress CMS, 3. cPanel & FTP – if you have a handle on these three (along with photoshop), you can develop literally 75% of all the sites out there.

1. HTML/CSS

With HTML, the only thing you need to learn are the basics to do with site setup and structural layout – everything visual & formatting you’ll cover with CSS. Essentially, learn how to properly set up your <head> and how to import Javascript and CSS files into your HTML. Then, learn how <div> and <span> are added and how you can assign classes to them. Then learn how to add <img> <embed> and <a> as well as your basic text formatting elements of <strong>, <i>, <ul>, <ol>. That covers 95% of all the HTML I’ve ever used across our web projects. You can learn these items here:http://www.w3schools.com/html/default.asp

With CSS, you’ll be fine if you do all the tutorials onhttp://www.w3schools.com/css/default.asp – you can easily cover them all within a week. Remember while you’re learning that you won’t be REALLY learning until you start making the sites and do a bunch of trial and error. Those lessons, again, cover about 95% of all the CSS I’ve ever used across our web projects.

The best source of learning sometimes, is to find a site you really like and try to replicate it yourself. There’s a cheat sheet for this! If you’re not using Chrome (or Firefox with firebug) you need to convert to that automatically. Chrome has an amazing right-click ‘inspect element’ feature which allows you to inspect all the HTML and CSS that’s on any site, and highlights the areas that that code is applied for you. Further, you can change the values in the ‘inspect element’ window and see the changes reflect immediately on the browser, allowing you a better understanding of what does what. This is also crucial when you begin making your own test sites and you want to debug to see what’s doing what and what’s going wrong.

2. WordPress

WordPress is not just a blogging platform, but a full fledged CMS (Content Management System). With a good knowledge of Photoshop and HTML/CSS you can turn WordPress into the only CMS you’ll ever need. We use WordPress for almost every informational site we do (and even some e-commerce and database driven ones). Learn how to install wordpress, install themes, and modify themes. Then learn the most useful plugins and settings. WordPress is also one of the world’s largest CMSes so it’s developer and support community is huge – you can Google practically the solution to any problem. If you want to save time, you can also purchase premade themes from a place like http://www.themeforest.com/ and dig into the HTML/CSS and only edit the parts that you feel need editing. Download WordPress at: http://www.wordpress.org/

WordPress is built on PHP, a programming language that interacts with a database (mySQL). PHP sounds intimidating but the majority of its functionality in web development is grabbing the right page, the right text, and the right images from the database, and plopping it into the HTML (well, that and form submission). All that is to say, learning some basic PHP (especially things like ‘language files’ if you’re doing a bilingual site) would be beneficial, but not necessary.

3. Server Setup – cPanel / FTP

Finally, you need to learn basic server setup, cPanel (popular hosting control panel), and FTP (how you get your files from your computer to the server). If you have $0 you can set up your own free server on your computer using XAMPP http://www.apachefriends.org/en/xampp.html, but I’d highly recommend just purchasing a server through a company like (hostgator.com) and jumping right into the control panel. Server setup can be complicated (especially if you’re on a Mac) and you want to focus your learning on how things are set up through those hosting companies. You’ll also need to learn these things before you can install your own setup of WordPress.

The essential skills you’ll need here are – buying/setting-up/attaching Domains and Hosting, Creating an FTP account in cPanel, Creating a mySQL Database in cPanel, Basics of phpMyAdmin (through cPanel) and database import/export, and setting up MX Records for email accounts.

___________________________

All in all, the single most important rule to all of this is to just make a bunch of websites! Make it for real people (family and friends) so that it means something and someone can hold you accountable so you don’t give up when it gets frustrating. You WILL hit roadblocks and you WILL want to do things that you have no idea how to do. When you experience this, just Google it. 9 in 10 answers are Googlable on the first try.

If you dedicated 2 hours a day to doing this, you could compete with an Indian web firm within 3 months. I shit you not.

Anyway, hope this helped (sorry about the length) – feel free to message if you need any other advice!

-Johnson