I have been doing some clone project on my own, most of the website I clone were static page website. And there are something I want to ask you guys.
When I clone a website, I often “eyeball” what it looks like, for example, how much margin does this button have, and how much is the height of one section of the page. Then I went to the CSS file and make a change there.
However sometimes I get contradictory results when I compare my code to the actual code of the original page. (I often do this using google chrome’s dev tool)
For example in the image below, I thought the green button has a 30px of margin, and when I checked the page’s CSS file, I see a margin 0 there and a padding of 30px. I get confused. Here is the page.
So the bottom line is this: how do I measure precisely when creating a webpage? Do I get a PSD file that i can check or I need to “eyeballing” whatever I see? If so, how precise those PSD can get?
.feature-content, a container for each example, has 40px padding
it is arguable, a static image can describe behavior of an adaptive web interface, but it depends. to describe adaptive UI you’ll most probably need a kind of a design project with images of possible interface adoptions for different window sizes with DOM elements’ properties: sizes, margins, colors, paddings etc.
That is a little weird. I would have used margin too.
For measuring, I don’t think it’s important that you used margin and they used padding. So, long as it looks similar.
If you want accurate measurements without looking at their styles (so you can practice), taking a screenshot and measuring in your favourite image editor works. Or you could find a tool like xscope. xscope is Mac-based, but there must be similar apps on other platforms.
There are more ways to do certain things. Both in the design and programming/coding. So if it does look and feel right to you, and functions properly when changing screen sizes - it’s perfecto!
More precisely, yes. More easily… maybe. Comes down to how the designer set the file up. Having to open a PSD and drag out guides or boxes can take more time than just using the snapshot tool like you have been. Also, they might give you an AI file or a Sketch file (Sketch has some cool integrations like Zeplin that can speed things up). They might give you just the exported assets. You never know.
Just like how we see in these javascript exercises, we are all presented with the same challenge, but the way we all come to the correct sollution can vary wildly. Just because two people didnt come up with the exact same code doesnt mean one of them is wrong… Maybe one solution is more elegant, or the other more concise, or even if very similar, differ due to writing style and preferences in how the code is formatted.
I wouldnt sweat it too much if your code isnt precisely exactly written just like a project you are cloning…what matters is if the result is the same, and that you used proper standards.
