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 didn't teach tech like they do now, 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, bootcamps 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.

 

 

Forums and Places to find Help

Stackoverflow - Forum, Q&A Site.

Freenode irc - An IRC server for tech, web, hacking and coin talk.

Google Groups - Search for HTML, CSS, etc or the specific issue you're having.

Google Plus Communities - Whether it's web design, coding, software, mobile apps, photoshop, gaming – there's a community for it here.

 

Blogs and Websites for Coding & Design

CSS Tricks - Chris Coyier's Blog with Videos, Posts, Tutorials, Snippets of CSS and HTML. CSS can be the hardest thing to get right sometimes. Also a ton of snippets for js, php, htaccess etc.

Sitepoint - Great content, how-to's and the lastest in bleeding edge web. For even more dev goodness you can sign up for their paid tuition resources at Learnable.

HTML5Rocks - Semantic HTML, CSS3, geeky browser stuff and more.

Hey Designer! - Curated content for Designers and Developers. Found some real gems here.

David Walsh Blog - Moo-Tools core developer and Mozilla Developer who knows lots of stuff.

DamnSecure - A dude called Ruben talks about security.

Alex Cican's Blog - DUDE WITH A MASSIVE HEAD talks about loads of cool designery and developy stuff.

SiteInspire - Nuff said.

Unmatched Style - More websites for design inspiration.

 

Online Courses & Tuition

Team Treehouse - Without a doubt the best beginner-intermediate online school. Fantastic forum and teachers. My favourite. Courses from HTML to Ruby on Rails, PHP, Python, Ajax, Careers, Marketing, DNS and Servers, Git, Adobe Illustrator and Photoshop, Design and even the latest web talks and conferences. (Paid, but soooo worth it.)

Code Cademy - Free online courses in PHP, APIs, HTML, CSS, Javascript and Python. (Free)

Dash - A great, free site to start out on. Learn to make a simple website here... (Free)

CodeSchool - A little more advanced tuition, things like Git, Angular, Backbone, Ruby, R, more in depth Javascript (currently). Sadly no PHP. (Paid)

Levelup Tuts - Some more specific tutorials on Sass, Compass, Magento, Drupal, Wordpress Suzy Grids and Sketch. (free)

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!