Hey everyone! Today we’ll start a three part series on how to build a website completely from scratch. At the end of this series, you should be able to build cool looking websites that can even fetch data from external APIs.
This series suited for any beginner that is trying to find an easy way to get started with web development and with this tutorial you’ll be able to do exactly that.
I’ll split up this tutorial into three main parts, the HTML, the CSS and the JavaScript code. If you’d just like to get the code for this project and not have to follow the tutorial, feel free to download it from my GitHub.
To first give you some inspiration, I put the gif below of our final result.
This is our end goal, a cool website that uses the parallax effect with some dynamic data and on top of that, we’ll make use of the latest tech around. But don’t worry, we won’t be using any tricky frameworks just yet, it’ll all be pure HTML, CSS and JavaScript.
Download Visual Studio Code. This is the program where we will be writing all of this code in. When you save the files make sure that the HTML files(the one with the <div>) is saved with the extension .html. The CSS files should be saved as .css, and the JavaScript files as .js .
If you would like to read a bit more about the tools I use, you can check out this article.
Alright! Let’s jump right in
HTML
We will start with a very basic HTML structure first, but in order to write out this structure in HTML, I always find it very helpful to draw our desired layout as blocks on a screen. This will help you write HTML code faster and with more certainty.
The structure that we are looking for in the end is something like this.
You should write this on paper(that’s what I always use, except when trying to show it) and don’t think about it too much, just think of your webpage in and draw all the different boxes that make it up. If you want to practice this skill, just go around the web, look at webpages and draw the boxes that make up that webpage.
You’ll see how much this will help us right now while writing the HTML.
First we’ll start with the general HTML structure and we make sure that we specify the meta tag <meta name="viewport" content="width=device-width, initial-scale=1">in order to allow for a responsive webpage. Everything else is just standard HTML.
Now we can make use of those blocks we drew earlier and this is how they’ll translate to bare HTML.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bgimg-1">
<div class="caption">
<span class="border">THE WANDERLUST</span>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;text-align: justify;">
<h3 style="text-align:center;">Cities</h3>
<div class="cities-container" id="cities">
</div>
<div class="bgimg-2">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">TRAVEL</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis aliquid libero repellat consequuntur nihil similique quasi veniam magnam cum corporis cumque, ea neque perspiciatis temporibus quia perferendis quaerat? Porro, odit!</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span class="border" style="background-color:transparent;font-size:25px;color: #f7f7f7;">SCROLL UP</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis aliquid libero repellat consequuntur nihil similique quasi veniam magnam cum corporis cumque, ea neque perspiciatis temporibus quia perferendis quaerat? Porro, odit!</p>
</div>
</div>
</body>
</html>
Now we can have a look at this wonderful creation of ours 😉…
Not so great as you can see but don’t worry, the page doesn’t look like much, but this was a much needed step towards out beautiful page.
This means that we are mostly done with our HTML so it’s time to move over to the CSS and style the page.
We’ll make use of CSS Grid on the next tutorial, something that you should definitely learn in 2019. Continue over to the CSS portion by clicking here. Quick tip: Visual Studio code has a lorem ipsum snippet that allows you to generate lorem ipsum text on the go. You can access it by writing ‘lorem’ and hitting tab on the editor.