Creating Your First Website
Let’s Begin!
Welcome to the exciting journey of creating your very first website! We’re starting with a classic: the “Hello, World” program. This simple yet iconic phrase marks an important milestone in your programming adventure.
Why “Hello, World”? In the world of programming, “Hello, World!” holds special significance. It’s not just a phrase; it’s a tradition, an introduction to coding syntax, and the first step into the vast realm of programming languages. And guess what? HTML follows this tradition too!
Our First Website: Saying “Hello, World”
Let’s kickstart by setting up your environment in Visual Studio Code (VS Code).
- Open Visual Studio Code (VS Code).
- Click on “Open Folder” and select a folder on your computer where you’d like to store your files. For example, let’s name it “html-tutorial”.
Now, let’s create a new file
- Click on the “New File” icon in VS Code.
- Name the file “index.html” and hit Enter.
Next, let’s add some code to our “index.html” file
Copy And Past Code
Copy this given code and past this code in Your “index.html” file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello World
</body>
</html>Going Live using the “live Server” Extension
If you have the Live Server extension installed.
- Find the “Go Live” icon at the bottom-right corner of your VS Code window and click it.
Congratulations! Your First Website is Live!
You should now see your very first website displaying the timeless “Hello, World” message.
Optional: Live Preview Extension
Another handy extension for working with HTML in VS Code is ‘HTML Preview.’ You can install it by clicking on the extensions icon in VS Code and searching for ‘HTML Preview.’
Once installed, you’ll find a button within VS Code that allows you to preview your HTML right within the editor.
That’s it! You’ve just created and previewed your first HTML webpage without even needing a browser. Enjoy exploring more about HTML in your coding journey!