Day 15: Creating a website
Lesson 3: index.html
To begin:
- 1️⃣ Create a new folder on your desktop called
30DaysJS - 2️⃣ Open that folder in VSCode
- 3️⃣ Click "Go Live" in the status bar (remember to install the Live Server extension from the previous lesson)
- 4️⃣ Go to
http://127.0.0.1:5500/in your web browser and marvel at ... nothing.
Well, not quite.
You see a web server will do it's best to return something to you. If there is an index.html file in the directory you are looking at then it will return that. If there isn't an index.html file then it will return a view of the directory. In this case the directory is empty so it returns you an empty directory - that's why you will see a / toward the top left of the page.
Go back to VSCode and add a new file called index.html.
Now back to your browser and refresh the page.
Ta-da!
Even less, but this time that's because we added an empty page.
Add this to your index.html and hit save:
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 </head> 9 <body> 10 <p>Hello World</p> 11 </body> 12</html>
Don't worry about the HTML here for now. I'll go over it in the next lesson.
Now reload your page.
Ta-da!
Hello World is printed
Next up, let's make it look nice with CSS.