Rebuild ACME Corp but instead of writing HTML leave the body empty:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ACME Corp</title>
<style>
body {
margin: 0;
}
/* ...you've got other styles here too... */
</style>
</head>
<body>
<!-- remove all the HTML -->
</body>
</html>Then start building up the DOM:
// Create the header
var body = document.querySelector("body");
var header = document.createElement("header");
body.appendChild(header);
// Create the nav
var nav = document.createElement("nav");
header.appendChild(nav);
// Create the sign up button
var button = document.createElement("button");
button.textContent = "Sign up";
nav.appendChild(header);
// And so on...
Remember to put this code at the bottom of the page before the closing <body>
tag. Otherwise, you won't be able to access the body in your script.
The goal should be for your page to look exactly like it did before but this time the page is being dynamically generated, which is how a lot of web applications work today.
If you don't have a working version of ACME Corp, for some reason, download the ZIP of the solution. And use that as a starting point (obviously, delete the HTML).