I will admit, at the beginning of phase 1 when I found out that the end term project was going to be a website, I freaked out. This was because like most people, I used my smart phone to navigate the internet without much thought for what was going on behind the scenes. As time passed and I started learning about what felt like a whole new world, I felt ready to build my first website.
What Is Needed To Make A Website?
To make a website is surprisingly simple, all you need are the following:
- Structure (HTML)
- Functionality (JavaScript)
- Style (CSS)
To explain these points lets imagine a website is like a car.
HyperText Markup Language (HTML)
A car needs a frame, chassis, axels, pedals, steering wheel etc. All of these put together make up the cars structure. Similarly, a websites structure is an HTML document.
<!DOCTYPE html>
<html>
<head>
<!-- head HTML -->
</head>
<body>
<!-- body HTML -->
</body>
</html>
What do these tags mean? The "!DOCTYPE" tag states the type of document. In this case, it's an HTML.
Next in line is the "html" tag. This tag, like most HTML tags, has an opening and closing tag. The closing tag syntax is the same as the opening syntax except it has a "/", signifying a closing tag. It's purpose is to act as a container for all other tags inside the document.
The "head" tag contains machine readable information. Examples of this would be the title, script(s), or style sheet(s). All contents inside this tag cannot be seen when you load a website.
Last but certainly not least we have the "body" tag. This tag contains all of the content that you see when you load up a website. You can add all sorts of things inside of it such as images, text, shapes, this is your canvass.
Functionality (JavaScript)
Once you have the cars structure, it's time to make things have functionality. For example, when the steering wheel is turned left, make the steering axel turn to the left. When the horn is pressed, make a noise!
What if we wanted to make a header change colors when the mouse cursor overlooks it and revert to its original color when the mouse cursor is off the header?
html:
<body>
<h1>Header</h1>
</body>
JavaScript:
const h1 = document.querySelector("h1");
We start off assigning the header to a h1 variable.
Now we can add a "mouseover" event to the selected header.
h1.addEventListener("mouseover", () => h1.style.color = "red");
Using .addEventListener to do so, we have successfully turned the header red. .addEventListener takes in two arguments, an event, in this case "mouseover", and a callback function.
We still need to revert the color back to it's original color when the mouse is not on the header.
h1.addEventListener("mouseout", () => h1.style.color = "white");
Similar to the previous code, we have successfully turned the header back to its original color (white) when the mouse is not over the header using the "mouseout" event.
Cascadia Style Sheets (CSS)
Now that we have a fully functional car with structure, we can customize it any way we want. You can add stickers to it, give it a spoiler, add unique headlights, and make it any color you desire! This is where CSS comes in, allowing you to style your website anyway you want.
There are 3 ways to assign style to an element. The first and most broad way to do it is by using the tag name. Any style assigned to this tag name will apply to all tags with the same name.
HTML:
<div>
<h1>Header 1</h1>
<h1 class="with-border">Header 2</h1>
<h1 class="with-border" id="red">Header 3</h1>
</div>
CSS:
h1 {
font-size: 50px;
}
This CSS syntax sets the font size of all h1 elements to 50px.
The next option goes one layer deeper, only applying the style to the HTML tags with the same class name (i.e. "with-border"). Notice that the "with-border" has a period (.), signifying that it is a class name.
CSS:
.with-border {
border: 1px solid white;
height: fit-content;
width: fit-content;
}
The "border" style takes in a number value that sets the border's thickness as well as a color. In this case the border's thickness is 1px. Both the "height" and "width" are set to fit-content, allowing the border to be snug against the element.
The final option is the most accurate due to the id value being unique to that element (i.e. "red"). The id name has a # before it, signaling an id.
CSS:
#red {
color: red;
}
Thus setting the element's color to red.
The Big Takeaway
Who knew a car and a website could be so similar? HTML, JavaScript, and CSS are very powerful tools used to make all sorts of websites with different purposes. These languages make up what is known as Front End Development. To put it shortly, you develop the part that people will see when they go to a websites URL.
There is a whole other side of the coin called Back End Development. This is the side that you don't see but is equally as important. If you are curious about how they work together, check out the blog below!
Want to learn more about the differences? Check out this blog: Front End vs Back End Development
GIF sources:
Cover Image
Lightning McQueen
Top comments (0)