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>
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>

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.


Go Pro?

Upgrade to Pro for quizzes, tracked progress and a completion certificate for just $25 🚀

Want more developer tips, tricks and tools?
Then follow me:
FREE Coding Career Quick Start Guide 🚀
Discover the best way to learn to code, how to land a job and valuable resources to help your journey in this free 15 page value packed guide.
Looking to email me? You can get me on my first name at allthecode.co