If Webpages were People: Understanding the Roles of HTML, CSS and Javascript
July 19, 2020
Hey there jewelers! I have a special surprise for you guys in today’s blog. My 12-year-old son, Regis K. Davis Jr., will be sharing what he’s learned about the building blocks of webpages. I hope parents searching for ways to introduce their children to programming find this helpful.
-- Whitney
Hi guys! It’s Regis and today I will help you better understand HTML, CSS and Javascript by relating their roles on a webpage to a person.
HTML
HTML stands for Hypertext Markup Language and defines the layout of webpages. It uses special tags to tell computer browsers how to format a webpage.
Using our example of a person, HTML would represent the physical body.
HTML Example:
<!DOCTYPE html>
<html>
<title>Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS
In a webpage, CSS controls the appearance. Without CSS, webpages would be boring, plain and difficult to navigate. CSS is responsible for adding colors, fonts, spacing and more.
Let’s go back to using our example of a person. CSS would represent the person’s clothes and accessories.
CSS Example:
body {
background-color: red;
}
h1 {
color:black;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
JavaScript
JavaScript is a programming language that makes the webpage “come alive.” It can control what happens when a user clicks on a button, types text into a searchbar and more.
In our person example, Javascript would be like the actions and movements a person performs.
JavaScript Example:
function myFunction(firstNumber, secondNumber) {
// This function returns the sum of firstNumber and secondNumber
return firstNumber + secondNumber;
}
Read Webpage Basics for Beginners (Part 1): How to Create the Simplest Website using HTML next to learn how to create your own webpage.
That’s all I have for now. I appreciate you guys for tuning in.
--Regis
function writeThanks() {
console.log('Thanks for reading!')
}
Happy Coding! ❤️
