Travel Blogging Website | HTML/CSS/JS | Part 1 | Setup Development Environment

In this blog series, we will create a complete end-to-end blogging website using HTML, CSS, and some JavaScript. Mainly, we will focus on HTML and CSS only.

In this part, we will setup our development environment and see what all we need before starting.

Prerequisites

Basic Web Knowledge
Some Motivation

IDE – Visual Studio Code

We will be developing our website on Visual Studio Code. You can download the latest version from here. You can choose the installer based on your operating system.

Browser – Google Chrome

We will test our website on this browser. You can choose another browser as well. I will go with Google Chrome. Download it from here.

Create a Local Folder

This folder will contain all your code related to the blogging site. I will name it as TravelTales as the name from our YouTube channel.

Open Folder from VS Code

Launch VS Code. Click on File -> Open Folder -> Navigate to the path -> Click Open.

Create Asset Folder

Create a new folder assets to keep all your blogging images here. You can populate all the images now to this folder or later when we will be referencing them later in the code.

Create CSS and JS Folder

Create two new folders css and js. In these folders, I am going to keep all my css and js files.

Create index.html

In the project root location, create this file. This will be our main file.

For starting, use the following code to put it in the index.html file. You can copy the below code or just type ! and hit tab button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Tales</title>
</head>
<body>
    
</body>
</html>

I have changed the title from Document to Travel Tales in the above code.

Create style.css file

Under css folder, create a new file style.css.

Link this style.css file in index.html before closing the header tag.

<link rel="stylesheet" href="./css/style.css">

Create main.js file

Under js folder, create a new file main.js.

Link this main.js in index.html just before closing the body tag.

<script src="./js/main.js"></script>

After making the above changes, below is how the index.html will look like.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Tales</title>

    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    
    <script src="./js/main.js"></script>
</body>
</html>

That’s all for this part, see you in the next one.