« Windows 8 resources | Main | iGoogle Being Retired - Tomorrow! »

Visualizing a web site's HTML code

GogglesThis article is for all of the web site maintainers out there, as well as those just trying to learn something about HTML. Check out the tools and tutorials over at webmaker.org, especially my new favorite coding toy, the X-Ray Goggles.

Any time I come across a really nice web page design, or a page with a unique feature, I jump to the obvious question: How did they do that?. The webmaker goggles can make that question really easy to answer, and they in turn are really very easy to use.

Just follow the simple instructions they provide, and you'll have the ability to check out all kinds of data just by passing your mouse over the elements of what's on your screen. It's all color coded, and structured and clean.

Click on a highlighted element to open an editing screen where you can play around with the HTML and data. In the editor view you can mock up design and content changes to the page, or check out what your own data might look like if it were put into the same HTML and CSS context.

Note: the Preview function of the editor mock up doesn't always seem to work, especially for rather small elements, but if you Save what you've done you can see even your smallest changes in the context of the full page.

Comments

Feed You can follow this conversation by subscribing to the comment feed for this post.

The comments to this entry are closed.