DEV Community

Bipon Biswas
Bipon Biswas

Posted on

25 Useful tools for Frontend Developers

✅ UX challenges:
As the saying goes, practice makes a man perfect. Indeed it is. The more we practice the better we know a subject. Here are various website UX design exercises that you can practice. You can check your skills through challenges. It seems quite useful. uxtools.co

✅ Collect UI:
Designers share their designs here through various challenges. New designs are always updated. You can see the good designs from here and make a good design like your own. collectui.com

✅ PixelSnap:
In the words do not pay pay calculation? But the calculation here is in pixels. It works across the entire screen in all types of applications. You can measure anything. It will come in handy for those who need everything pixel perfect. getpixelsnap.com

✅ Landing Page Checklist:
What is not in it? Landing page has more than 100 tools. Be it from domain name, logo maker, illustration or design software. You can visit. andingpage.fyi

✅ Checklist Design:
Many details of website design have been described so far. It will help to increase the knowledge of web design elements. Must visit. checklist.design

✅ Museum of Websites:
Details of various development stages of UI of popular websites are compiled here. Get a good overview of how to design and develop a website interface. kapwing.com

✅ UI Play Book:
I found this website very useful. Here the description of various parts of UI is given in very organized and detailed manner. uiplaybook.dev

✅ Standard Resume:
If you want to make a resume very simply in a short time, then you can definitely visit this website. Here are various templates and examples from which you can create something unique yourself with an idea. standardresume.co

✅ humaaans:
Websites often require human shapes. You can make different types of human body by remixing yourself through humaaans. It also has different types of templates. It is very easy to make your own custom design. humaaans.com

✅ Get Waves:
Custom wave animation effects for websites can be easily found here. getwaves.io

✅ Animist:
This website will help you to practice the animation effects of the website. Many of us do not know the names of all the effects properly. It can be seen by trying. Fairly well. animista.net

✅ Blobmaker
The blob shapes used on the website can be made with colors and shapes of your choice from now on. You can download and get the svg code too. You can try. blobmaker.app

✅ Code to Go:
Combines snippets to help solve common website development problems. Here you will find the most updated snippets used by JavaScript and React. There are quite good resources, you will understand once you see. codetogo.io

✅ UX Project checklist:
This will help you check if the UX design features are standard or not. uxchecklist.github.io

✅ UX Flow:
Through this, you can easily create beautiful website layouts in sketch, Adobe and figma. There are many tools. You can visit the website. products.ls.graphics

✅ Drawkit:
A good resource of various hand-drawn vector illustrations on the website. drawkit.com

✅ 3Dicons:
A good open source resource of various 3D icons used in website design and development. will benefit 3dicons.co

✅ Web Gradients:
A good resource of different gradient background colors for websites. Many designs are given. webgradients.com

✅ Google Fonts:
A website very familiar to all of us. Various free fonts are available here. fonts.google.com

✅ Very sexy
It is a familiar face to almost all of us. Everyone's first choice for generating dummy text on websites. loremipsum.io

✅ Responsively:
A very useful application to check websites for different devices. I personally like it very much. There are a few different types of functionality that you can explore. responsively.app

✅ UnusedCSS:
Provides a clean CSS file by removing unused CSS properties. unused-css.com

✅ Spline:
A very useful application. Through this it is possible to create 3D effects for websites. From creating different 3D scenes, editing different materials, many things can be done with it. Very good, you can definitely visit. spline.design

✅ Sketch2Code:
Hand drawn designs can be easily converted to html using artificial intelligence. sketch2code.azurewebsites.net

✅ Custom Shape Devider:
A shape divider at different places on the website, at the beginning or at the end of the section, increases the beauty of the design. shapedivider.app

Special Thanks
Jakia Binte Amin

Top comments (3)

Collapse
 
imakashrana profile image
Akash Chauhan

With the rapid pace of change in the tech industry, it can be difficult to predict which skills will be in demand in the future ?
However, there are top 10 skills that are essential for any front-end developer.

Collapse
 
trinhthinh388 profile image
Thinh Trinh

Thanks for the list!
I always use dotrand.com to generate fake data for testing.
Its functionality and its UI are so good, I love the phone numbers generator most

Collapse
 
kirank108 profile image
kirank108

Thank you Bipon for this list which saves time in developing.