A Curated List of Free Frontend Dev (Technical) Resources (2022)
Tags: frontend, career, beginners, javascript
Published: 2021-12-23 02:58:46

## _The only resource list you'll need to kill it at your frontend career in 2022_

---

Whether you're:
1. Biting your fingers for the advent of new year because _you've decided to rev up your frontend dev journey_
2. Just starting your frontend career and have been holding onto the rails (i.e. the Internet)
3. A tenured frontend dev who's tired of the overkill of 'frontend dev' resource lists out there that don't quite 'hit the spot'

Fear not! ☝️
I fall somewhere between point 1-2 and thought I'd dedicate some time being a resourceful nut, and collating a super duper comprehensive list (so that you don't need 100 tabs open to center a div 😉

---

**HTML-only**
[HTML Reference](https://htmlreference.io/)
_Complimentary resource directory for everything HTML - elements, attributes etc._

[HTML Cheat Sheet](https://htmlcheatsheet.com/)
_All you need to get HTML wrapped around your head. This is a goodie for beginners. Just pretend like the less than satisfactory UI doesn't matter._

[HTML Dog](https://htmldog.com/)
Bit ruff on the edges, but does the job at giving you a good HTML run down.

[Head](https://github.com/joshbuchea/HEAD)
The only guide you'll need to all the possibilities of the <head> element

---

**CSS-only**

[Learn CSS](https://web.dev/learn/css/)
_Curated and sculpted by Google Devs. "web.dev's mission is to help developers build best-in-class web experiences on any browser.". Clear, concise and practical._

[CSS Gradient](https://cssgradient.io/)
_One colour is fine - but **two?!** No way. You need this in your life. Generate the CSS for both linear and radial gradients without picking your brain apart._

[CSS Reference](https://cssreference.io/)
_A visual guide to CSS. It has all the properties you need, and illustrated examples to make it appealing._

[CSS-Tricks](https://css-tricks.com/)
_Where do I begin?! Just the best. When in CSS doubt, check this out. They even have a killer slogan too: "A website about websites"_

[Wes Bos](https://wesbos.com/announcing-my-css-grid-course)
_The one and only. Wes breaks down CSS Grid for you the way it should be._

[Flexbox Cheatsheet](https://flexbox.malven.co/)
_One of the best features of CSS hands down - and now you have an easy guide to help you ace it._

[Keyframes](https://keyframes.app/)
_No more keyframe nightmares...this app makes them 4 times easier. Create basic or complex keyframes in a jiffy._

[Flexbox Froggy](https://flexboxfroggy.com/)
_Who knew flexbox was such a cute system?_

---

**CSS Frameworks & Libraries**
[Bootstrap](https://getbootstrap.com/docs/3.4/css/)
_"The most popular HTML, CSS and JS library in the world,".
For a good reason too. Use it yourself and you'll see why._

[Tailwind](https://tailwindcss.com/)
_A utility-first framework. Its classes are equipped to build rapid-fire custom UI designs in the markup._

[Foundation](https://get.foundation/)
_Don't be scared of using "The most advanced responsive front-end framework in the world."
With endless inclusions like a grid, HTML, SASS and UI elements..._

[Bulma](https://bulma.io/)
Open-source responsive framework based on Flexbox.

[Skeleton](http://getskeleton.com/)
_Not sure if real framework, or just a "dead simple, responsive boilerplate.
Super minimal. Super simple. But responsive ;)_

[Normalize.css](https://necolas.github.io/normalize.css/)
_Allows you to account for the different styles that come with different browsers, while maintaining base styles._

[Reset.css](https://meyerweb.com/eric/tools/css/reset/)
_Removes all browser default styles. Start from scratch. Take a deep breath of clean CSS air._

---

**JS-only**

[Java5cript](https://www.java5cript.com/)
Get a head start on JS, for free.

[JavaScript.info](http://javascript.info/)
Learn the ins and outs - from the language itself, to manipulating the DOM and browser, as well as crucial concepts.

[JS Fiddle](https://www.java5cript.com/)
_More a tool/online IDE allowing you to test your Javascript, with your CSS and HTML._

[Javascript 30](https://javascript30.com/)
_Build 30 awesome JS-y things in 30 days with 30 tutorials.
30 scoops of icecream allowed._

[DOM Events](https://domevents.dev/)
_The hardest part of DOM manipulation is visualising them. Luckily this tool exists to help explain._

[JS Tests](https://github.com/lydiahallie/javascript-questions#readme)
_Tests suck, but they do help you learn! Try some of these mindbogglers and challenge your brain._

[Exercism](https://exercism.io/)
_If you're a real doer, this is a great site for you. Thank me later when you're a JS master_

[Superhero.js](http://superherojs.com/)
_A killer collection of articles, vids, slides...very wow_

---

**JS Frameworks & Libraries**

[jQuery](https://jquery.com/)
Kudos to this champ of a library for sticking it out this long. Rumour has it that the need for jQuery is dwindling indeed, but still worthwhile knowing of.

[React.js](https://reactjs.org/)
A JavaScript library from Facebook that shook up the interactive UI world. An extremely sought after library with a abundant ecosystem of developers and packages. Specialised more for single-page applications.

[D3.js](https://github.com/d3/d3)
A data visualisation library, awesome for creating custom visualizations e.g. a bar chart.

[Glimmer.js](https://glimmerjs.com/)
A JS library with UI components. A newbie to the library scene.

[Angular.js](https://angularjs.org/)
An open-source JS framework created + maintained by...*drum roll plz* Google! It helps you create web apps easier.

[Vue.js](https://vuejs.org/)
An open-source MVM (model-view-model) frontend JS framework. Called "The Progressive JS Framework". Also used for UI and single-page apps.

---

**The Mighty Triad (HTML, CSS, JS)**
[W3 Schools](https://www.w3schools.com/)
_The holy grail of documentation. Tutorials, references, examples AND exercises. If you have the patience to digest everything here, you're going to go far!_

[Scrimba](https://scrimba.com/)
_Scrimba is awesome! The first wholly interactive course. I love the way they teach by getting the student involved from the very get-go._

[Frontend Dev Roadmap](https://roadmap.sh/frontend)
_Literally helps you navigate your beginnings as a frontend dev. A life and timesaver!_

[Free Code Camp](https://www.freecodecamp.com/)
_An absolute empire. From beginner courses, to a team of highly skilled devs making differences in the world, a hefty selection of real-life applications **plus** an amazing community!_

[SitePoint](https://www.sitepoint.com/javascript/)
_Credible resources, and a variety of tutorials. You'll also find plenty of tutorials, videos, eBooks etc._

[Frontend Mentor](https://www.frontendmentor.io)
_A nice directory of real-life projects to build and refine your frontend skills. Not to mention design goals_

[MDN (Mozilla Developer Network)](https://developer.mozilla.org/en-US/)
_Text-heavy, but incredibly comprehensive. If you concentrate and go through the docs, there's no way you won't learn anything by the end!_

[The Odin Project](https://www.theodinproject.com/)
_So good, you won't believe its free. Perfect for disciplined aspiring web devs._

[Frontend Checklist](https://frontendchecklist.io/)
All you need before a successful deploymentDon't launch a site without running through this front-end checklist. It's a crucial resource to make sure you've checked all the necessary boxes before deployment.

[Frontend Masters Bootcamp](https://frontendmasters.com/bootcamp/)
_One site to hit the ground running with the mighty triad._

[EggHead](https://egghead.io/)
_Head over here when you've done some due diligence of your own. You'll get technical courses and level up in no time._

[Codecademy](https://www.codecademy.com/)
_My very first tutorial...getting emotional! The beginner courses are all free, helpful and fun! It won't scare you with technical jargon, and will introduce you to the fun of coding!_

[Treehouse](https://teamtreehouse.com/)
_A plethora of high-quality learning paths. The frontend path is well-organised and easy to follow._

---

The internet is a rabbit hole! I'm sure there are gazillion more resources, but from experience I learnt that focusing on a set list and completing them first (instead of clicking anything and everything) generally helps you go further, quicker

Hope the resources above will keep your fingers flying across the keyboard for some time.

The web dev world is an amazing one. Full of beautiful elegant code, caffeine and the cooleset nerds in the world 🤓(whoop).

I'm going to make a couple more frontend resource lists for design tools, accessibility, deployment etc.

In the meantime, happy coding! 💻

Please feel free to reach out for any suggestions, extra submissions or just a friendly chat via the links below 🥳:
[Twitter](https://twitter.com/kelly__kimm)
[LinkedIn](https://www.linkedin.com/in/kellyswkim/)
[Email](mailto:hi@kellykim.co)