How to Code Like a Pro

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!