10 Tools and Resources every Frontend Developer should know.

Nishant
2 min readFeb 1, 2021

There are tons of resources that can be used to increase the productivity of a Frontend Developer.

Let’s talk about some of them.

  1. Canva: Canva is a graphic design platform used to design posters, presentations, documents, Instagram posts, logos, photo collages, invitation cards, wallpapers, and more. It has a free version and a pro version. The pro version contains premium elements like photos, videos, icons, graphs, glyphs, and fonts. Check it out: https://www.canva.com/
  2. Colors and Fonts: It is a library for designers and developers. You can browser hex color codes, gradients, fonts, glyphs, and more. It is completely free. Check it out: https://www.colorsandfonts.com/
  3. Material UI: Material UI is a library for React which can make development easier and faster. It has various components like Cards, Buttons, Containers, Menu Bars, and more. It also has paid premium templates which you can purchase. Check it out: https://material-ui.com/
  4. Semantic UI: Semantic UI is another UI library like Material UI but with different themes and components. The good thing about Semantic UI is that it can be used with both HTML/CSS/JavaScript and React framework. Check it out: https://semantic-ui.com/(HTML/CSS/JavaScript), React: https://react.semantic-ui.com/
  5. Material Design: Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google’s goal is to develop a system of design that allows for a unified user experience across all their products on any platform. Check it out: https://materializecss.com/
  6. Google Fonts: You may have guessed it. It is a font library of fonts created and managed by Google. Check it out: https://fonts.google.com/
  7. MockAPI: Want to test your front-end application but don’t have time to design an API? Then, MockAPI is with you. You can create REST APIs for POST, GET, PUT, and DELETE and integrate them into your app for free. Check it out: https://mockapi.io/
  8. JSFiddle: An online compiler to write your JavaScript code. It has pre-defined boilerplates for React, Vue, ReactStrap, Bootstrap, SCSS, Angular, and more. You can also save your code for later editing and use. Check it out: https://jsfiddle.net/
  9. CDNJS: A website that contains CDN for script tags for libraries like React, Angular, Bootstrap, JQuery, Axios, and more. Check it out: https://cdnjs.com/
  10. Dribble: It’s where designers gain inspiration and feedbacks for their projects, designs, and UI/UX mockups. you can browse hundreds of shots from which you can inspire and implement in your app. Check it out: https://dribbble.com/

That’s all folks. Happy learning and experimenting.

--

--