What tools to use as a Front-End developer?

Hi there,

First message in this group, I am glad to be here with you.

What tools to use as a Front-End developer?

There are some listings on different sites.

However it miss a crowndsourced list from Indie hackers.

To do my part as a newbie here, I will regularly edit this post with your answers to build this reference list on IH.

List for Back-End tools : | upcoming |

PS : Any feed-backs and suggestions are warmly welcome !

---

| GENERAL |

[Free learning ressources]
-
-
-
-

[Paid learning ressources (with discount code?)]

• Push your web development skills to the next level : https://laracasts.com reported by @dowu

---

| SKETCH + UI/UX DESIGN |

• Create, prototype, collaborate, and bring your ideas to life with the design platform https://www.sketch.com reported by @Johan_Bavaud

• Accessible UI Design : https://balsamiq.com/ reported by @Johan_Bavaud

• The Guide To Design : https://start.uxdesign.cc/ reported by @Johan_Bavaud

[Free learning ressources]

• https://lawsofux.com/ reported by @Johan_Bavaud
• Material is a design system – backed by open-source code – that helps teams build high-quality digital experiences. : https://material.io/ reported by @Johan_Bavaud

[Paid learning ressources (with discount code?)]

• Learn to design : https://designcode.io/ reported by @dowu

---

| HTML |

• +800 HTML template under CC license : https://templated.co reported by @Johan_Bavaud

• Automate your image generation : https://htmlcsstoimage.com/ reported by @Johan_Bavaud

[Free learning ressources]

• HTML Full Course - Build a Website Tutorial: https://www.youtube.com/watch?v=pQN-pnXPaVg&t=2s reported by @Johan_Bavaud

• Learn HTML5 and CSS3 For Beginners - Crash Course : https://www.youtube.com/watch?v=vQWlgd7hV4A reported by @Johan_Bavaud

• 7 Essential HTML Tags that Separate SEO Pros from the Rookies: https://neilpatel.com/blog/html-tags-for-seo/ reported by @Johan_Bavaud

[Paid learning ressources (with discount code?)]
-
-
-
-

---

| CSS |

• CSS animation on demand: https://animista.net/ reported by @Johan_Bavaud

• A set of small, responsive CSS modules : https://purecss.io/ reported by @Johan_Bavaud

• Perfect Color Palette finder : https://mycolor.space/ reported by @Johan_Bavaud

• CSS Filter Generator : https://www.cssfiltergenerator.com/ reported by @Johan_Bavaud

• Reduce browser inconsistencies : https://meyerweb.com/eric/tools/css/reset/ reported by @Johan_Bavaud

• PostCSS plugin which parses your CSS and adds vendor prefixes : https://autoprefixer.github.io/ reported by @Johan_Bavaud

• You Don't Need JavaScript: https://github.com/you-dont-need/You-Dont-Need-Javascript reported by @Johan_Bavaud

[Free learning ressources]

• Learn to use "flexbox" : https://flexboxfroggy.com/ reported by @Johan_Bavaud

• CSS Tutorial - Zero to Hero (Complete Course) : https://www.youtube.com/watch?v=1Rs2ND1ryYc&t=14810s reported by @Johan_Bavaud

• Learn HTML5 and CSS3 For Beginners - Crash Course : https://www.youtube.com/watch?v=vQWlgd7hV4A reported by @Johan_Bavaud

• Create an animated 3D book in CSS, step by step https://scastiel.dev/posts/2020-07-23-animated-3d-book-css/ reported by @Johan_Bavaud

• Exploring CSS 3D Transforms: https://rupl.github.io/unfold/ reported by @Johan_Bavaud

[Paid learning ressources (with discount code?)]

• best way to learn "grid", "flexbox" and "CSS Transform" : https://codepip.com/games/ reported by @Johan_Bavaud (tested and approved - start at 6$/month)

---

| VANILLA JAVASCRIPT |

• Press any key to get the JavaScript event keycode : http://keycode.info/ reported by @Johan_Bavaud

[Free learning ressources]

• Intro to vanilla JS : https://gomakethings.com/start-here/ reported by @Johan_Bavaud

