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.

squoosh.app

tinyjpg.com & tinypng.com


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?

placeholder.com

dummyimage.com

picsum.photos

placeimg.com

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.

app-mockup.com

placeit.net

magicmockups.com

smartmockups.com


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.

sendinblue.com

MailChimp


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:

Lastpass.com

1Password.com


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:

SourceTree

Github Desktop


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.

Write A Comment