Create a Basic Webpage with CSS and JavaScript
Tags: javascript, webdev, beginners, github
Published: 2018-02-28 22:35:35

---
title: Create a Basic Webpage with CSS and JavaScript
published: true
description: This article will walk you step by step creating a basic webpage with HTML, CSS, and JavaScript.  You do not need any prior experience with these languages to get this webpage up and running!  At the end of this article is a link for part two, which will show you how to upload your webpage to GitHub Pages live for everyone to see!  Let’s do it!
tags: javascript, webdev, beginners, GitHub
---

*This article was originally published on [programmingliftoff.com](http://programmingliftoff.com/) as [Create a Basic Webpage with CSS and JavaScript](http://programmingliftoff.com/create-basic-webpage-css-javascript/).*

![Screenshot of finished webpage](https://thepracticaldev.s3.amazonaws.com/i/7lmon5ilpfg8l8c7coyl.png)

<em>Note: If you already have your website and just need to upload it to GitHub and enable GitHub Pages, read <a href="http://programmingliftoff.com/upload-website-github-pages/">Upload a Website to GitHub Pages</a></em>

Prefer to watch this tutorial instead of reading it?  <a href="https://youtu.be/CFkQk_6xdS8">Click here to watch it on YouTube</a>.

Tired of creating boring HTML pages without style?  Then it's time to add some CSS and JavaScript to liven up your webpage!  In this tutorial we will create a website with a basic index.html file and add some CSS and JavaScript files to make it more exciting.  Then we will upload the webpage to GitHub as a GitHub Pages website!  Note that the methods shown in this tutorial to add CSS and JavaScript files in a webpage are not specific to GitHub Pages.  These methods will work with any website and any host (GitHub, GitLab, BitBucket, etc...).  Without further ado, let's get started!

Start by opening your favorite text editor and creating a new folder (you can name the folder anything you like).  In that folder, create a file named index.html.

Add the following code to index.html:
```html
<!DOCTYPE html>
<html>
  <head>
    <title>My webpage!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <h4 id='date'></h4>
  </body>
</html>
```

If you open the webpage in the browser, you should see just "Hello, World!" printed on the screen.

<h4>Adding JavaScript to Our Webpage</h4>
Next we will learn how to import JavaScript code from a separate file into 'index.html'.  Create a folder named 'javascript'.  Inside that folder, create a file named 'index.js'.  Inside this JavaScript file, add the following line:
```js
document.getElementById('date').innerHTML = new Date().toDateString();
```

Then in the `<head>` tag in 'index.html', add the following line of code:
```html
<script async src="./javascript/index.js"></script>
```

Now save the files and refresh your browser.  You should see the current date printed bellow 'Hello, World!'.  So how is this working?  Take another look at the JavaScript we added.  As you can see, it gets the element with id 'date' (thats the &lt;h4&gt; tag in our webpage), and sets the text inside it to a new Date() object that is converted into a more readable string.

Then we added a &lt;script&gt; tag in the 'index.html' page to load this JavaScript code in our webpage.  We set the `src` attribute of the &lt;script&gt; tag to "./javascript/index.js".  This tells the browser to load the file 'index.js', which is located in the 'javascript' folder.  This happens asynchronously and then the JavaScript code is executed, updating our web page almost instantly!  Great, now that we've added some JavaScript, lets add some CSS.

<h4>Adding CSS to Our Webpage</h4>
First create a folder named 'styles'.  Inside this folder, create a file named 'styles.css'.  Type or paste the following code into 'styles.css':
```css
body {
  text-align: center;
  background-color: #f0e8c5;
}
```

Now go back to the 'index.html' file and add the following &lt;link&gt; tag inside the &lt;head&gt; tag (right above the &lt;script&gt; tag we added in the last section):
```html
<link rel="stylesheet" href="styles/styles.css" />
```

Now refresh the 'index.html' page in your browser.  Sweet!  We've successfully added styles to the webpage!  Looking at the code we added to 'styles.css', you can see that we centered the text and added a light-tan background color to the body of the webpage.  Then we added a &lt;link&gt; tag with the attribute `rel="stylesheet"` to 'index.html'.  This tells the browser that we will be loading CSS styles from a separate file.  We also added the attribute `href="styles/styles.css"`.  This tells the browser that the styles we want to add are located in the 'styles.css' file, which is in the 'styles' folder.  Awesome!  Now that we've added JavaScript and CSS to our webpage, let's overdo it and add some image with some sweet styles!

<h4>Add some sweet CSS styles!</h4>
Replace the contents of your 'index.html' page with the following code:
```html
<!DOCTYPE html>
<html>
  <head>
    <title>My webpage!</title>
    <link rel="stylesheet" href="styles/styles.css" />
    <script async src="./javascript/index.js"></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <h4 id='date'></h4>

    <div class="image-section">
      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>

      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>
    </div>

    <div class="image-section">
      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>

      <div class="section-style">
        <img src="https://source.unsplash.com/random/400x200" alt="" />
        <p>A random image courtesy of unsplash.com.</p>
      </div>
    </div>
  </body>
</html>
```

Also replace the contents of 'styles.css' with the following code:
```css
body {
  text-align: center;
  background-color: #f0e8c5;
}

div {
  margin-top: 15px;
}

.image-section {
  display: flex;
  justify-content: center;
}

.section-style {
  margin-right: 25px;
  margin-left: 25px;
  background-color: white;
}
```

Now refresh your webpage.  Nice!  We have a sweet webpage with images from <a href='https://unsplash.com/'>unsplash.com</a>!  Every time you refresh the page you will see a new random image.  Pretty cool, right?!

<img src="http://programmingliftoff.com/wp-content/uploads/2018/02/create-website-css-and-js.png" alt="Image of basic webpage with four pictures from unsplash" width="1280" height="741" class="aligncenter size-full wp-image-391" />

If you had any trouble, <a href="https://youtu.be/CFkQk_6xdS8">watch the video tutorial on YouTube</a>.

<h3>Next Steps: Uploading the Website to GitHub Pages</h3>
Ok, now that we've had our fun creating our site locally, let's publish it to the internet for free using GitHub Pages.  Head on over to <a href="http://programmingliftoff.com/upload-website-github-pages/">Upload a Website to GitHub Pages</a> to learn how to upload your site to GitHub Pages.


Thanks for reading!
-Andrew @ Programming Liftoff
**Website:** [programmingliftoff.com](http://programmingliftoff.com)