How to convert a Design to Code like a pro

This article is a work in progress. I still need to add much more content. Don’t mind the mistakes if you see any

About three and a half years ago when I was in my first year of engineering all I would do was to keep designing perfect layouts. I cannot stress how much that changed my designing/developing skills. Now I feel like I am a developer who understands a designer’s feelings ( at least for to some extent ;) ).

I now tell to people who want to get into frontend the first step would be to learn basic and then get into converting designs to code. Later getting into perfecting it, making it responsive and it goes on.

I would like tell you how I used to start my design to code conversion designs. This is written considering a beginner in mind so follow along even if you are a beginner.

I will consider you will be taking an image and converting it to code. Not a design file from photoshop/sketch.

1. First thing is start small, if you are a beginner start small, like designing smaller components. I don’t know how many days have I spent figuring out building a grid system using float.
2. Start by imagining how would you start out. The first thing. With you pick a header first or sidebar first. If you have no clue start with one, you will find a way whats to pick first next time depending on the design.
3. Now, Start coding now, bring out the basics in you. No matter if its right or wrong start doing, if stuck google it, visit documentation ( the source of all coding energy ).
4. Start interacting with your local communities,or slack channels or ping freeCodeCamp. They will help you in anyway. I wish I could get what freecodecamp provides today at my start of career. Now I direct most of them there.
5. Use online code editors like codesandbox| codepen.io | jsfiddle.net . These tools increase your speed of development.
6. Start using developers console. Get the hang of it. https://developer.mozilla.org/en/docs/Tools/Browser_Console https://developers.google.com/web/tools/chrome-devtools/console/
7. After having the basic part ready. Start making it perfect, make it responsive, give every thing a fine touch.

A design from dribbble.

Techniques that might be of extreme use while you convert.

1. If you have a photoshop/sketch/xd files of the website its not a problem to pick colors etc. But imagine you are converting an image into code. In this case open up that image in browser. Open developers console by pressing ctrl+shift+i or F12 go to the styles tab in the bottom and simply type background:#fff now you will have a color picker available and use that to pick colors from the image (as shown in the image,though colors picker is not visible here)
2. I sometimes use a ruler chrome extension https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn
3. Use top left arrow element of the console to select elements & measure dimensions if necessary.
4. Start with rough layouts , slowly get into elements and then start designing them. Finalize by giving a finishing touch.
5. Do not start building a css framework or some huge routine pattern. If this design is short lived/just for fun then try to reduce the complexity and just get the work done.
6. Don’t forget to credit the design’s owner if its not yours, tools , freebies etc.

I recently converted a design by https://dribbble.com/divanraj for a workshop we conducted ( to show what attendees will be taught ), you can check it our here. https://twitter.com/theevilhead/status/1011252317356724224

My twitter : https://twitter.com/theevilhead/

Checkout paybackhub.com for huge cashbacks on your favourite softwares.