How to turn web design into html and css

How to turn web design into html and css
0

#1

I have heard from a developer on YouTube that you’ll know your ready to apply for a web dev position if you can turn ANY web design from places like dribbble into html and css.

My question has two parts…

  1. Is that statement true?
  2. How do I go about turning a design I see into html and CSS?

Note:

I don’t own Photoshop or anything like that. What’s confusing me is that I’m not sure how I’m supposed to code up a design if I don’t know what any of the dimensions are for the elements that are supposed to be used for the design.

Also, many of the designs I’ve seen on Dribbble looks super complicated. Are junior devs really expected to know how to do all of this from scratch?

Thanks in advance.


#2

Good day Jason,

Thanks for raising this.
As heard by the developer, this statement is slightly true but not entirely true.
Being an aspiring developer, this means that you should be able to convert the design given to you into web pages. And that achievement requires some form of comfort and that comfort comes from similar projects or projects done before.
In my humble understanding, on one side I would assume that the intention of the developer you heard from is to raise your confidence level when you have been presented with different web design projects. As your confidence level rises by attempting to design different dribbble projects, you also get to know your weaknesses. Your weaknesses may be around responsive navigation bars, or responsive images. That, you learn when your spend time on projects presented on dribbble.
On the other side, dribbble is filled with so many projects that it reduces your time or excuses when it comes to building a presentable portfolio to assist you when trying to apply for web developer positions within the front-end category.
As a rule of thumb, start with the simplest you can see. I’m doing something similar in my 100 days of UI design(https://codepen.io/geek4ctrl/) while getting my inspiration from Oliur(https://dribbble.com/ultralinx) . It is no way close to perfection but if you’re still looking for where to start, I hope it will trigger some imagination.
Lastly, don’t focus on having the exact output. Having something similar will be enough since some of the pictures and logos are the product of working with Photoshop, Sketch or other UI products.
Start simply!


#3

Thank you for that reply. What you said makes a lot of sense and I’ll take that advice and apply it. I guess I was just overthinking the whole process.