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.
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.
An intro to Vue and a free course
Traversy Media is great with tons of videos on a variety of topics.
Here’s a few bookmarks I’ve collected:
JSONPlaceholder for quickly getting a ton of data like users, posts, comments, etc.
API List for a collection of free and paid APIs covering several topics, from animals to e-commerce to voice
W3 School’s color picker lets you pick not only a base color, but its several tones, saturations, and analogous and complementary hues
codesandbox.io is like CodePen on steroids. They’re completely online framework editors for Angular, React, Vue, and Preact. Great for learning these frameworks wherever you go.
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
– 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.
– Draggable.js – Drag and Drop Library from Shopify
– Stripe Elements – Beautiful Checkout Forms
– Abstract – Github but for Sketch
– Sketch Syntax Highlighter – We all need it.
– Regxr – Mac app for playing with Regex
– Kap – Screen Recorder for Mac.
– 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
Linux and Command Line
Stock Photo Resources
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.