• JavaScript: Understanding the Weird Parts : https://www.youtube.com/watch?v=Bv_5Zv5c-Ts reported by @Johan_Bavaud

• Get Daily Developer Tips for vanilla JavaScript (Newsletter with 10k+ daily subscribers) https://gomakethings.com/ reported by @Johan_Bavaud

• Practice for free (exercices + solutions ) https://practice.dev/challenges?domain=frontend reported by @Johan_Bavaud

• SCRIPT-8 is a fantasy computer for making, sharing, and playing tiny retro-looking games: https://script-8.github.io/ reported by @Johan_Bavaud

• An open source list of paid & free resources to learn vanilla JavaScript. https://github.com/snipcart/learn-vanilla-js reported by @Johan_Bavaud

• Join an elite team of scientists at a top-secret research facility to uncover the true nature of the JavaScript programming language! https://www.twilio.com/quest/learn/javascript reported by @Johan_Bavaud

[Paid learning ressources (with discount code?)]
-
-
-
-

---

| FRAMEWORKS |

• Free templates for Frameworks https://www.creative-tim.com/templates/free reported by @Johan_Bavaud

• Paper.js — The Swiss Army Knife of Vector Graphics Scripting : http://paperjs.org/ reported by @Johan_Bavaud

[Free learning ressources]
-
-
-
-

[Paid learning ressources (with discount code?)]
-
-
-
-

---

| API |

• A categorized list of all the Music APIs : https://musicmachinery.com/music-apis/ reported by @Johan_Bavaud

• A collective list of APIs. Build. : https://apilist.fun/ reported by @Johan_Bavaud

[Free learning ressources]
-
-
-
-

[Paid learning ressources (with discount code?)]
-
-
-
-

---

| JQUERY |
-
-
-
-
-

[Free learning ressources]

• jQuery Cheat Sheet for Beginners : https://websitesetup.org/jquery-cheat-sheet/ reported by https://nickschaeferhoff.de/ (through e-mail)

[Paid learning ressources (with discount code?)]
-
-
-
-

---

| LIBRAIRIES |

• A non-exhaustive list of WebGL and WebGPU frameworks and libraries : https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc reported by @Johan_Bavaud

[Free learning ressources]
-
-
-
-

[Paid learning ressources (with discount code?)]
-
-
-
-

---

| FUN |

• https://patatap.com/ reported by @Johan_Bavaud

• https://typatone.com/ reported by @Johan_Bavaud

• http://victordarras.fr/cssgame/ reported by @Johan_Bavaud

---

|RELATED POSTS ON INDIE HACKERS |

• If you're already an experienced programmer what are the best tools to ship things fast? https://www.indiehackers.com/forum/if-youre-already-an-experienced-programmer-what-are-the-best-tools-to-ship-things-fast-0c8b75153f?commentId=-LBPjqlnuNVRB0DJ7JPP reported by @Johan_Bavaud

• What tools do you use to test your frontend? https://www.indiehackers.com/post/what-tools-do-you-use-to-test-your-frontend-f5de024ee4 reported by @Johan_Bavaud

• yours ?

---

| INSPIRATION FOR YOUR NEXT PROJECT |

• https://poolside.fm reported by @Johan_Bavaud
• https://justforfun.io/ reported by @Johan_Bavaud
• https://neal.fun/ reported by @Johan_Bavaud
• https://abakcus.com/tools/ reported by @Johan_Bavaud

---

| PEOPLE TO FOLLOW |

---

| OTHER |

• This is a list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers : https://free-for.dev/#/ reported by @Johan_Bavaud

• What time is it at Product Hunt? https://whattimeisitatproducthunt.com/ reported by @Johan_Bavaud

• Tech community : https://www.westryve.com/ reported by @Danlewistech

• The Cathedral and the Bazaar : http://www.catb.org/~esr/writings/cathedral-bazaar/cathedral-bazaar/ reported by @Johan_Bavaud

• Tools of The Trade, from Hacker News : https://github.com/cjbarber/ToolsOfTheTrade reported by @Johan_Bavaud

---

| YOUR IDEA(S) ? |

---