How to create Pixel Perfect Web Pages?
Tags: webdev, css, html, web
Published: 2021-04-30 17:54:10


*Updated (10th May)*
Part 2 Link - https://dev.to/pixelperfectpage/part-2-how-to-create-pixel-perfect-web-pages-4ocn 


Tools required: https://pixelperfect.page/app 
(No installation/ No registration required)

#Theory
Before we get on to how to design pixel perfect pages, it is important to understand two key parameters (Anchors & Dimensions)

**Anchor** is a definition of how a specific element is anchored on a page. Few examples are

1. 20 pixels from top and 20 pixels from left.
2. 20 pixels from top and 10% from left

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcw4yppzvylkvg7tapwr.png)

The same way we are anchoring an element to the *Top* and *Left* we can do the same with *Right* and *Bottom* as well. 

**Dimensions** 
Now lets take a look at the second parameter Dimensions. Dimension is the measure of how big (width & height) the specific component is. The dimension could be in either absolute units (pixels, points) or relative units (em, vh/ vw, %).  Ref: https://www.w3schools.com/cssref/css_units.asp

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz9csszp7piepzxxqvhm.png)

---

#Objective 
Enough of the theory. Now let us create a simple design as given below. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tzxmaurrh9cjohwhvux.png)

It might be a very simple example, however we will try to cover every aspects involved in building a pixel perfect page. 

#Hands On
For this we are going to use the  https://Pixelperfect.page tool. Lets create a new document by clicking the *’New Document’*


**Step 1: Prepare the root component with the background image.** Select the *’Root’* on the layout explorer on the left. Lets set the properties of this component. 

Set the background image by clicking the choose button.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bp46qbvofevcs49rwehc.png)

Set the Dimensions of this root canvas. This is to fill 100% in both width and height. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4d37o9opk22pky8rpu8m.png)

Now your page should look like below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d70q8ucpvc2jp3xmf97j.png)


**Step2: Insert a text field on the canvas**
Click the *’New Child’* button. This will insert a text on the canvas. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gpbhynke1ku0xs2rp3e.png)


**Step 3: Set the Anchor for the new component added**
Click the new component created from the component explorer. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rffwvywqvmbmg69udrja.png)


**Step 4: Set the Dimension for the new component added**

Set the width and height of the newly added component respectively. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcf86uub4fvhmmux6hjy.png)


**Step 5: Set the text and text size property**
Go to the text tab and set the text and the text size property as given below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o385gf1in4usf8cjf65l.png)

**Repeat Step 2-5 and add a new field with the below properties**

Please make sure you select Root on the layout explorer before you click the *’New Child’* button.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89ai01xtc7suzznzp4re.png)


*Anchor*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxf9a2zo74fak0c86fyz.png)

*Dimension*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orkqzuavv94sgexltmnu.png)


*Text Properties* 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xh3xpykdiryvc4mwpbt7.png)

Now the screen design would look like something below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuxyynrm3rf2oc05szvw.png)

#Conclusion
We are mostly done. Though this is a very simple example, we have covered the fundamentals required to build pixel perfect designs. 

https://pixelperfect.page/app also allows exporting the design created as standalone html page  or as web components from the *’Html Code’* Tab. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eh249awu7m5t3jtq9n8z.png)