Frontend Related Resources and Tools 🧑💻
Here are some resources and tools that I have found useful for frontend development. I have tried to categorize them as best as I can.
Frontend Learning Resources 👨🎓
| Title | Description | Links |
|---|---|---|
| FreeCodeCamp | Learn to code for free. Build projects. Earn certifications. | FreeCodeCamp |
| Frontend Masters | Learn frontend development from industry experts. | Frontend Masters |
| Frontend Mentor | Build real projects. Get feedback. Improve your skills. | Frontend Mentor |
| Frontend Roadmap | A curated list of resources to learn frontend development. | Frontend Roadmap |
| Frontend Developer Roadmap | A curated list of resources to learn frontend development. | Frontend Roadmap |
Frontend Cheatsheets 📝
| Title | Description | Links |
|---|---|---|
| HTML/CSS/JS Cheatsheet | Cheatsheets for HTML, CSS and JS | HTML Cheatsheet |
| Bootstrap 4 Cheatsheet | Cheatsheets for Bootstrap 4 | Bootstrap4 Cheatsheet |
| Bootstrap 5 Cheatsheet | Cheatsheets for Bootstrap 5 | Bootstrap5 Cheatsheet |
| Koding | References for HTML, CSS, JS, in Bahasa Indonesia | kodi.ng |
Frontend Frameworks Documentation 📚
| Title | Description | Links |
|---|---|---|
| Tailwind CSS Documentation | A utility-first CSS framework for rapidly building custom designs. | Tailwind CSS |
| Bootstrap Documentation | The most popular HTML, CSS, and JS library in the world. | Bootstrap |
| Bulma Documentation | A modern CSS framework based on Flexbox. | Bulma |
| Materialize Documentation | A modern responsive front-end framework based on Material Design. | Materialize |
| Semantic UI Documentation | A development framework that helps create beautiful, responsive layouts using human-friendly HTML. | Semantic UI |
| Skeleton Documentation | A dead simple, responsive boilerplate to kickstart any responsive project. | Skeleton |
Frontend Libraries Documentation 📚
| Title | Description | Links |
|---|---|---|
| GreenSock | A JavaScript library for high-performance animation that works in every major browser. | GreenSock |
| Anime.js | A lightweight JavaScript animation library. | Anime.js |
| Flickity | A JavaScript library for flickable carousels. | Flickity |
| Swiper | The most modern mobile touch slider with hardware accelerated transitions. | Swiper |
| AOS | Animate on scroll library. | AOS |
| ScrollReveal | A JavaScript library for easily animating elements as they enter/leave the viewport. | ScrollReveal |
| Typed.js | A JavaScript library for typing animations. | Typed.js |
Frontend Tips and Tricks 🧙♂️
| Title | Description | Links |
|---|---|---|
| 30 frontend tips | 30 frontend tips for web developers. | 30 frontend tips |
| GetFrontendTips | Tips and best practices for frontend development. | getfrontend.tips |
| TailwindCSS Best Practices | Best practices for Tailwind CSS. | TailwindCSS Best Practices |
| Center Elements with Tailwind CSS | Best practice for centering elements with TailwindCSS | daily-dev-tips.com |
| The Surprising Truth About Pixels and Accessibility | Should I use pixels or ems/rems?! | joshwcomeau.com |
Frontend Tools 🛠
| Title | Description | Links |
|---|---|---|
| Can I Use | A simple website that tracks the usage of HTML, CSS, and SVG features. | Can I Use |
| Clamp Calculator | A tool to calculate the number of lines of text that will fit in a given space. | Clamp Calculator |