20+ Must-have cheat sheets and tools for every front-end developer

Use this as your guide and reference as you start your web development journey.

First of all, front-end development is not just about the design where you will be using Photoshop, Illustrator, etc.

However, as a front-end developer, you will still have tasks that are related to designing, but not focused, because as a front-end developer, you will be responsible for turning the design into reality.

You are responsible for translating the proposed image of the project website or mobile app into a visible and functional website or application by using fundamental languages such as HTML, CSS, and JavaScript.

As a front-end developer, your task is to bridge the web designers and the back-end developers, translating the design into code whereas the back-end developers can work by plugging in the back-end code for database manipulation, data structure, etc.

Front-end development has a wide scope that requires different expertise, and along the way, you will understand how crucial and how huge it is, but you don’t have to take it in all at once.

Focus on learning the fundamentals and the basics because this will help you become a better front-end web developer in the future, so focus on building a solid foundation.

Bookmark this, take notes, use this as your reference on your journey, best of luck!

Cheatsheets

1. The ultimate Flexbox cheat sheet

Mastering CSS Layout with Flexbox

Watch a 3-minute video introduction with live demos you can view source on. The first step in any flexbox layout is to…

www.sketchingwithcss.com

2. The HTML5 JavaScript API index

HTML 5 JavaScript API Index

Edit description

html5index.org

3. OverAPI.com

OverAPI.com | Collecting all the cheat sheets

OverAPI.com is a site collecting all the cheatsheets,all!

overapi.com

Colors

4. FlatUI Colors

FlatUI design color picker.

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

280 handpicked colors ready for COPY & PASTE

flatuicolors.com

5. Simple flat color selector

Gives the perfect color if you are aiming for flat designs.

Simple Flat Colour Selector

Your browser does not support clipboard.js - copy the color code above.

color.koya.io

6. Color Hex

Color Hex - ColorHexa.com

ColorHexa.com is a free color tool providing information about any color and generating matching color palettes for…

www.colorhexa.com

7. Palettable

Palettable

Edit description

www.palettable.io

8. UIGradients

uiGradients - Beautiful colored gradients

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

www.uigradients.com

9. Web Colour Data

Colors

Please donate to keep help this service alive! I do not get paid to maintain this app and I DO NOT want to run ads. It…

webcolourdata.com

10. Trianglify

Trianglify

qrohlf.com

Images

Sources for free images, editing images, and backgrounds.

11. Canva

My favorite photo editing app, a must-have tool without a doubt.

12. Unsplash

One of the best resources ever!

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock…

unsplash.com

13. PicJumbo

Free Stock Photos & Images * picjumbo

Advertisement Show more popular stock photos " You're missing at least 50+ extra stock photos every month if you're not…

picjumbo.com

14. Gratisography

Gratisography - Free High-Resolution Photos

The world's quirkiest collection of free high-resolution pictures you can use on your personal and commercial projects…

www.gratisography.com

Fonts

15. Google Web Fonts

The most popular one and I highly recommend you use this tool. It is very efficient, there are thousands of fonts to choose from, it has such a good design, and it’s 100% free, it’s almost perfect!

Google Fonts

Making the web more beautiful, fast, and open through great typography

www.google.com

16. Font Squirrel

Free Fonts! Legit Free & Quality | Font Squirrel

Font Squirrel relies on advertising in order to keep bringing you great new free fonts and to keep making improvements…

www.fontsquirrel.com

Icons

17. Font Awesome

Vector icons that you can instantly customize and use.

Font Awesome

Edit description

fontawesome.io

18. Material Design Icons

Material Design Icons by Google Design.

google/material-design-icons

Material design icons is the official icon set from Google. The icons are designed under the material design…

github.com

Google Chrome Development Tools

19. ColorZilla

It’s an advanced color picker tool to easily get color combinations, this is similar to the other tool called Eyedropper, which is widely used in graphic design software like Illustrator and Adobe Photoshop.

ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

chrome.google.com

20. Full Page Screen Capture

This is the best tool compared to its competitors. Note that you can download the image of the screenshot either in PDF or PNG format.

Full Page Screen Capture

Capture a screenshot of your current page in entirety and reliably-without requesting any extra permissions!

chrome.google.com

21. Page Marker

This is highly useful. You can easily mark or draw anything within the webpage, you can choose colors and even the size of the marker, and the best part is that you can download the screenshot along with the drawing or marks you created.

Page Marker

Draw directly on any website in realtime without the hassle of taking a screenshot!

chrome.google.com

22. Page Ruler

Every designer knows that alignment is crucial. This is my recommended tool compared to its competitors, download it.

Page Ruler

Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.

chrome.google.com

23. Shift Click Image Extractor

Have you encountered a situation where you wanted to save an image from a website but, unfortunately, you are unable to use right-click to access the save image property?

This extension helps you solve that problem, this may be not very important but a good solution when you encounter such a thing.

Shift Click Image Extractor

Extracting / sharing images: now easy as Shift

chrome.google.com

24. Viewport Dimension

As you learn web development, you will start learning how to make your websites responsive, so you need to have a tool that will help you see the dimensions and current sizes of your browser’s window.

This is very useful as you design and set when the adjustments should take place, so this tool shows you the exact current dimensions and sizes.

Viewport Dimensions

This extension displays Chrome's viewport dimensions when resizing the browser window.

chrome.google.com

25. CSS Used

This is a good one! Have you encountered websites that have a really good design and you wonder how they code their CSS? Here’s a cool tool for you, you can actually see the website’s CSS code using this tool.

CSS Used

Get all css rules used by the selected DOM and its children.

chrome.google.com

26. WhatFont

This is one of the most popular Chrome extensions that is widely used by every front-end developer.

This tool is used to determine the current font used on a specific website, honestly, it is very difficult to determine or distinguish the different fonts, so this tool is a must.

WhatFont

The easiest way to identify fonts on web pages.

chrome.google.com

Conclusion

I hope you enjoyed this article and I hope it brings you some gold nuggets and that it benefits you.

Thank you for reading!