Build Your First Web Page

Written in HTML CSS Development
updated on 11 Oct 2023

Let's build our website.

Remember in the previous section you've created a folder called "Webdesignium" in your personal folder to store all your work for this course? In the "Webdesignium" folder, go ahead and create another folder in it called "Dummy_Website".

In this folder, create two plain text files, "index.html" and "style.css". Please see these tutorials if you are not sure how to create text files on a computer (MacOS, Windows). Next, open Visual Studio Code text editor. Click File > Open and select the folder "Dummy Website".

Make sure you are NOT saving them as index.html.txt or style.css.txt. On Windows, you need to check an option to show file extensions, see https://answers.microsoft.com/en-us/windows/forum/all/in-win10-how-to-show-the-file-extension-for/ed21ff20-cdb3-4263-9c7d-fc6ed125fc82.

For Mac, see https://support.apple.com/sq-al/guide/mac-help/mchlp2304/mac#:~:text=In%20the%20Finder%20on%20your,%E2%80%9CShow%20all%20filename%20extensions.%E2%80%9D

After you have turned on the "Show file extensions" option, you should see the .txt at the end of your file names. Rename each file to delete the .txt part.

You can also do that in VSCode if it's easier for you.

You should see your folder structure on the left pane. Click on "index.html" file to open up the editor. Now paste the following code into "index.html" and save the file (command + s on Mac, ctrl + s on windows and linux).

language=>HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- sets the character set your document should use to utf-8 -->
  <title>Dummy Website</title>
  <!-- title tag defines what is shown on the tab of the browser -->
  <link href="style.css" rel="stylesheet" type="text/css">
  <!-- link your CSS file to your HTML file -->
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

To view the HTML file in your web browser (Google Chrome or Firefox are great for the website development), go to the "Dummy_website" folder and double click on the actual "index.html" file. You can also drag and drop the index.html file into your web browser window.

It should open up in a web browser and you should see "Hello World" on the top left corner.

Change "Hello World" to anything you want and save. Go to your web browser and refresh to see the update. Now you are ready to develop websites locally.

If you are having trouble creating these folders and files, you can download this example zip of the correct structure on https://drive.google.com/file/d/1qADj5-mpOQu9O1Ok3gI1Z1kIxXTKvbGM/view?usp=sharing.

Click the download button on the top right. You will get a zip file, you need to unzip the file to access the content.

Bonus

In your style.css file, add a CSS rule to target the <h1> tag and change the color of the text to green.

Practice typing HTML

Some of the characters used in HTML and CSS are not normally used in everyday life, so it is important to get used to typing those characters as one aspect of learning to program. Here is a website that lets you practice typing on the custom text. https://www.keybr.com/ Go to settings and choose to provide your own custom text, then copy and paste the code snippet below. Happy typing.

Code snippet for practicing:

language=>html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML SAMPLE CODE</title>
  <meta name="description" content="HTML SAMPLE">
  <meta name="author" content="Altcademy">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div>
    <p>Hello world</p>
    <p>Weather is great</p>
  </div>
  <ul>
    <li>
      <p>Hello cat</p>
    </li>
    <li>
      <p>Hello mice</p>
    </li>
    <li>
      <p>Hello dog</p>
    </li>
  </ul>
  <script src="js/scripts.js"></script>
</body>
</html>