Lauren C Clark

UX Designer & Web Developer. Find out more about me and what I do.

Resources for Learning to Code, Design and Improve.

When you’re stuck in a rut, and it seems there’s no way out. It’s time to try something different.

I wanted to share with you some links and some practices that have helped me come a long way, in a relatively short period of time.

I’ll try and keep this list to free resources, and I’ll show you the ones which are worth forking out for if there is a cost.

Hardly any of my friends are in tech, before I really got into design and development, I really had no idea. I remember making scripts for IRC back when I was about 14, and writing some basic html for myspace and geocities but I’d forgotten about all of that by the time I hit my twenties.

It’s a crying shame that schools don’t teach technology, and I mean really. It seems like back in the 80’s even, the UK had better teaching facilities for tech. It sort of seems like it’s dark art.

I know things are supposed to be changing now, there are Raspberry Pi’s, local courses and all sorts of ways to get involved, but it seems unless you have someone to introduce you to the ‘black magic’ you’re going to stay ignorant – if you’re like me and pretty much on your own, you’ll know (or will do) that there is a great online community, and a wealth of resources out there to help.

Tuts+ – Tutorials on everything! They may not be the best tutorials, and some are slightly out of date but you’re bound to pick up something useful. (Some free, some paid)

Learnable – The paid online courses from the people who brought us Sitepoint, more in depth tutorials, help and live chats. If you like Sitepoint it’s worth signing up! (Paid)

Other Valuable Resources for Teaching Yourself Tech

IT Books – Free downloadable PDF’s and ebooks on pretty much every single thing IT related. Networks, Programming Languages. Lot’s of familiar publications such as O’Reilly and Missing Manual.

Devdocs.io – Similar to Mac’s Dash app, this is a one-stop-shop for all your documentation needs. Select your favourite manual webpages and have them all in one place, when in doubt RTFM!

Bentobox.io – It’s so meta, I’m linking to a site which provides links to resources to teach yourself coding, in a blog post about resources to teach yourself coding.

Handy Tools

Sublime Text – My favourite text editor. It’s fast, light and if you install the package manager, you have access to hundreds of time saving and helpful plugins such as Linters, Themes, Syntax highlighting for Sass, Coffeescript and more. (Free to trial, but essentially Paid)

Brackets – Another great text editor. Create or edit CSS rules whilst you’re in the HTML view. I like this for making quick changes and updates to sites, I wouldn’t use it to build a site, but when clients ask you to change a telephone number on a site and make it 2pixels bigger – it’s handy. It’s open source too!

Emmet Plugin – A plugin for your text editor which makes writing HTML and CSS a breeze with shorthand. div.wrapper.col-12.primary will create this –

<div class="wrapper col-12 primary">

Dash App – Cheat Sheets and Documentation on your Mac (not sure if there is something similar for Windows and Linux) Sort of works like Devdocs.io but you can assign keyboard shortcuts, and save snippets of code you use often. You can connect this up to your favourite text editor too! (Free to trial, but essentially Paid)

Edit: For the same app on Windows check out Velocity by Jamie Da Silva using the Kapeli docset

Github – Store your code and collaborate with others. You can find useful gists (snippets of code) as well as snoop at other people’s coding, you’ll learn a lot and save yourself time. (Free for public repos, but if there is stuff you’d rather people not see, you can pay for private repos.)

Symbolhound – Search for Code. Normally Google will strip symbols from the search, and only looks for words numbers and letters. This isn’t good when you’re searching for code! Symbolhound searches the web, with the symbols left in. Great for scouring stack overflow or getting a bug fix.

Things to Avoid

1. London or Big City Training Companies. They charge huge amounts, and more often than not it’s crammed into 4-5 days in a row. That is simply nowhere near enough time to grasp anything. You’ll be sitting there on a crappy PC with a sticky keyboard, desperately trying to keep up. There’s no time to practice what they’re telling you to do, it’s just a bunch of steps. I don’t know if I’ve been unfortunate in my choice of classes, but it’s been pretty dire.

