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
I will consider you will be taking an image and converting it to code. Not a
design file from photoshop/sketch.
- 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.
- 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.
- 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 ).
- 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.
- Use online code editors like codesandbox|
codepen.io | jsfiddle.net . These
tools increase your speed of development.
- Start using developers console. Get the hang of it.
- After having the basic part ready. Start making it perfect, make it responsive,
give every thing a fine touch.
Techniques that might be of extreme use while you convert.
A design from dribbble.
- 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
F12 go to the styles tab in the bottom and simply type
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)
- I sometimes use a ruler chrome extension
- Use top left arrow element of the console to select elements & measure
dimensions if necessary.
- Start with rough layouts , slowly get into elements and then start designing
them. Finalize by giving a finishing touch.
- 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.
- Don’t forget to credit the design’s owner if its not yours, tools , freebies
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.
My twitter :
Checkout paybackhub.com for huge cashbacks on your