Web · Introduction to Web Development
Getting started
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — What is HTML, CSS and JavaScript?
Every website you ever visited (Youtube, Facebook, Amazon, all of them) are built with 3 core languages :
- HTML builds the structure.
- CSS adds colors and style.
- JavaScript makes things interactive.
Is HTML really code ?
This is a common question. HTML is not a programming language, but a markup language. It structures the content of a webpage, while CSS and JavaScript are used to style and add interactivity to that content. The only 'real' programming language here is JavaScript. But, it's not really wrong to call HTML a programming language, it's just not a programming language in the strictest sense.
Exercise 2 — Your First Web Page
Let’s run your first HTML page ! Just run it, you should see something appearing in 'preview'. Don't worry about the code yet.
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>
Hello World!
The first "hello world" was written in 1972 by Brian Kernighan, one of the creators of the C language, to test a compiler he had just created. Since then, it has become a tradition to start with a "hello world" when learning a new programming language.
Exercise 3 — Choose Your Codémon!
Here are the 3 starter Codémon:
- Aquachu 💧
- Florachu 🌿
- Pyrochu 🔥
Pick the one you like and write it in the code editor!
Your mission is to replace the ??? in the code below with the name of your favorite Codémon. Then, run the code to see what happens!
<!DOCTYPE html>
<html>
<body>
<h1>I pick ??? !</h1>
</body>
</html>
Exercise 4 — Style It With CSS!
We can use CSS to add colors and style. In this example the CSS code is between
<style>
and
</style>
. Try running this example!
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Exercise 5 — Name your Codémon!
Your new mission is to give a name and a color to your Codémon. You can use the code below to do that. You can use the english names of the colors (blue, yellow, red, green, etc.).
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: transparent;
color: black;
}
</style>
</head>
<body>
<h1>???</h1>
</body>
</html>
Hint
If you can't see your Codémon name, check if there is something in between the <h1> tags and if the
background-color
and the text
color
are different.
Exercise 6 — Add Interaction With JavaScript
Now let's make the page respond to clicks using JavaScript! You still don't need to worry about the code, just RUN IT!
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Hello JavaScript World !')">Click me</button>
</body>
</html>
Exercise 7 — Call your Codémon
Last mission, make the code works so when you click on the button, it will call your Codémon! You can use the code below to do that.
So for example, write "Call Aquachu" on the button and "Aquachu have been called" in the alert.
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('???')">???</button>
</body>
</html>
Exercise 8 — What role has each language?
Let's see if you're ready for next step! What's the role of each of those languages?
Options
• HTML = structure, CSS = style, JavaScript = interaction
• HTML = colors, CSS = logic, JavaScript = layout
• HTML = structure, CSS = logic, JavaScript = layout
• HTML = animations, CSS = backend, JavaScript = titles
Hint : HTML defines the structure, CSS styles it, and JavaScript makes it interactive.
Exercise 9 — You Built Your First Website!
Congratulations! You used HTML, CSS, and JavaScript together to create a working web page. You can explore how it works in more detail in the next lessons.