Pixels

I am progressing nicely through the Codecademy course. I was amazed at how the course assumed that early developers know about pixels. This screen size measurement is used frequently in the styling of web pages. It is usually designated as 30px or 100px. A clear definition was not given.

Pixels represent tiny points of light on your screen. If the tiny points of light are spaced closer together, then you should get a better quality image. This represents the resolution of your screen. Devices that displays your web content comes in a variety of sizes. The screenshot below gives you some standard sizes of common devices used to browse web content.

I have found a nice resource (Online Ruler) to help me determine the 2 dimensional pixel measurement on my screen. You are able to take a screen shot of your desktop, then take measurements as you like on the screenshot. You can also use the snippet tool that comes with windows to capture a portion of your screen with this ruler. I think this will be very useful when developing your style and layout for a web site.

Below is an example of how I used it to get the dimensions of my daughter’s lips on this screen. According to the ruler, the dimensions are 179 pixels wide and 59 pixels height. Also, it gives the diagonal pixel measurement to – 188px. Since I am an engineer by heart, I am sure I will be using this tool when I design my own web sites. Happy coding.

Leave a Comment