First Project | SpinSpire Learning

Let's create a simple project using the three fundamental building blocks of web front-ends - HTML, CSS, and JavaScript.

Start VS Code, and "Open ..." or "Open Folder ..." to create and open a project folder such as ~/dev/learn/project-1 (where ~ represents your home directory).
At the base of your project folder, create a new file named index.html

In that index.html file, type ! followed by Tab key. This activates Emmet and generates a basic boilerplate for an HTML page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- cursor here -->
</body>
</html>

Edit document title to something appropriate, e.g. <title>my first project</title>.
Add a heading-1, e.g. <h1>My first project</h1> as the first child of <body>.
Add some interesting content within the <body> below the <h1>.
Now view it using the Live Server extension - Right-click on the file and select "Open with Live Server".
Since you're using Live Server, you can make changes to the file and they will be shown in the browser as soon as you save.
As the last child of <head>, add a stylesheet to the page (tip: use Emmet shortcut link:cssTab):
```
<link rel="stylesheet" href="style.css">
```

Create another file named style.css and put the following in it (tip: just following the link to the file in VS Code will help you create that file with the correct name and path).

/* global settings */
:root {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  /* css variables */
  --my-contrast-bg-color: lightgray;
  --my-shadow-color: black;
}
/* slightly contrasting background color */
html {
  background-color: var(--my-contrast-bg-color);
}
body {
  background-color: white; /* slightly contrasting background color */
  max-width: 60rem; /* limited width */
  margin-left: auto; /* centers it */
  margin-right: auto; /* centers it */
  padding: 2rem; /* better spacing */
  box-shadow: 0 0 1rem var(--my-shadow-color); /* pop it! */
}

This should give a nice pop to your page.

Finally, add a JavaScript file named app.js to the page, as the last child of <body>.
```
<script src="app.js"></script>
```

Now create this app.js file (using the tip above) and put the following in it:

const element = document.querySelector("h1");
console.log("The first H1 of this page contains: " + element.innerText);

So the final state of your index.html should resemble this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>my first project</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>My First Project</h1>
  <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah</p>
  <script src="app.js"></script>
</body>

</html>

Take a look at your browser's Developer Tools>Console and you should see the above message with the correct contents of your h1 tag. Change the contents of h1 and see if the changes show both in the browser viewport as well as Developer Tools>Console.

Congratulations! You have created your first web project.

Please note that both CSS and JavaScript can be embedded inside the HTML file using <style> tag for CSS, and <script> tag without src attribute for JavaScript. But most of the time it is appropriate to put them in a their own files.

References: