The only resource list you'll need to kill it at your frontend career in 2022
Whether you're:
- Biting your fingers for the advent of new year because you've decided to rev up your frontend dev journey
- Just starting your frontend career and have been holding onto the rails (i.e. the Internet)
- 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
Complimentary resource directory for everything HTML - elements, attributes etc.
HTML Cheat Sheet
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
Bit ruff on the edges, but does the job at giving you a good HTML run down.
Head
The only guide you'll need to all the possibilities of the
CSS-only
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
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
A visual guide to CSS. It has all the properties you need, and illustrated examples to make it appealing.
CSS-Tricks
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
The one and only. Wes breaks down CSS Grid for you the way it should be.
Flexbox Cheatsheet
One of the best features of CSS hands down - and now you have an easy guide to help you ace it.
Keyframes
No more keyframe nightmares...this app makes them 4 times easier. Create basic or complex keyframes in a jiffy.
Flexbox Froggy
Who knew flexbox was such a cute system?
CSS Frameworks & Libraries
Bootstrap
"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
A utility-first framework. Its classes are equipped to build rapid-fire custom UI designs in the markup.
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
Open-source responsive framework based on Flexbox.
Skeleton
Not sure if real framework, or just a "dead simple, responsive boilerplate.
Super minimal. Super simple. But responsive ;)
Normalize.css
Allows you to account for the different styles that come with different browsers, while maintaining base styles.
Reset.css
Removes all browser default styles. Start from scratch. Take a deep breath of clean CSS air.
JS-only
Java5cript
Get a head start on JS, for free.
JavaScript.info
Learn the ins and outs - from the language itself, to manipulating the DOM and browser, as well as crucial concepts.
JS Fiddle
More a tool/online IDE allowing you to test your Javascript, with your CSS and HTML.
Javascript 30
Build 30 awesome JS-y things in 30 days with 30 tutorials.
30 scoops of icecream allowed.
DOM Events
The hardest part of DOM manipulation is visualising them. Luckily this tool exists to help explain.
JS Tests
Tests suck, but they do help you learn! Try some of these mindbogglers and challenge your brain.
Exercism
If you're a real doer, this is a great site for you. Thank me later when you're a JS master
Superhero.js
A killer collection of articles, vids, slides...very wow
JS Frameworks & Libraries
jQuery
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
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
A data visualisation library, awesome for creating custom visualizations e.g. a bar chart.
Glimmer.js
A JS library with UI components. A newbie to the library scene.
Angular.js
An open-source JS framework created + maintained by...drum roll plz Google! It helps you create web apps easier.
Vue.js
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
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
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
Literally helps you navigate your beginnings as a frontend dev. A life and timesaver!
Free Code Camp
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
Credible resources, and a variety of tutorials. You'll also find plenty of tutorials, videos, eBooks etc.
Frontend Mentor
A nice directory of real-life projects to build and refine your frontend skills. Not to mention design goals
MDN (Mozilla Developer Network)
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
So good, you won't believe its free. Perfect for disciplined aspiring web devs.
Frontend Checklist
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
One site to hit the ground running with the mighty triad.
EggHead
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
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
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
LinkedIn
Email
Top comments (1)
BoxCoding is a website where we share free resources about web design and development to inspire design-focused frontend developers and to improve your coding skills.
avabucks.it/