| Coding Tutorials

cms-source-codeWordPress, Joomla, and Drupal are primarily powered by PHP.

However, as a user on a website, we don't actually see what's going on behind the scenes in the server. We only get the final output from the server, which is in the form of HTML, CSS, and Javascript. That's the code that creates the webpage that we see.

This tutorial will show you how to see the code behind the front-end design and nicely formatted page. It will show you the HTML, CSS, and Javascript that your browser uses to display a page nicely to a user.

And it's quite easy. Let's get started.

View Page Source

media_1402423384649.png

Go to the outer edge of a site (e.g. far left), then right-click and click on "View Page Source" (or the option that's similarly named).

That will bring up all the HTML code, along with links to CSS files, Javascript, images, etc.

media_1402423671686.png

You can now read through it and see what that page is created with.

You can also use Ctrl + F (command + F in Mac) to search through it for certain key words.

Getting Specific

media_1402423922506.png

If you want to drill down on a specific part of a page, most browsers now come with built-in inspectors. Or you can use Firebug in Firefox.

Just right-click on the object you'd like to inspect, then click on Inspect Element (or the option that's similarly named).

media_1402424265523.png

The respective code will be high-lighted in the left window. Then you can click on the tags outside of it or within it to drill down on those. As you do that, it will high-light the part of the page it controls.

On the right side, you'll see the CSS styles that are applied to the HTML tag that's high-lighted.

This is an extremely useful and quick way to inspect code.

Wappalyzer

If you just want a quick way to see which technologies a website uses without doing the manual investigation, then check out our Wappalyzer tutorial.


About the author

Nick is the Director of Support at OSTraining and you can find him in almost every area of the site, from answering support requests and account questions to creating tutorials and software.