Learn WebDev

FreeCodeCamp is probably one of the best free resources around, they start you from the basics of HTML for even the newest of newbies. I always tell people who are interested in WebDev to use this site to dip their toes into it, and see what it’s all about. They also have great articles every day.

Codecademy has some free (and paid) courses for tons of languages/frameworks, and they’re usually pretty great. I prefer FCC to this, but I’ve come back again and again to just throw myself into one of their courses and immediately get into it.

JavaScript


Eloquent JavaScript is a great book for beginners, and entirely free.

The Art of Reading A collection of articles about Node.JS and JavaScript.

The Art of Node A great introduction to Node.JS

The Coding Train! My absolute favorite YouTube channel for JS, he’s got a great demeanor and teaches pretty well. And he’s funny.

Vue Resources


The Vue Handbook

An intro to Vue and a free course

General Resources


Traversy Media is great with tons of videos on a variety of topics.

 the best channel intro video

Big shoutout to Mockaroo for my favorite API mocking tool!

Interneting is Hard : MUCH more than an HTML/CSS syntax tutorial.

Watch and Code : fantastic JavaScript tutorial. Just plain great haha

 Formcarry – Handles HTML Forms, use it with Zapier Integration.

– Headway – Change logs for your product, it’s sweet.

– Tidio – Super sweet live chat.

– Readme Build – Generate language wrappers for your API.

– Sentry – Error tracking.

– Hyperping – Uptime Monitoring

– Graphcool – Open Source GraphQL BAAS

Chrome Extensions:

– Font Face Ninja – The best chrome extension ever made, inspect fonts on any website

– Dimensions – A Chrome extension that measure screen dimensions, I use it everytime I code front-end

– Site Palette – A Chrome extension that generates color palatte of current website

– Toby – Chrome extension, it’s really good.

JS Libraries:

– Filepond.js – Javascript Library for File Uploading

– Draggable.js – Drag and Drop Library from Shopify

– Stripe Elements – Beautiful Checkout Forms

Design:

– Abstract – Github but for Sketch

– Sketch Syntax Highlighter – We all need it.

Mac Apps:

– Regxr – Mac app for playing with Regex

– Kap – Screen Recorder for Mac.

Other:

– Coda – Something unique.

  • RegExr – Regular expression tester with syntax highlighting, PHP / PCRE & JS Support, contextual help, cheat sheet, reference, and searchable community patterns.

  • Devhints – A ridiculous collection of web development cheatsheets

Free Books

Youtube Channels

Online Courses

Linux and Command Line

Stock Photo Resources

Vector Resources

Fonts

cht.sh

curl cht.sh/javascript/json+parse

cht.sh/{Language}/search+term

https://kapeli.com/dash – Dash app for personal code snippets across programs on mac using your own predefined shortcuts. Also downloads documentation like a personalised encyclopedia. SO HANDY.

http://fontello.com/ – Fontello icon font generator using personalised icons and icons from different libraries. I pretty much use this in every project.

http://fontsquirrel.com/ – Free fonts and web font generator. Just quality.

https://www.smashingmagazine.com/ – Essential for keeping up with web dev, techniques etc. The best web dev blog on the internet IMO.

https://coolors.co/ – Super fast colour scheme generator. Still the best colour scheme resource I’ve come across.

Scroll to Top