I am working on a project in order to improve my HTML/CSS skills. I downloaded a random PSD file and I am converting it to HTML/CSS. I want to be as close to the PSD as possible because Pixel Perfect is mandatory to recruiters. By pixel perfect I mean, close to the design not browser compatibility.
In order to achieve this, I am using a chrome extension called "PerfectPixel". I am able to place an image of the site on top and compare it to my work. For some reason, I am always one or two pixels off and I can't seem to match the image perfectly. Even the measurements from the PSD file are way off at times, so not helpful....
Does this happen to some of you or do I have to try harder ?
PS: If there is a tutorial about this somewhere, send me the link as I want to improve my front-end skills.
First of all, Photoshop is getting used less and less for webdesign at the moment. I would try to find a good Sketch or Adobe XD file and work with that. In these programs it is easier to see the measurements of different elements and you are more likely to find these programs in real designs.
To address the "pixel perfect" design: In my opinion it is better to first learn to write good code (if you haven't already) than to make your design pixel perfect. Also most companys seek for having the same overall look on the webpage as in the design more than for every element to have exactly the same measures.
Also, with responsive design (which you should absolutely do), most of the times you only get a few different sized screen designs (often one for mobile, tablet and desktop each) and have to figure out the transitions between them for yourself. In that case, it is impossible to be "pixel perfect".