fbpx

How To Code Like A Pro

Laptop open on the desk next to a Kindle and Computer Monitor, How to Code

ARTICLE SUMMARY

If ever there was a time to learn how to code, it is now!

Here is a really useful article from Ann Adaya We have put together a useful short guide to start you on your web development journey.

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

Flexbox cheat sheet, code

2. The HTML5 JavaScript API index

HTML5 JavaScript API Index, code

3. OverAPI.com

OverAPI.com, code

Colours

4. FlatUI Colours

FlatUI Colours, code cheat sheet

5. Simple flat colour selector

Simple flat colour selector, code

6. Colour Hex

Colour Hex code

7. Palettable

Palettable code cheat sheet

8. UIGradients

UIGradient Code

9. Web Colour Data

Web Colour Data, code

10. Trianglify

Trianglify code

Images

Sources for free images, editing images, and backgrounds

11. Canva

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

Canva code cheat sheet

12. Unsplash

Unsplash

13. PicJumbo

PicJumbo

14. Gratisography

Gratisography

Fonts

Typography

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 Web Fonts

16. Font Squirrel

Font Squirrel

Icons

17. Font Awesome

Font Awesome

18. Material Design Icons

Material Design Icons by Google Design

Material Design Icons

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.

ColorZilla

20. Full Page Screen Capture

Full 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

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

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

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

Viewport Dimensions

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

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

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!

 

 

RELATED ARTICLES

Preparing for a job interview can feel daunting, but with the right approach, you can turn your anxiety into confidence. Whether you’re a seasoned professional...
Discover Lisa Iudiciani, Lead Software Engineer at Vista's journey of career reinvention, balancing technical growth with leadership development, and her insights on mentorship for aspiring...
Amanda Whicher, Technology Director at Hays UK&I, highlights the importance of job interviews as a two-way street, where both employers and candidates assess each other....
Lindsey Rowe, Head of Purpose Programmes and Sustainability GTM, SAP UKI, delves into how women can supercharge their careers in tech.