Resources to upskill your frontend skills

Welcome to this invaluable collection of resources! Within this blog post, you’ll discover blogs, articles, courses, and more—that has enriched my own learning journey. Rest assured, this collection is not only meant for your benefit, but it also serves as a personal safeguard, ensuring that these valuable resources remain within reach. So, let’s embark on this knowledge-sharing adventure together! 😊

Note: This is a living document and it will change over time.

Javascript

• Javascript Info - javascript.info

• Just JavaScript - justjavascript.com (Paid - beginner level)

• 33 Fundamentals Every JavaScript Developer Should Know | by Stephen Curtis | Medium & GitHub - leonardomso/33-js-concepts: 📜 33 JavaScript concepts every developer should know.

• Eloquent Javascript book

• Learn web development - web.dev (various topics, not just JS)

💅CSS

• CSS Triggers List - What Kind of Changes You Can Make

• Flexbox cheatsheet

• CSS Animations - animista.net

• Create box shadows - cssmatic.com

UI/UX

• Inclusive Design Principles

• Forms best practice - GeriReid.com

Accessibility

• A Guide To Keyboard Accessibility: JavaScript (Part 2) — Smashing Magazine

• a11y-Tricks — Adrian Roselli

• Accessibility - Fluent 2 Design System (microsoft.design) (check this later)

• ARIA Authoring Practices Guide | APG | WAI | W3C

React + Typescript

• React + Typescript cheatsheet

• https://www.totaltypescript.com/ - Typescript tutorials

Architecture

• Microfrontend - Welcome to Micro frontend dev!

• Islands Architecture - Islands Architecture (patterns.dev)

🎯Project planning

• Shape Up: Stop Running in Circles and Ship Work that Matters (basecamp.com)

🚀Web Initiatives

• Interop 2022: browsers working together to improve the web for developers

• Stats about the state of the web: The 2022 Web Almanac (httparchive.org)

👩‍💻Interview preps

• Typical interview questions: LeetCode

• UMPIRE Interview Strategy | CodePath Cliffnotes

• Comparison of different sorting algorithms (animations) - Toptal

• Data Structures & Algorithms animated - VisualGo.net

• Leetcode problems with Patterns

• Big O notation explained - MIT

• Leetcode roadmap

Git

• Git is hard, if you messed up smth, check this out: Oh Shit, Git!?! (ohshitgit.com)

• Learn Git Branching an interactive tutorial

🛠️Tools

• UI Filler - cool version of Lorem Ipsum

• Excalidraw | Hand-drawn look & feel • Collaborative • Secure

🌟If you think there is some other resource worth sharing, let me know in the comments and I’ll add it to the list.

Happy coding 🚀!