If you're learning to code, this list is for you! If your brain is full of other important things, this list is also for you!
These are some resources that I used in my journey as a self-taught dev, and many of them are tools I still go back and refer to. Every resource on this list is free - none of these require you to spend a penny to get quality content, and none of them are affiliate links.
Getting Started
There are tons of 'learn to code' sites - and most of them will give you the bare bones before asking you to 'upgrade' and for a pretty penny. You don't need to spend a dime.
freeCodeCamp.org is a nonprofit that will teach you everything from HTML and CSS to Node.js, testing, and data science. Yes, seriously, a nonprofit. This was the number one resource I used when I first started. Their web app has interactive coding lessons, where you learn and practice on the same screen. The curriculum includes 'final projects' for each section that will build your portfolio automatically. If you're a new developer, or if you are a back-/front-end dev learning the other side, this is a great resource. Email or integration sign-up required.
CodeNewbie Podcast and Syntax are podcasts. Why podcasts? They're a great way to keep learning while you're commuting or doing laundry, letting you fit more development knowledge into your day. Podcasts can be much more subject to personal taste (Do you like the hosts? Do you prefer interview formats or group chats?) but these are a couple of my favorites. No signup required, unless it is for a podcatching app.
Intro to GitHub is an interactive walkthrough for those new to Git. Or if you've got the basics but forget the details (it me) you can Try Git and find handbooks and cheat sheets. A GitHub account is required.
CSS
CSS... even once you've grasped the basics, CSS can leave some devs scratching their heads. That's OK - these fun tools are here for you.
Flexbox Froggy teaches you flexbox with this precious hoppy friend. No signup required.
Grid Garden is deeply satisfying if you love grids and/or gardens. Even if you don't, you'll learn a ton about the CSS Grid spec. No signup required.
Make it pretty
You've got a website or app, and maybe some good responsive layouts... but it's missing that pizazz and you can't spend hundreds of dollars on professional photography and graphic design.
Unsplash has a huge database of totally free professional photography - just credit the creator! No signup required.
FontAwesome is not just a font anymore. Icon fonts are not a great choice, but you can still access hundreds of free icons as downloadable SVGs. In a digital ocean swimming with paid icon sets that don't have everything you need, this is a valid choice - for prototyping or production. No signup required.
JavaScript
Before you learn a framework, it's a good idea to get the basics down.
freecodecamp.org is once again a great tool - whether you want to jump to the JavaScript section of the tutorials or practice coding exercises. Email or integration sign-up required.
JavaScript30 is an awesome, totally free 30-day JavaScript course - but of course you can take it at your own pace, or just do the exercises where you want extra practice. Plus, most exercises end up with a small project you can add to your portfolio. Email sign-up required.
Brian Leroux's WTFJS video is not a top-tier learning resource, but it is a lot of fun. No signup required.
Accessibility
This is probably my favorite thing to talk about, especially if you catch me IRL. I could write a post just full of accessibility (or a11y) resources (hmm... maybe I should! Let me know in the comments!) but here's just a few favorites.
Inclusive Design Principles is a collection of high-level principles for creating broadly inclusive designs. Read this before you even start coding that new project! No signup required.
Deque's Accessibility Heuristics offers a clear framework for evaluating your designs for accessibility. Email signup required.
The A11y Project is a community-driven resource to help make web accessibility more understandable. No signup required.
Computer Science
If you've started writing some code, you've probably realized just how little you actually understand. This is an essential part of every dev journey. If you want to learn the basics of computer science without having to spend a ton of cash on a college course, you're in luck.
CS50 is Harvard University's free, totally online course on edX. You can enroll for free (you'll be asked if you want to pay for a certificate, but you can skip it and just take the course!) The course is made up of recorded lectures (they're really good ones) plus smaller, more focused videos on each topic covered. Plus, the course includes optional homework/projects that you can submit and have tested. Email signup required.
BaseCS is an adorable, illustrated collection of articles on comp sci essentials. If you prefer, you can also watch videos or listen to the podcast! No signup required.
Those are just a few of my favorite tools for new developers and forgetful ones (like me!). If you have any FREE favorites, please share them in the comments!
Top comments (7)
Thanks for the post. Have a great day
Thanks Keshar! Same to you.
Hello Kat Tow! This would be out of context of this post, but I really need some help regarding a frontend animation. If you could please help me with it, it would mean a lot to me.
I am trying to achieve this animation (video-link) drive.google.com/file/d/1ABYty8QVl...
Hi Keshar!
I can't see the link you shared, and honestly animation is not my strongest area! What I would recommend is finding some animations on codepen.io that are similar to what you're trying to achieve, and then reading through the code - that's what I usually do!
Oh, I am really sorry. link
Please would you take a look?
Also, I will check codepen.io as you suggested. Thank you
Thanks for linking these resources! I'm definitely going to check them out
Awesome to hear!
(My favorite is the frog game 💚)