DEV Community

loading...
Cover image for How to create Pixel Perfect Web Pages?

How to create Pixel Perfect Web Pages?

pixelperfectpage profile image pixelperfectpage Updated on ・3 min read

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

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


Objective

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

Alt Text

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

Set the Dimensions of this root canvas. This is to fill 100% in both width and height.
Alt Text

Now your page should look like below.
Alt Text

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

Alt Text

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

Alt Text

Step 4: Set the Dimension for the new component added

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

Alt Text

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

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

Anchor

Alt Text

Dimension

Alt Text

Text Properties

Alt Text

Now the screen design would look like something below.
Alt Text

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

Discussion (0)

Forem Open with the Forem app