Top free resources for new (and forgetful) devs
Tags: codenewbie, beginners, webdev
Published: 2020-01-20 19:37:35

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](https://www.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](https://www.codenewbie.org/podcast) and [Syntax](https://syntax.fm/) 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](https://lab.github.com/githubtraining/introduction-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](http://try.github.io/) 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](https://flexboxfroggy.com/) teaches you flexbox with this precious hoppy friend. _No signup required._

- [Grid Garden](https://cssgridgarden.com/) 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](https://unsplash.com/) has a huge database of totally free professional photography - just credit the creator! _No signup required._

- [FontAwesome](https://fontawesome.com/) 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](https://www.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](https://javascript30.com/) 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](https://www.youtube.com/watch?v=et8xNAc2ic8) 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](https://inclusivedesignprinciples.org/) 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](https://accessibility.deque.com/accessibility-heuristics/) offers a clear framework for evaluating your designs for accessibility. _Email signup required._

- [The A11y Project](https://a11yproject.com/) 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](https://www.edx.org/course/cs50s-introduction-to-computer-science) 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](https://medium.com/basecs) is an adorable, illustrated collection of articles on comp sci essentials. If you prefer, you can also watch [videos](https://dev.to/vaidehijoshi) or listen to the [podcast](https://www.codenewbie.org/basecs)! _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!