The Front-end Pixel Perfect developer

BY: Edgardo Ramírez

Profile: Full stack web/front end developer, 9+ years of experience as a software engineer.

Achieving the perfect markup from a given design is not always easy, but it's an important task every Front-end developer must practice on every project because, in the end, the presentation is the one that strikes first.

In short words, Pixel Perfect is a technique that allows you to create the markup from a design at 99.9% of accuracy so when you see the design and the markup side by side, you barely notice any difference between them.

To be honest, I didn't know the term "Pixel perfect" until my 5th year of experience(or so) as a Full-stack web developer and I was surprised when a friend told me that I was the first developer he ever worked with that is actually creating the design he designed.

For some reason I thought that any developer was working that way but the reality was shocking because after received that positive feedback, I started reviewing some finished works from friends then I realised that not all of the Front-end developers actually care about the time invested from the designers to create something that was planned between them and their clients for days or maybe weeks.

In the end, we just need to use the colours, fonts, measurements, texts and assets from the design to create the markup... is not a difficult task, but many developers tend to be lazy on this topic and some of them prefer to skip some rules and just code something that could look similar.

So, that's why I decided to teach not only the usual Front-end rules I always taught to my students, but to primarily focus on creating awesome pages from any design, and by any design I mean any image they could find on Internet, by cloning any webpage or having the design in tools Zeplin or Figma, and to repeat this process over and over again until they learn how to extract colours, measure the components correctly, find fonts in case the designer/client never shared them with you, and gaining speed while coding the markup of the app.

I proudly say that I love CSS because it's a language that is giving life to our ugly HTML pages