Apr 05 2013

The Ambitious Beginner’s Guide to Web Design

Learning about code and web design is easier to do than ever before. It doesn’t take long and you don’t require a degree in computer science (I never took any computer courses at school). In an era where almost everyone is wired (or wireless-ed) 24/7 and digital media is replacing traditional print media, being web savvy is practically a must.

DISCLAIMER: I’m still very much a novice web designer, but I’ve been learning so much in a short period of time and accumulating hoards of useful resources that I decided to share it with anyone interested. This guide is for the ambitious beginner and intermediate learners. I’ll be updating this post as I continue to gain more exp and acquire more skills.

Web Design 101 – HTML, CSS & WordPress

HTML and CSS are the two basic building blocks of all websites. I learned how to write HTML way back when, but unless you plan to design a site from the ground up you actually won’t be using it much (it is still important to understand how it works, however). There are a number of content management systems (CMS) that make it easier for you to organize your site and get right into the design. My personal favourite is WordPress, which most people know as a blogging platform. Their stand-alone product via WordPress.org retains the blog look and feel, but with enough customization that you can build powerful websites for every type of need. Plus, there is a very large and active WordPress community that you can tap into for tips and tricks, and many developers have written (free) plug-ins to add extra cool functionality to your sites.

Knowing HTML is one thing, but you have to have a good grasp of CSS if you want your site to look like anything more than boxes and words. CSS stands for Cascading Style Sheets. If you think of HTML as the ‘foundation’ of the site, then CSS is all the pretty colours and lines and fonts that go on top of it. There are enough tutorials and how-to guides for HTML and CSS out there so I won’t go into it, however I will direct you to visit Codeacademy for a hands-on introduction to these two ‘languages.’ Even though I already knew about HTML and CSS, I still took the course on Codeacademy and it was a very good refresher.

Web design: Codeacademy

I definitely prefer Codeacademy’s interactive tutorials over lecture style lessons.

General Advice

Look it up!

Google is your best friend. If you’re stuck or have a burning question, then literally type out your entire question in the Google search field and chances are that someone else has had the same problem and someone else has found a solution to said problem. I cannot state how necessary this is if you decide to teach yourself web design (or anything, for that matter).

Don’t be afraid to ask for help.

So you’ve done your research and scoured the Internet, but you think your problem is pretty unique. That’s fine, find a support forum and ask your question there. As long as you are friendly then people will be friendly to you. Within two weeks I’ve already contacted the support desk for my theme (more on that later) and posted a few questions to the WordPress support forum. It’s very helpful and you can learn a lot on the way. Just make sure you do your homework beforehand and don’t abuse this privilege!

CSS Guides

OK, once you know how to work with HTML and CSS then you’ve already got a good knowledge base to start fiddling around with some webpages. How are the resources I have consulted to deepen my use of CSS:

  • W3Schools
  • This is the go-to place for all things CSS. ‘Nuff said.

  • Learn CSS Positioning in Ten Steps
  • This is an extremely useful and easy-to-follow guide on CSS positioning. Positioning is so important for making sure things on your website are in their proper place, and with creative maneuvering you can achieve some quite striking effects. For instance, the little ‘tabs’ with the dates on them are a result of CSS positioning, as well as the air balloon image. If I didn’t know about this, then my date would’ve just followed after the post title and the balloon would be in the top left corner instead. Not as cool!

  • Multiple Class and ID Selectors
  • If you want to further fine-tune your site, you’ll need to be able to use selectors carefully. This guide is a good primer on effective use of classes and IDS. For a more comprehensive guide, consult the W3C.

  • Visual Effects
  • I found this neat guide on making visual effects like gradients, fades, etc through CSS. Why have a div with only 1 colour when you can have 3?!

WordPress-specific Guides

If you decided to build your website on top of WordPress, then chances are you’re also using a pre-made theme. They are pretty awesome, aren’t they? Here are some sites that I think are essential if you want to get the most out of your WordPress site.

  • Child Themes
  • I highly, highly recommend that you learn about and use a child theme. This is basically a copy of the main theme you’re using (the parent theme) with the advantage that, if or when your main theme is updated, you can keep all the modifications* you’ve made such as styling or layout. Otherwise, when you update you will lose your changes! (only to the styling – you will never lose your content from updating). If you’re using a paid theme, which usually means it’s a bit ‘nicer’, then this is especially important. It’s very easy to create a child theme: download an FTP program like Filezilla, connect to your server, create a “theme-child” subdirectory in your themes folder and then copy the styles.css file over to it. You can also have child template files and so on (I’m using child header and footer files).
    *specifically, the modifications you’ve made to styles.css or the template files. Changes you’ve made via the theme options in the WordPress dashboard should carry over.

    Web design child themes: What it looks like in Filezilla.

    What it looks like in Filezilla.

  • WordPress Theme Functions
  • For more advanced users, this introductory guide tells you about proper usage of custom functions for your WordPress site. As of writing this, I have one custom function on my site that makes the air balloon float up and down when you hover over it.

  • WordPress SEO
  • I only recently started to think about my site’s SEO (Search Engine Optimization), but I wish I had known about it a lot earlier! SEO is all about getting your website to people and making sure search engines are able to find you. What is the use of that beautiful post you wrote if no one will ever see it? This resource is specifically about optimizing the SEO for WordPress sites. It is essential if you want to get traffic to your site. The gentleman who wrote this article also has a nice plugin to help you with that (and it is so satisfying to see the little SEO ball go green)

    Web design SEO: Green light good.

    Green light good.

  • Canvas by WooThemes – Advanced Guides
  • This is only if you are using the Canvas theme by WooThemes. Some of these are pretty intricate and I still have to think hard about them. But think of all the possibilities!

Javascript Guides

Oh, JavaScript. Now we’re getting into tricky territory. This may be the hardest thing to learn for a beginner. But fear not, it is very doable. I mentioned Codeacademy earlier and they are useful if you want a basic introduction to JavaScript (and jQuery, a ‘subsidiary’ of JavaScript that increases its cool factor). JavaScript can make your site dynamic and interactive and takes web design to a new level. Mmm, delicious buzzwords.

  • jsFiddle
  • This site is a godsend! It allows you to experiment and see if your JavaScript will work, and best of all you can save and share your scripts to get help from the pros.

PHP Guides

Coming soon!

I don’t have many resources on JavaScript yet since it’s very new to me, and I am just beginning to delve into PHP. For WordPress especially, being familiar with PHP is pretty important for any advanced customization.

If you found this guide useful then please share it and/or leave some feedback! I would be happy to hear of your own recommendations to be included in this guide. Once you get the hang of it, web design is really fun (and a little bit addictive). I am also starting to use SEO optimization on my site, so I am interested to see how many Google hits this page gets!

, , ,

  • Charlotte

    I started learning html a few weeks ago (from scratch… but it’s surprisingly achievable even for a complete beginner). Have bookmarked about half of this. Thanks for the info!

    • Andy

      I am glad you found it helpful :) You’re always welcome to ask me any questions!