So I’ve gathered a list of tools and resources for front-end developers which falls into several categories
As a front-end developers here are the best tools for formatting & optimizing your CSS.
| Website | Description |
|---|---|
| Code Beautifier | A well-known open-source CSS parser and optimizer which returns the optimised code along with a report of the changes done. |
As front-end developers, our job is, essentially, to turn designs into reality via code this graphics designs should be of help
| Website | Description |
|---|---|
| UI Design Daily | Awesome UI Components of all types |
| Illustration for 404 pages | Make a unique journey through 404 error pages on your website |
| UpLabs | Find high-quality design resources for creative agencies and more |
| Isometric | Isometric and flat graphic resources. 500+ weekly new free vectors |
| UI Gradients | A handpicked collection of color gradients for developers. |
| Cool Background | Cool background generator, it's entirely customizable. |
| Pattern Library | A great collection of pattern for the people, by the people. |
Here are some Chrome extensions that can improve your productivity.
| Website | Description |
|---|---|
| Pesticide | inserts the Pesticide outlining each element. |
| CSS Peeper | A CSS viewer tailored for Designers. |
| PerfectPixel | Multiple overlays support |
| UX Check | Makes heuristic evaluations quick and easy |
| Checkbot | Finds critical SEO, speed & security problems |
| Lighthouse | For improving web performance. |
| WhatFont | The easiest way to find out the fonts used in a webpage |
| Notion Web Clipper | Where you can write, plan, collaborate and get organized |
Useful websites for web developers
| Website | Description |
|---|---|
| Netlify | A serverless platform with an intuitive git-based workflow. |
| Figma | Build better products as a team. Design, prototype, and gather feedback all in one place. |
| Responsively App | A dev-tool that aids faster and precise responsive web development. |
| Coolors | Generate or browse beautiful color combinations for your designs. |
Uncovered 5 useful sites to learn CSS
| Website | Description |
|---|---|
| CSS-Tricks | A blog dedicated to the CSS tricks and lessons. |
| W3Schools CSS Tutorials | Indepth tutorial on CSS |
| MaxiDesign | You can find Russ Weakley’s brilliant set of CSS-related tutorials |
| CSSDog | CSS Reference section which lists quick guides and color references - are very helpful |
| CSS-Discuss | CSS-Discuss is a community of CSS enthusiasts. |
Free vectors, clipart, illustrations, patterns and more
| Website | Description |
|---|---|
| Vecteezy | Find and download free vector art |
| Freepik | Free vectors, stock photos, PSD and icons |
| Free Vectors | Community of vector lovers who share free vector graphics |
| PNGTree | png, backgrounds, templates, text effects |
| Vector4Free | Free vector graphics |
| Retro Vectors | Vintage vectors and graphics |
| Freeble | Vectors, patterns, mockups and more |
| Lukaszadam | Free Vector artworks |
| Illlustrations | Beautiful 100 Illustrations - png, svg |
| Clipart | Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection! |
| Growwwkit illustrations | A set of 8 simple, black & white, stylish illustrations |
| trianglify.io | Generate low-poly backgrounds, textures, and vectors |
| blob | Generate Blob shapes for Web and Flutter apps |
| HiClipart | A community for designers to share & download transparent background PNG cliparts |
| Stories by Freepik | A collection of free and customizable illustrations for projects |
| Black Illustrations | Beautiful illustrations of black people (free and premium) |
| Delesign | A collection of free illustrations and more |
| Undraw | Browse to find the images that fit your needs and click to download. |
| Custom Shape Dividers | Free tool to make it easier for designers and developers to export a beautiful SVG shape divider |
| Servier Medical Art | 3000 free medical images to illustrate your publications and PowerPoint presentations |
| Clker | Free clip art you can use for anything you like |
| SVG wave | A free, & customizable gradient 🌈 SVG wave generator for UI designs . |
| Heritage Library | Vintage Illustrations (vector and png) |
| ROBOHASH | Generate unique images from any text |
| Tabbied | Create and customize minimally generated patterns/artwork to use for background images, print and other projects. |
| Haikei | An awesome multishape web app. |