Boost your Front End Development with these tools

We all know that working on Front End gives us a lot of space to explore with images, illustrations, placeholders, JSON, themes,VS code plugins etc so I have collated a list of collections which is a must have for every Front End Developers. I have been using these tools for a few years now and it’s pretty much covers everything we all require during our course of development.

1. Visual Studio Code (text editor)

Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

URL: https://code.visualstudio.com/download

2. Emmet (code tool)

Emmet support is built right into Visual Studio Code, no extension is required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets

URL: https://emmet.io/download/

3. Live Server (for VS Code)

A Quick Development Live Server with live browser reload.
Start or Stop server by a single click from status bar.
Open a HTML file to browser from Explorer menu.[Quick Gif Demo].
Support for excluding files for change detection.

URL: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

4. Material Theme (for VS Code)

The most epic theme now for Visual Studio Code. It changes your folder icons to Material Design theme.

URL: https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

5. Prettier (code tool)

Prettier is an opinionated code formatter with support for:
JavaScript, including ES2017

• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML

URL: https://github.com/prettier/prettier

6. Auto Rename Tag (for VS Code)

Auto rename paired HTML/XML tag

URL: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

7. JSON Viewer (Browser Extension)

The most beautiful and customisable JSON/JSONP highlighter that your eyes have ever seen. It is a Chrome extension for printing JSON and JSONP.

URL: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

8. Affinity Photo (Photo Editing)

If you could create your own photo editing software, it would work like this. Whether it’s quick corrections, delicate retouching, or immersing yourself in complex fine art with hundreds of layers, Affinity Photo has you covered.

URL: https://affinity.serif.com/en-us/

9. GIMP (Photo Editing)

GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.
Whether you are a graphic designer, photographer, illustrator, or scientist, GIMP provides you with sophisticated tools to get your job done.

URL: https://www.gimp.org/

10. Pexels (for photos)

Free stock photos you can use everywhere. ✓ Free for commercial use ✓ No attribution required.

URL: https://www.pexels.com/

11. Unsplash.com (for photos)

Unsplash is a website dedicated to sharing stock photography under the Unsplash license. The website claims over 110,000 contributing photographers and generates more than 11 billion photo impressions per month on their growing library of over 1.5 million

URL: https://unsplash.com/

12. Placeholder.com (for placeholder images)

Placeholder.com is a free image placeholder service for web designers, serving billions and billions of images each year. You can specify image size & format (.GIF, .JPG, .PNG, .WEBP), background color & text color, as well as the text.

URL: https://placeholder.com/

13. tinypng.com (compress images)

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

URL: https://tinypng.com/

14. Figma (design websites)

Figma is a free, online UI tool to create, collaborate, prototype, and handoff.

URL: https://www.figma.com/

15. UI Gradient & Colors (websites for color palettes)

A handpicked collection of beautiful color gradients for designers and developers.

UR: https://uigradients.com/

16. DaVinci Resolve (videos for browser)

DaVinci Resolve 16 is the world’s only solution that combines professional 8K editing, color correction, visual effects and audio post production all in one software tool! You can instantly move between editing, color, effects, and audio with a single click.

URL: https://www.blackmagicdesign.com/in/products/davinciresolve/

17. Font Awesome (for icons)

Font Awesome CDN is the easiest way to get Font Awesome on your website or app, all with just a single line of code. No downloading or installing!

URL: https://fontawesome.com/

18. Undraw (for free illustrations)

Create better designed websites, products and applications. Browse to find the images that fit your messaging, automagically customise the color to match your brand and use it as a normal image, embedded code or directly in your design workflow.

URL: https://undraw.co/

Thanks for reading! If you have any questions, feel free to reach out at rajrock38@gmail.com, connect with me on LinkedIn, or follow me on Medium and Twitter.
If you found this article helpful, it would mean a lot if you gave it some applause👏 and shared to help others find it! And feel free to leave a comment below.