If ever there was a time to learn how to code, it is now!
Here is a really useful article from Ann Adaya who has put together a useful short guide to start you on your web development journey.
20+ Must-have cheat sheets and tools for every front-end developer
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
2. The HTML5 JavaScript API index
3. OverAPI.com
Colours
4. FlatUI Colours
5. Simple flat colour selector
6. Colour Hex
7. Palettable
8. UIGradients
9. Web Colour Data
10. Trianglify
Images
Sources for free images, editing images, and backgrounds
11. Canva
My favourite photo editing app, a must-have tool without a doubt.
12. Unsplash
13. PicJumbo
14. Gratisography
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!
16. Font Squirrel
Icons
17. Font Awesome
18. Material Design Icons
Material Design Icons by Google Design
Google Chrome Development Tools
19. ColourZilla
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.
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.
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.
22. PAGE RULER
Every designer knows that alignment is crucial. This is my recommended tool compared to its competitors, download it.
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.
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.
24. 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.
25. 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.
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!
