1. What is Pixel Perfect layout. This is a special technique for creating the structure of the HTML code, which allows the rendered HTML template to match the original layout to within a hundredth of a pixel. When applying an html template to a PSD layout or a layout from Figma, there must be a complete match of graphic elements, images and text. 

       2. Apply Pixel Perfect layout. The technique of working with Pixel Perfect layout occurs through the use of special plugins created for certain browsers, as well as using specialized scripts. The main stages of working with Pixel Perfect layout include the following procedures:

• The original PSD layout must be saved to your computer.

• An Html-template made according to this layout is opened in the browser, after which, using the plug-in, a copy in .png format must be applied to the made-up page.

• After overlay, you can see the difference between the arrangement of elements on the png copy and the html layout. Next, the values ​​are adjusted for an exact match.

         3. Tools for Pixel Perfect layout. Pixel Perfect layout requires certain plugins or scripts to make fine adjustments to images and settings. The most popular and effective plugins and scripts for Pixel Perfect layout are worth highlighting:

• Pixel Perfect for Firefox;

• Pixel Perfect for Google Chrome;

• X-Precise;

• pixLayout and others.

            All scripts and plug-ins are distinguished by a convenient and understandable interface, wide functionality, ease of connection and comfortable settings that allow you to type codes faster and more efficiently. The installation method is very simple. We`re going to the chrome store. Enter Pixel Perfect. And immediately we see Pixel Perfect by wellDoneCode. Accordingly, we install it. What. We have installed the tool. And how to use it? First, we will open the html template that we are rendering in the browser. And at the top of the browser, click on the extension icon. After that, the window of the utility itself will pop up. And we can move to any part of our screen. Next, we need to add the layout that the designers sent us. To do this, we click on the "add your first layer" button. After that, the explorer will open, where you must select your template. Pixel Perfect now displays the main functionality.

              In addition to this, it can be seen that now the html template contains the image that we uploaded earlier. You can move your layout by simply dragging the layout itself or by using the arrows that are in the menu. Also, you can center the image if you click on the icon that is inside the arrows. And you can change the transparency of the layout itself in relation to the html template. If we click on the button, we can minimize the utility so that it does not interfere with our comparison.

           Technology Benefits.

 • The client gets what he expects

• The client coordinates the page layout with the designer and expects the result to be the same. If the finished project differs from the layout, then it will take time and effort to explain to the client why it didn`t go beyond the plan With Pixel Perfect, these situations can be avoided. After all, the finished page is fully consistent with the layout.

• The team does not waste time on correspondence. If the client has a designer in one country and developers in another, then accurate layout will simplify communication between the parties.

• The team does not have to conduct a lengthy correspondence with explanations for their part of the work. Designers will create the layout, and layout designers will code it exactly. The layout is much faster. No need to constantly switch between the browser and the PSD layout while writing the code, because the layout takes place right in the browser. You just need to open the prepared HTML template, then the page layout, and then edit the code directly in the inspector. Flaws Pages are difficult to change In the usual layout, site elements are divided into groups, for which the same styles are prescribed. For example, lists or icons can have the same styles. This simplifies the layout designer`s work when you need to add a new section to the site. There are no groups in Pixel Perfect, each element has its own style. Assembling a new page from such elements is quite difficult, and adding new sections of the site will take a lot of time. It is also difficult to maintain the layout of existing pages. One has only to add one more menu or text block, as the whole page will go apart. Therefore, this layout should be used for those projects that will not change in the future. For example, for emails.

https://www.youtube.com/watch?v=6t3ASd-vkrU