There are a couple of tools that allow you to break down a website into its HTML and CSS elements. Depending on what browser you use, some are more compatible than others. In this post I will talk about Google Chrome and in specific, the Developer Tools that come together with the browser.
Table of Content
Opening the Developer Tools
If you do not have Google Chrome and would like to follow along, click here and download the browser for free. If you have installed the web browser, open the development tools by going to View ? Developer ? Developer Tools.
Viewing padding, margin and border
- Inside Space
Live visual editing
A cool feature that you should take advantage of is the live visual editing capabilities. By changing the values, one can see the website update live. However once you refresh the webpage, the changes that you did with the Developer Tools will disappear. This aspect is really great for people who want to see how something looks before coding it in permanently. By changing the values in the bottom right window , you are able to see what small changes will do to the website instead of the hassle of editing and uploading a permanent change, just to realize that you wanted it 2px’s bigger…!
You can also edit the stylesheet to see what a change to a style would do to the entire website. First more to the “Resources” tab, which is located top right of the Developer Tool’s window. Here you are able to see everything that is grabbed so that the website can be seen. This includes things like images, typefaces, scripts, cookies and other assets.
As a person who does not code websites for a living, I only have a basic understanding of HTML and CSS. I am glad for tools like Google Chrome’s Developer Tools that allow people like me to visually see how code affects a website without the extensive knowledge of CSS and HTML and I hope that more people take advantage of it! The aspects of the Developer Tools that i went over have been valuable assets for me while i edit my own websites. These tools have many other features and i certainly encourage exploring with them!