how to build a static website in javascript

To build a static website in javascript, you can use a combination of HTML, CSS, and javascript. Here are the basic steps to get started:

Create a basic HTML file with the structure of your static site. This can include your site header, footer, navigation, and content sections.


index.tsx
<!DOCTYPE html>
<html>
  <head>
    <title>My Static Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
      <h1>Welcome to my site</h1>
    </header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
    <main>
      <h2>My Static Site</h2>
      <p>Hello World!</p>
    </main>
    <footer>
      <p>&copy; 2021 My Static Site</p>
    </footer>
  </body>
</html>
548 chars
27 lines

Add CSS to style your HTML content. You can use a separate .css file or add the styles directly in the HTML file.


index.tsx
/* style.css */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #f2f2f2;
}

header {
  background-color: #e6e6e6;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}

nav li {
  display: inline-block;
  margin: 0 10px;
}

a {
  text-decoration: none;
  color: #333;
}

main {
  padding: 20px;
}

footer {
  text-align: center;
  padding: 20px;
  background-color: #e6e6e6;
}
482 chars
40 lines

Add javascript functionality to your website. You can add scripts directly in the HTML file or use external .js files.


index.tsx
/* app.js */
console.log("Hello World!");

/* index.html */
<!DOCTYPE html>
<html>
  <head>
    <title>My Static Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="app.js"></script>
  </head>
  <body>
    <header>
      <h1>Welcome to my site</h1>
    </header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
    <main>
      <h2>My Static Site</h2>
      <p>Hello World!</p>
    </main>
    <footer>
      <p>&copy; 2021 My Static Site</p>
    </footer>
  </body>
</html>
643 chars
32 lines

You can continue to add more javascript functionality to your static website, such as animations, interactivity, and data manipulation.

similar javascript code snippets

how to use useeffect in javascript

how to create a proxy variable in javascript

how to create fibonacci in javascript

how to parse a json string in javascript

how to use usestate in javascript

loop in javascript

create a loop in javascript

loop from 1 to 10 in javascript

create a react context in javascript

how to create a rest api in javascript

related categories