In this article, I would like to introduce you to some useful tools that can save you time and effort in your work as a web designer or web developer.
CSS generators
CSS is a great way to build layouts or effects. But you don’t have to write every line by hand. Here are some great generators that let you create different effects or color transitions and use the generated CSS code.
blobs.app
Beautiful blobs that can be used as background elements
shapedivider.app
To separate areas on your website
the-echoplex.net/flexyboxes
A very useful flexbox generator
cssgradient.io
As the name suggests, you can create beautiful color gradients with this generator
webcode.tools/generators/css/keyframe-animation
CSS Keyframe Animation Generator
cubic-bezier.com
Smooth cubic-bezier sequences for your CSS animations
animista.net
Beautiful prefabricated CSS animations
Browser-Testing:
To ensure that your websites look their best on different browsers, devices and screen sizes, you should also test your website well. With the following tools you can test your website or app on different operating systems, browsers and devices.
browserstack.com
Probably the best known tool for testing websites and apps
lambdatest.com
Another tool with which you can simulate different browsers and devices
Image compression:
A website should of course load quickly. The compression of images is very important. With the following tools you can easily reduce the size of your images without much loss.
Dummy pictures
Are you creating a website and don’t have any photos of the client or photographer yet? Why not build the website with placeholder images that you can exchange later?
You can find more placeholder generators here -> Useful placeholder image tools – From cat photos to Nicolas Cage
Mockups:
With these generators you can easily assemble your screens into different images with a few clicks to present them in your portfolio or show them to your client.
Newsletter Tools:
So that you can keep your website visitors informed about news, the following newsletter systems are very suitable. Both are also available as a free variant.
Password Manager:
With all the tools and websites out there, you should manage your passwords neatly. Here are my top apps for your password management:
Git Interface Tools
For those who don’t want to deal with command lines for GIT (but you should still know and be able to do the basics). Here are two programs with which you can visually edit your version control:
Fonts
https://www.myfonts.com/WhatTheFont
is to be seen? Then you can upload the image here and the tool will provide you with suitable suggestions.
https://www.whatfontis.com/
Another tool to find fonts from an image file
https://fontjoy.com/
A tool to find matching fonts
I hope you like this collection of tools. If you know of any other useful tools, please post them in a comment below.