How to teach yourself web design

Web design is fun, thought provoking, and extremely applicable to pretty much any field. It allows you to represent yourself, your brand, or a client online. And Learning web design will fundamentally change how you browse the web!

An iconic scene from the Matrix, where green code moves across the surfaces in a hallway.
The code is revealed

So, if you want to see the web like neo sees the matrix (maybe the change isn’t that drastic…) then keep reading, and soon you’ll have all the resources to teach yourself web design!

(This article is a bit of an outreach post, the response to it will help me decide whether to do a full series of tutorials on web design. So, if you liked this and want to learn more leave a comment!) I have no affiliation to any of these sites or services, I just think they are worth including.

Now, if you are reading this you’ve probably tried What You See is What You Get (a.k.a. WYSIWYG) website builders, there’s a lot of them. If you haven’t here is a list of the popular ones:

You should probably go play with those for a bit, they’re fun, but can be frustrating once you’re ambition grows past their capabilities.

This is where it get fun, coding your first HTML site!
To do this you need three things (other than a computer) at text editor, an internet browser, and a list of HTML ‘tags’ (no one expects you to memorize them all).

Text Editor
Text edit (Mac) and Notepad (Windows) both work,just save your files as .html or .css instead of .txt. DOnt worry about .css yet, though.
This is where you write code, HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet).

HTML code on a screen.
The code that makes up the web.

Internet Browser
Any browser works here, but Safari and Firefox have really good tools to help you explore the effects of your code on the web page. We call them ‘Inspect Elements’ (Safari) and ‘Firebug’ (Firefox) these just let you look through your code and highlight the corresponding visual elements.

The Safari elements inspector
The Safari element inspector

HTML resource
The end all be all of the web resources is W3 Schools they have everything you could ever want to know, and they present it really well.

The W3 Schools homepage
The W3 Schools homepage

Sometimes you need another explanation so here are some handy ones:

Code Academy is a great place to learn to code anything.
CSS Tricks is a place where designers and developers share reliable solutions to web design problems. They focus on CSS and not HTML though.
Stack Overflow Stack Overflow is the place online for programming questions. They are really searchable and have a good community.

So what do you do with this info?

  1. Start on W3 Schools and start learning HTML write a few sites, then write some more and have fun with it!
  2. Once you are comfortable with writing HTML and how it comes out in the browser then learn CSS, this takes your web page from cool to amazing! CSS gives you control of the visual styling for your site.
  3. Now you can get fancy! If you are all eager to learn then look into Bootstrap, built by the guys at twitter bootstrap gives you CSS classes that make your site work well on all device sizes, and the designs look even better.
  4. Finally, check out PHP this with being a new type of coding and thinking for you, but it makes life so much easier in the long run. It also lets you do really advanced stuff on your pages.

I really hope this helps you discover the joy of Web Design, and please feel free to leave a comment to let me know what you though. Also feel free to let me know if you’d like some tutorials to guide you through.

Anyhow, enjoy, grow your beard, and code away!

2 Comments Add yours

  1. Reta Gaibler says:

    Could you write another post on this going into a little bit more detail? I had some questions that weren’t answered here but I liked what you had to say on the subject. Love to hear more of your perspective.

    1. MattMurch says:

      Glad to hear that you liked it! Which areas would you like to see expanded on? I should have another out in a month or two.

Leave a Reply