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.