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.
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!
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…
OverAPI.com | Collecting all the cheat sheets
OverAPI.com is a site collecting all the cheatsheets,all!
4. FlatUI Colors
FlatUI design color picker.
Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨
280 handpicked colors ready for COPY & PASTE
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.
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…
uiGradients - Beautiful colored gradients
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.
9. Web Colour Data
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…
Sources for free images, editing images, and backgrounds.
My favorite photo editing app, a must-have tool without a doubt.
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…
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…
Gratisography - Free High-Resolution Photos
The world's quirkiest collection of free high-resolution pictures you can use on your personal and commercial projects…
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!
Making the web more beautiful, fast, and open through great typography
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…
17. Font Awesome
Vector icons that you can instantly customize and use.
18. Material Design Icons
Material Design Icons by Google Design.
Material design icons is the official icon set from Google. The icons are designed under the material design…
Google Chrome Development Tools
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.
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
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!
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.
Draw directly on any website in realtime without the hassle of taking a screenshot!
22. Page Ruler
Every designer knows that alignment is crucial. This is my recommended tool compared to its competitors, download it.
Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.
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
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.
This extension displays Chrome's viewport dimensions when resizing the browser window.
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.
Get all css rules used by the selected DOM and its children.
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.
The easiest way to identify fonts on web pages.
I hope you enjoyed this article and I hope it brings you some gold nuggets and that it benefits you.
Thank you for reading!