In this tutorial, we will set up a workflow to write your first basic website. Websites are developed using web technologies (i.e., HTML, CSS, and JavaScript). We write HTML to display the website content, then we proceed to style it with CSS and also add interactivity if needed with JavaScript. Utilizing a basic workflow helps to make development easier and faster.
Displaying Content
Create an index.html and paste this in:
<!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>Basic webpage</title>
</head>
<body>
<h1>Basic webpage works!</h1>
</body>
</html>
You can also create the file using the terminal, run:
mkdir basic-website
cd basic-website
touch index.html
Open the index.html file in a browser, you should see a web page with the text Basic webpage works!.
Styling Content
Styling our page gives it an aesthetic look and feel. This is more important due to the saying:
Beauty is in the eye of the beholder or something to that effect.
To style our pages we write CSS. Create a file style.css, link your style.css file in the <head> tag
<link rel="stylesheet" href="style.css">
You should now have:
<!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">
<link rel="stylesheet" href="style.css">
<title>Basic webpage</title>
</head>
<body>
<h1>Basic webpage works!</h1>
</body>
</html>
First of all, confirm the HTML file is connected to the CSS file. Paste this in the CSS file:
body {
background-color: red;
}
And the folder structure:
.
├── index.html
└── style.css
The background of the page should change from the default white to red, this confirms our styles file is properly connected, you can remove the code if you want to.
Interactivity
The modern web has interactivity to it, nowadays most sites have some sort of user interaction embedded into it. To achieve this we write JavaScript, create a file index.js then link it in the <head> tag.
<script src="index.js"></script>
You should now have:
<!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">
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
<title>Basic webpage</title>
</head>
<body>
<h1>Basic webpage works!</h1>
</body>
</html>
To make sure the HTML file is connected to the index.js file, we print something to the console or make an alert, let's use the latter and paste this into the JS file.
alert("JS file works!")
And the folder structure:
.
├── index.html
├── index.js
└── style.css
Refresh the page, you should see a dialog with the alert message. That's pretty much it for a basic website but there is something we can add to make the development easier and smoother as stated in the beginning.
Auto Refresh
Enabling automatic reload removes the burden of refreshing manually whenever you add new code to your project. The next few steps require having Node installed. Open a terminal window then run:
cd basic-web
npx browser-sync start --server --files "./*.html" --no-open --no-notify --directory
This spins up a server that auto-reloads whenever changes are made in index.html or any other file ending with the .html extension, to also have this behavior on changes in other files we can modify the npx browser-sync command a little bit. To auto-reload for changes in index.js we add:
npx browser-sync start --server --files "./*.html" "./*.js" --no-open --no-notify --directory
Click the link generated by Browsersync, it should take you to the root directory. Click index.html to see the webpage. Optionally, you can create a serve file, then paste the command for quick use whenever you need to start a server.
And the folder structure after:
.
├── index.html
├── index.js
├── serve
└── style.css
Rounding up
In this tutorial, we learned how to set up a basic workflow for writing a basic website. A workflow that makes development breezy and pleasurable. We started with creating the HTML file with some content, we then proceed to style our content with CSS, and add interactivity with JavaScript. To cap it all off, we identified a way to auto-reload our webpage with new changes thereby eliminating manually refreshing our webpage whenever we make changes.