2. Show offs. Don’t let people bring you down with elitism. If you keep having to ask someone senior to you to explain something, or someone on a forum flames you or makes you feel stupid with their answer, and it just doesn’t make any sense, it’s more likely than not that they don’t fully understand it themselves, or are hogging knowledge. Both of these things are dick moves. Don’t feel bad, learn as much as you can in any way you can – and move on.

3. Not closing statements, not linking files properly and general derpy mistakes. It’s the biggest reason mine and other people’s code gets broken, there’s a missing div or semicolon, or curly brace somewhere. Get a linter and check your code, if something isn’t working it’s probably this sort of thing before anything else.

4. Asking for help on forums, without posting your code or your problem. So many times I see the question “Wah my css isn’t working” and the OP is just giving the particular statement she thinks is the issue. It might not be that. Give a little more, include the relevant HTML, CSS or file structure you’re working from so lurkers can help you. Make a codepen or jsfiddle.

5. Writing bad, uncommented code. Trying to save time, making shortcuts and just diving headfirst into code without a plan is bad practice. Keep everything as DRY (don’t repeat yourself) as possible to help your future self, and prevent others who have to deal with your code – from stabbing you in the night.

Things you should Do

1. Learn Git. Because it’s awesome and you can edit and store projects on Github, handy for working in multiple places, especially if you’re collaborating. Git allows you to work on code with others and minimize conflicts by merging code. It’s worth noting that most employers will check you have a Github account and your own projects before considering you as an applicant.

2.Learn the Command Line. Unix/Linux based command line tools are really useful, quite often faster and it will stand you in good stead for working on headless servers where you only have shell access.

3.Keep up to Date. Things are always changing. Keep an eye out for new things, use them, share them, make people aware. That’s how the web progresses.

4. Help People. Help your fellow learners, don’t hog knowledge or be purposefully opaque because it makes you feel superior. Help old people use computers, help ignorant people get an email address.Stop your parents being scared of online payments and teach them about online scamming. Make the web better by allowing more people to understand it and use it.

5. Dabble. Do a little coding if you’re a designer, and vice versa. Hate the marketing team? Do some marketing yourself – see what you can come up with. Put yourself in the shoes of people on your team to make it easier on yourself.

6. Break code. Make bad designs, but don’t give up. Experiment with things, try new things and don’t always copy and template. It’s okay if you get it wrong, or if someone doesn’t like your designs. Take the criticism and learn from it. Fix the code you broke and understand it better.

This is going to be something I update and add to periodically, I don’t want it to get too bogged down and full of links, but it will be changed and refined over time. Subscribe or check back often!

It’s okay for some really simple html/css but I wouldn’t use it over some of the other sources I’ve linked to. In fact I have a browser plugin to block these guys coming up as they are not always accurate, the site is old and comes up first in search results. Check out http://www.w3fools.com for a giggle! Thanks for bringing that up though.

Try to stay clear of your regular run of the mill shared hosting, like Go Daddy and Hostgator, Fasthosts etc. Go for “cloud” hosting, something like DigitalOcean or Linode. It’s good practice to get in there and set up a server from scratch with shell access, but can be really fiddly to get a working mailbox going if you’ve not done it before. I’d say go for any of those shared hosting providers if you’re in a hurry, they’re all pretty much the same (I personally have had no problems with any hosting providers, except 123-reg.) or go for DigitalOcean or Linode if you’re looking for scalable professional DIY hosting. DigitalOcean is very cheap for the resources you get.

Whoops! Sorry for not crediting you – I looked it up in a hurry as I felt a lot of the links were a bit Mac/Linux oriented, and it bugs me when people get left out for using the OS they prefer. Will update the post with your information, thanks for pointing that out.

I have never read these suggestions before on any blog. Thanks a lot for sharing.
Just so everyone can know, I was going through some monetary challenges by subscribing to Web Training resources like Lynda.com and Pluralsight.com.
Does anybody have any updates for additional resources besides these amazing suggestions already posted by Lauren Clark?
Thanks in advance. Cheers!

Great post! Any recommendations/websites/tools for introducing tech to young teenagers? I have some relatives that I know are harboring inner geeks that need to be set free. Any suggestions appreciated.