30 Days Of JavaScript

Day 21: Consolidation 4

Lesson 2: Creating a website

Playgrounds served us well in the beginning, however to really shine JavaScript needs HTML and CSS to create user interfaces that really make use of JavaScripts power and flexibility.

There's not much to review here around downloading VSCode and setting up the Live Server plugin, but we can review the basic structure of a website and where our code goes.

Websites are served from an index.html file that has this structure.

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
9    <style>
10      #red-text {
11        color: red;
12      }
13    </style>
14  </head>
15  <body>
16    <p id="red-text">Hello World</p>
17  </body>
18  <script>
19    console.log("Hello World from JS");
20  </script>
21</html>

The whole page is defined with HTML, anything in the <body> tag is visible on the web page, we put our CSS in the <style> tag at the top of the page. Then our JavaScript goes in a <script> tag at the bottom, so that everything is loaded/rendered before we execute the JavaScript.

30 Days Of JavaScript

Day 21: Consolidation 4

Lesson 2: Creating a website

Outline

Go Pro?