DEV Community

Programming Liftoff
Programming Liftoff

Posted on • Updated on

Create a Basic Webpage with CSS and JavaScript

This article was originally published on programmingliftoff.com as Create a Basic Webpage with CSS and JavaScript.

Screenshot of finished webpage

Note: If you already have your website and just need to upload it to GitHub and enable GitHub Pages, read Upload a Website to GitHub Pages

Prefer to watch this tutorial instead of reading it? Click here to watch it on YouTube.

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:

<!DOCTYPE html>
<html>
  <head>
    <title>My webpage!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <h4 id='date'></h4>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

Adding JavaScript to Our Webpage

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:

document.getElementById('date').innerHTML = new Date().toDateString();
Enter fullscreen mode Exit fullscreen mode

Then in the <head> tag in 'index.html', add the following line of code:

<script async src="./javascript/index.js"></script>
Enter fullscreen mode Exit fullscreen mode

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 <h4> 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 <script> tag in the 'index.html' page to load this JavaScript code in our webpage. We set the src attribute of the <script> 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.

Adding CSS to Our Webpage

First create a folder named 'styles'. Inside this folder, create a file named 'styles.css'. Type or paste the following code into 'styles.css':

body {
  text-align: center;
  background-color: #f0e8c5;
}
Enter fullscreen mode Exit fullscreen mode

Now go back to the 'index.html' file and add the following <link> tag inside the <head> tag (right above the <script> tag we added in the last section):

<link rel="stylesheet" href="styles/styles.css" />
Enter fullscreen mode Exit fullscreen mode

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

Add some sweet CSS styles!

Replace the contents of your 'index.html' page with the following code:

<!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>
Enter fullscreen mode Exit fullscreen mode

Also replace the contents of 'styles.css' with the following code:

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;
}
Enter fullscreen mode Exit fullscreen mode

Now refresh your webpage. Nice! We have a sweet webpage with images from unsplash.com! Every time you refresh the page you will see a new random image. Pretty cool, right?!

Image of basic webpage with four pictures from unsplash

If you had any trouble, watch the video tutorial on YouTube.

Next Steps: Uploading the Website to GitHub Pages

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 Upload a Website to GitHub Pages to learn how to upload your site to GitHub Pages.

Thanks for reading!
-Andrew @ Programming Liftoff
Website: programmingliftoff.com

Top comments (7)

Collapse
 
jrd656 profile image
jrd656

This is brilliant. Thank you.

There's one small bug in the guide that caused me a bit of confusion:

"Then in the tag in 'index.html', add the following line of code:"

The tag isn't showing up. (I guess you can find it clearly shown on the youtube video for anyone else who got stuck here).

Collapse
 
iamcertainlyhappytoday profile image
james monteith

this doesn't set up with the side by side div. I was going to add style to do this but found adding to the

the usual meta charset="utf-8" seemed to do that for me. Why would a character set make the div into a row?
Collapse
 
itcoach profile image
ITCoach

I followed every step and the date doesnt appear on my page. I tried to open in Chrome and Explorer. Any idea what did I do wrong:)?

Collapse
 
santosh254 profile image
Santosh254 • Edited

HI, Yes he is wrong . Please follow this and try.
<!DOCTYPE html>


Life Events




Sample Page Website


function myfuc() { document.getElementById('date').innerHTML = new Date().toDateString(); }
Collapse
 
monsij profile image
Monsij Biswal

Make sure the javascript file is placed under /javascript/

Collapse
 
brian2be profile image
brian2be

Check console in Web Inspector, check for errors. Maybe there's a problem with the path to the resource?

Collapse
 
miller_alaine profile image
Alaine Miller

This was great. Thank you!