After you get through these preliminary exercises, you reach the point where you need to set up your first full website. Even if this is a single-page, personal site that you never intend to release, you still face a series of new challenges like:
- How do I connect the three different types of files?
- After I connect them, how will they work together?
- How do I test all of this on my own computer?
After thinking about this for awhile, I realized that these pieces work together in the same way that cities can still function, even when businesses are constantly moving in or going out of businesses, or real estate developers are remaking certain neighborhoods.
Let’s imagine that you are in charge of planning the layout of a new neighborhood in the city. This neighborhood will have some residential buildings, some eateries, a bank branch and a mall.
This might seem one-dimensional. In other words, each building is just a point on a map, with no nuance. But when you dig a little deeper, you can see that each building actually has three parts you can change:
- The structure of the building itself
- The interior and exterior decoration of the building
- The actual functions that visitors can perform in each building
This corresponds to the three different types of files that you can use in your first website.
An HTML file contains the structure of the page itself. It is kind of like the structure of the building.
A CSS file contains the styling of the page. It allows you to change colors, positioning and more. It is kind of like the design of the building itself.
Let’s take the example of one of the houses. A house has 2 bedrooms, 2 bathrooms and 2 stories. That is the HTML of the building.
It is made of brick and has a solid wood door. That corresponds to the CSS of the building.
Use the slider on this interactive image to see how the two parts work together.
An Example of A Basic File Directory
Since each of these three languages serves a different purpose, web developers generally use separate files for each one. This idea is called “separation of concerns“- each file should have a different function within the site as a whole.
Although you could technically include all the code in one HTML file, that will eventually lead to repetitive code as you grow your site.
You can use this interactive image to flip between the 3 parts of a house and the file system.
Now we can cover the way that files become linked in code.
Our HTML file actually has three separate sections:
- The <head>, where you can include metadata and links to services like Google Fonts
- The <body>, where you include the actual HTML elements
Right now, all three files are contained within one folder, so the file paths are pretty simple within the HTML file.
The <link> tag will allow you to create a separate stylesheet to use with all brick houses at styles.css.
And the <script> tag allows you to create a set of functions that would apply to any type of home in the scripts.js file.
Scenario 1- A New Pizza Chain Moves In/ CSS File Change
Let’s look at a real-world example. Imagine that in this neighborhood, one of the buildings is a pizza shop called Neighborhood Pizza (great name). But, Neighborhood Pizza is struggling, and Domino’s (a huge pizza chain) decides to buy the property and serve the neighborhood instead.
Do you know what this would mean in terms of code?
Well, let’s think through each of the three pieces.
- The structure of the building is the same. It’s still the same pizza place. That is the HTML.
- But the styling and branding of the building is different! That means the CSS is new.
So, we have now created a new CSS file (let’s call it Dominos.css). We need to create a folder called pizza to show we are talking about a pizza place now, and substitute dominos.css for the old styles.css file.
Scenario 2- A New Apartment Building
Here’s another example. Let’s say your neighborhood is undergoing some gentrification. That means wealthier residents are moving in, and more expensive housing is being built. Some real estate developers decide to buy up a lot with a house on it, demolish the house, and put in some fancy apartments.
Let’s think about what that would mean in terms of our file system.
- The CSS must be different because there is no way that an apartment building can be styled in the same way as a house!
- And the HTML file must be different, because the two buildings have completely different structures.
Let’s call the new building apartment.html, and the new CSS will be fancy.css. Since we have an entirely new HTML file, we are not simply linking up a new CSS file. The entire page is different. And it also links to a new CSS file.
Creating a File Directory With Multiple Folders
So far, we have covered just one type of building at a time. But, that is kind of like a website with just one page- very unusual. Even a personal website might have an “About” page… a “Portfolio page”… and others. So what happens when there are multiple buildings? How can you structure your file directory?
But, notice how we did not use three subfolders within a greater neighborhood folder! Although we certainly could have done that, many front-end developers like to create a separate scripts folder for all JS files, and a styles folder for all CSS files.
Anyways, here is a potential layout of the whole file directory.
Notice how the HTML files and folders are the same level of depth within the greater neighborhood folder. In order to reference files that are within folders at the same level, you need to start your filepath with the folder name instead of a file name. So, if you wanted to reference the bank.css file from within bank.html, you would use:
as the file path.
If you would like to better understand the connection between CSS and HTML, check out my tutorial on CSS Selectors.
Get the Latest Tutorials
Did you enjoy this tutorial? Get my latest web development explanations by signing up for my newsletter: