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
An intro to Vue and a free course
General Resources
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.
-
Big shoutout to Mockaroo for my favorite API mocking tool!
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
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.
