Skip to content

List of resources front-end developers use to speed their work flow.

Notifications You must be signed in to change notification settings

ogeobubu/developer_resources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 

Repository files navigation

So I’ve gathered a list of tools and resources for front-end developers which falls into several categories

Formatting & Optimization

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.

UI Graphics

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.

Chrome Extensions

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

Websites to check out

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.

Websites to Learn CSS

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.

Vectors & Clip Art

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.

About

List of resources front-end developers use to speed their work flow.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published