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.
![[Fixed] Cannot see Repos in Azure DevOps with Stakeholder Access](https://i0.wp.com/jd-bots.com/wp-content/uploads/2021/08/image-97.png?fit=985%2C516&ssl=1&resize=40%2C40){kind=small}
You must be logged in to post a comment.