Web Development Tools

This toolkit is intended as a library and resource for designers and frontend developers, but it's important to first understand how the overall development environment works to best leverage the appropriate tool.

16 killer web apps you should use to increase productivity (all free)

  1. Lorem Picsum

    Lorem Picsum is a placeholder generator for pictures, with lots of customization options. Provide parameters for your images directly in the URLs.

  2. Remove .bg

    Remove the background of any photo automatically. Just select your image and instantly download the resulting image with the background removed.

  3. PFPmaker

    PFPMaker generates professional profile pics from any photo. It uses background removal AI, beautifies your photo, and generates dozens of profile pic variations automatically.

  4. CSSGradient

    CSS Gradient makes it dead simple to create fresh web gradients. Includes a collection of tools to help you level up your gradient game.

  5. Neumorphism .io

    Neumorphic shapes look incredible but are difficult to create. This generator makes it easy to create the shapes you've envisioned.

  6. Animista

    Animista is a great tool for creating custom CSS animations with various effects. Once you created your animation, generate the code and integrate it into your project.

  7. FontJoy

    FontJoy finds interesting font pairings using the embedding layer of a neural net. Click a button and a unique pairing is served upon our minimal interface.

  8. Logo Ipsum

    When in a rush to get a placeholder logo, feel free to use Logo Ipsum with tons of available choices and different logo designs fitting every need.

  9. Carbon

    Create and share beautiful images of your source code. Another great alternative is ray .so.

  10. Poet .so

    Capture and share Twitter posts as beautiful images. It makes sharing Twitter posts on other platforms more visual and attention-grabbing.

  11. BrowserFrame

    Easily wrap screenshots in browser frames. Drag-drop support. Generate screenshot from URL. Customize padding, scaling, and background color.

  12. Box-shadow

    Create modern-looking shadows. Edit their horizontal and vertical offsets, blur, and spread radiuses. Once you are done, generate the code and use it in your project.

  13. Readme .so

    The editor allows you to quickly add and customize all the sections you need for your project's README.

  14. Metatags .io

    A tool to debug and generate meta tag code for any website. Preview how your webpage will look on Google, Facebook, Twitter, and more.

  15. Favicon .io

    Create a favicon in a few clicks from text, image, or emoji.

  16. Unminify

    Free tool to unminify (unpack, deobfuscate) JavaScript, CSS, HTML, XML and JSON code, making it readable and pretty.

A/B testing (also known as split testing) is a simple process to test two versions of a page to determine which is more successful and to help businesses ensure that every change produces positive results.

Heatmap software reports how your visitors click, scroll and engage with your website so you can boost your conversion rates.

  • Compress PNG
  • Compressor .io

    One of the most efficient image compressors out there with a modern-looking UI.eautifies your photo, and generates dozens of profile pic variations automatically.

  • TinyPNG

Several ways to decrease page load:

  • File concatenation
  • Minify JS and CSS
  • CDN Hosted technology
  • Caching
  • Make as few HTTP requests as possible
  • Optimizing images
  • Use Sprites
  • Progessive JPGs
  • Use CSS3 to mimick imagery
  • Put JavaScript at the bottom

Article