So how does my website work, anyway?
A simple guide to understanding the basic code that powers your website
Websites are something we’re passionate about and an extremely important marketing tool for any organization, but often, there's a lot of mystery about how websites actually work and what makes them do what they do.
So, let’s do something you likely haven’t done before — let’s get into the code.
Similar to our rundown on what you need to know about SEO, we’ll give you an overview of the four main types of code that power most websites to help demystify the magic and improve your understanding of just how websites work.
The four building blocks of websites
There are four main technologies that power nearly every website you’re likely to interact with on the web, including yours — HTML, CSS, PHP, and Javascript.
As a bit of a disclaimer, none of the examples we will use in this explainer are existing “real” code. It’s simplified for clarity in this blog post. If you have any interest in learning more practical web coding skills, freecodecamp.org is a wonderful and free resource to help get you on your way.
HTML
HTML is what developers call a markup language. In essence, it’s laying out the structure and shape of the text of your webpage. There’s a little more to it, of course, but its main purpose is to organize your webpage into useful chunks of information that your browser can display in a meaningful way.
Similar to a Word document, you are effectively taking your content and identifying which parts should be read as a header, what should be bold, where the images are going to be and what kind of bullets are on your list.
HTML is written as code in the backend using open and close tags inside of brackets called “delimiters” that look something like this:
<heading>This is a title!</heading><paragraph>This is your main body of text. This is where all of the content belongs</paragraph><image>a_pretty_picture.jpg</image>
As you can see, it’s pretty basic, mostly straightforward, and always static. This same page will load the same way for everyone, every time.
HTML was great back when the internet was in its early stages, but modern web design has all kinds of dynamic elements on every page that requires a more sophisticated language. For instance, the top right corner of this page on medium.com right now shows your avatar if you are logged in, whereas it would show my avatar if I were logged in. Plus, there’s a third state, if you aren’t logged in at all it shows “Sign In” or “Register”. We can’t do that with HTML alone, for that we need…
PHP
PHP used to stand for Personalized HomePage (but as it evolved, the name did too) which is a useful way to think about how it works. Say we had a homepage to welcome you to our site. The HTML would look like this:
<heading>Hello Steve! Welcome to your homepage!</heading>Sadly, because this homepage contains only HTML and no PHP, it renders the same every single time. So if your name isn’t Steve, you’re out of luck!
Luckily, PHP provides us with much more flexibility, including the ability to further customize the page experience for different users. A page using HTML and PHP might look something like this:
<heading> Hello <php> username() </php>! Welcome to your homepage! </heading>This will display your own name on your own computer when you refresh the page and my name when I refresh the page on my computer — much more useful.
We use PHP for nearly everything on current websites, and while there are some nifty new technologies that are more modern, according to W3techs PHP is used by 78.4% of all the websites whose server-side programming language we know.
That certainly holds true for us at Rain. We build the majority of our websites using Wordpress, and we take advantage of PHP functionality as part of our web development.
CSS
So at this stage, we now have enough code that allows us to show a personalized name for each user. Fancy! But, there’s so much more we can do to ensure your website is on brand and has a great user experience.
That’s where CSS comes in.
The SS in CSS stands for Style Sheet, and it’s what we use to make your web pages look pretty. Or look like anything at all, for that matter.
The HTML might specify that a certain bit of text is a heading, while the next bit is a paragraph, but the CSS is what determines how much bigger the font on the heading is, how that changes on a mobile device, the colour and weight and font family itself.
It’s also responsible for how a web page behaves when viewed on smaller screens, where the words wrap, the background colours, how the boxes and buttons and images are sized, etc.
To put it simply, anything that has to do with how your webpage looks, is likely set in the CSS.
This is a very basic example of a webpage with no CSS:
And then the very same HTML code combined with some CSS transforms it into this:
Magic! 🪄
Javascript
The final piece of our web development basics outline is Javascript.
Javascript allows users to interact with your website. Anything your site can do from submitting a form, clicking ‘next’ on your carousel, clicking on a video to have it pop up and open nicely in a fancy modal, or saving videos to a watchlist, JavaScript brings interactivity to your website and bridges the gap between a static webpage that you read and a useful application. In fact, there are a growing number of phone apps that are simply mobile versions of various websites packaged as an ‘app’ the way we are used to thinking about them.
In the context of this Medium page you’re currently reading, clicking subscribe or clapping for this story would be handled with JavaScript, because it’s how you can interact with this web page.
We could go on, but the sky really is the limit here, and you can do just about anything you could dream of with a very solid understanding of JavaScript.
Piecing the puzzle together
Hopefully, we were able to shine some light on what exactly is happening each time you load a page on the web. Having a basic understanding of the structure of your website could inspire you to have new ideas for your existing website, or provide more insight into the code involved in updating your website to a version that is truly tailored to your organization.
While digital has evolved over the years, and website functionality along with it, Rain is committed to building websites that will serve your organization best, which could mean any or all of representing your brand beautifully, serving as your online store, providing easy-to-access information, and any other functionality you need to best support your users and represent your organization.
Have a web project in mind? Reach out anytime.
