Foundations
Understanding the groundwork that makes up the web.
So how do websites work? What’s actually happening when we access a page on the internet?
At its most basic, you can think of accessing a webpage as opening up a folder on your computer and opening up the files but through your web browser.
Project Structure
Say we have a project like this:
my-project/
├── index.html
├── scripts/
│ └── app.js
└── styles/
└── main.cssWhere my-project, scripts, and styles are all folders and index.html, app.js, and main.css are all files.
The term for the my-project folder is the “root”, the outermost point of our file structure that holds all of our website’s files. When your website is hosted by a service, your hosting service takes these files and puts them on a server. A server is just an industrial computer meant to do large scale operations such as sending the files of your website to whoever visits your link.
Whenever you or someone else with a browser visits the link where your website is, the server sends all of the website’s files to that browser so the browser may view them.
Important Naming Conventions
A crucial detail here is that all browsers are specified to open the index.html file of a project in the root folder when first accessing a site. The reason for this is so that browsers don’t get confused when trying to figure out what your homepage is and can easily open the first one. You can have multiple files named index.html if you want, but it could get confusing.
To make sure there aren’t problems with your site, always name your homepage as index.html !
HTML, CSS, and JS
So now we have all these files in a location, but what do they mean and what do they do?
It’s important to note that, technically, all of these file types are just different structures of text. Writing an HTML file in a code editor versus just plain old Notepad/Notes has no resulting difference in how the website is perceived. Same goes for CSS and JS. The browser will just access the text of the file and knows how to parse it properly to render a webpage.
HTML & Tags
At the most basic level, all websites contain 1 type of file: HTML. HTML is short for HyperText Markup Language and is responsible for the content and structure of a webpage. HTML works through the idea of semantic tags that contain content:
<body>
<main>
<article>
<h1>Wow a heading!</h1>
<p>This is a pretty cool descriptive paragraph</p>
</article>
</main>
</body>Here you can see a very basic HTML markup. The main thing with HTML is noticing how the various tags work. When I say tags, that refers to the two triangular brackets with a keyword in the middle such as
<p></p><p> refers to a paragraph tag meant to hold a paragraph of text. The first tag is referred to as an “opening tag”, it lets the browser that a new block of content just started. The second tag, </p> (with the ”/” before the keyword), is known as the “closing tag”. It tells your browser that the block has finished.
Opening and closing tags are how you separate different types of textual content and there are a multitude of different tag types. W3Schools is a great resource and has a great reference to all of the tag varieties available to you.
Understanding Structure
Let’s go back to our earlier example HTML:
<body>
<main>
<article>
<h1>Wow a heading!</h1>
<p>This is a pretty cool descriptive paragraph</p>
</article>
</main>
</body>In HTML, structure is dictated by opening and closing tags. In this example, the <h1> (headline 1 meaning most important headline) tag will be grouped with the <p> inside of the <article> tag.
Notice also how the content that we want to associate with the <h1> and <p> tags (“Wow a heading!” and “This is a pretty cool descriptive paragraph”) are between the two respective tags. This lets our browser know what we want to treat as a headline and what we want to treat as a paragraph.
Understanding this nesting structure of putting HTML tags in the correct location with the content in-between them is crucial to working with HTML. It also becomes even more important as you start working with CSS and positioning your HTML in custom ways.
Let’s take a look at another example. The <strong> tag is used to indicate important text and usually makes it bold. What’s the difference between these code bits?
<article>
<p><strong>This is important!</strong></p>
</article><article>
<p><strong>This</strong>is important!</p>
</article>It’s a small but significant difference. In the first example you might get something like this:
This is important!
Whereas with the second you’ll get:
This is important!
Notice how the browser is only going to bold whatever is inside the <strong> tags. Since in the second example “is important!” is outside the <strong> tag, it isn’t bold.
This difference is structural and becomes very important when looking at the styling of the page.
CSS
CSS or Cascading Style Sheets is what handles the styling of HTML pages. It is how you make an HTML page stylistic. It also better helps illustrate the structure of HTML.
CSS syntax is easy to pickup but has an immense amount of complexity you can add on to it should you choose.
At its simplest, CSS looks like:
p {
color: red;
background-color: goldenrod;
}What you see here is a CSS selector, in this case p, curly braces, and then CSS properties.
The p selector means that the CSS rules inside the curly braces will apply to every <p> where this CSS is being loaded in. In this case, all <p> tags will have a red text color and a goldenrod background color.
There is a massive number of different CSS rules that you can look up on the MDN Docs. The MDN Docs is also a great resource for all things web dev, highly recommend.
But now let’s take a look at the CSS border property to better understand HTML.
CSS and HTML
For this section, let’s go back to our previous HTML example:
<body>
<main>
<article>
<h1>Wow a headline!</h1>
<p>This is a pretty cool descriptive paragraph</p>
</article>
</main>
</body>Taking in the styling from this website, that HTML renders out to something like this:
Wow a headline!
This is a pretty cool descriptive paragraph
Now note that if I change the HTML and move our paragraph outside the article like this:
<body>
<main>
<article>
<h1>Wow a headline!</h1>
</article>
<p>This is paragraph outside the article</p>
</main>
</body>Visually, nothing changes:
Wow a headline!
This is paragraph outside the article
However, let’s introduce the CSS border property to draw borders around our tags and show their shape. Looking at MDN, we can give the article a red border like this:
article {
border: 2px solid red;
}The 2px represents the width, solid represents the line type (if you wanted a dashed line for example), and red is just the color.
So now our first example looks like this:
Wow a headline!
This is a pretty cool descriptive paragraph
Neat! But how does it compare to our other code with the <p> outside the <article>?
Wow a headline!
This is paragraph outside the article
Very different! Now, the HTML doesn’t consider the <p> tag as part of the <article> so it doesn’t get included in the border in the second example.
This is what is meant by HTML defines structure. Although we couldn’t see it without the border, the location of where the <p> is very important when our browser tries to understand our HTML.
Notice too that in the second example, the <article> also loses out on the spacing beneath the <p> tag. All of these little differences can stack up into confusing problems if we are not persistent about our HTML structure.
Your browser is like a calculator: if you put in the wrong equation, you’ll get the wrong answer. Most of the time.
JS
Javascript or JS is the most complicated of the three foundational web languages. If you want to think of websites as HTML controlling content and structure, CSS controlling styling:
JS controls interaction, most of the time.
That can sound a bit silly as you can very easily interact with a website that doesn’t have JS. Links would still work, hoverstates can be done in CSS, and so on and so forth. These are “interactions” but JS isn’t being used.
What JS is good for is complexity. You can use it to get data from other locations such as the weather or stock prices. You can position elements based off mouse movements and all kinds of wacky things.
JS is an incredibly capable language that can do almost anything you could want it to.
So, I won’t cover it here because this is supposed to be a foundational lesson and it can get overwhelming. For now, just know that JS handles complex interactions and background processes.
HTML Purism
I wanted to include this here because I didn’t fully cover how project structure works and what is the setup for having multiple files looks like. Here, we were treating it as HTML, CSS, and JS are all separate files. Which is true, that is the most ideal way to setup your projects and I’ll explain better when covering that topic.
However, if you really wanted to, you could build every single website just in HTML. This is because you can actually write CSS and JS in an HTML file
Behold:
<style>
p {
color: red;
}
</style>
<script>
let a = 1;
// This is a Javascipt comment
</script>The <script> and <style> tags are HTML tags that let you write CSS and JS, in HTML files directly. This has its pros and its cons.
If you have a very small website, it could be easier to setup if you just want to write some simple code.
If you have a very large website, it would be an absolute pain to scroll through thousands of lines of files to fix errors in your code.
But it can be fun to know if you want to do some hacky, lo-fi stuff because that’s always fun.
Conclusion
Now we understand the trinity of web languages and how they interact.
With this knowledge, you could start building personal sites for yourself right now if you want to. Just look up a tutorial on web hosting and get your files on a server.
It’s one of the most beautiful things about the Internet, anyone can contribute whatever they want to.
Take part in it, it’s a wonderful culture.