Coding is not an elephant or horse job. And coding is not just for developers. Anyone from young to old can do coding. Believe me, it is very fun. Once you get interested in programming, you will be addicted until you learn it completely. The funny thing is that there is no end to it, because there are many programming languages and millions of projects in the world, which is not possible to learn everything. If this is your first step, then let's start with HTML.
In this article, you will learn how to set up a basic HTML project structure so that you can easily create web pages. If you are just starting to learn web development or want to better organize your projects, this guide will walk you through everything step by step. So are you ready?
Why Set Up an HTML Project?
A clear and organized framework helps you stay productive when starting a web project. Even for simple projects, keeping your files organized makes maintenance easier later.
Step 1: Create your project folder
First, create a new folder on your computer where all your files will be. Then you can name it something like MyHTMLProject.
Inside that folder, you will create your main files. For example, index.html (this is the main HTML file), style.css (the CSS file where you will write the styles), script.js (and this is the JavaScript file, inside which you will write functions, loops etc).
Step 2: Create the HTML file
Now open the new file named index.html in your favorite text editor (like VS Code, Sublime Text or Notepad). If you are new then you can use Sublime Text. Otherwise, you can save time by opening it in Notepad and copy-pasting the code given below.
Add the following basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML project.</p>
</body>
<script src="script.js"></script>
</html>
- How does this HTML code work?
- Set the document type to HTML5.
- Add metadata for character encoding and responsive design.
- Link to external CSS file.
- Adds simple content inside the body.
- last, set to external Javascript file.
Step 3: Create the CSS file
Open the style.css file that was created in the same folder in notepad or code editor. And if the style.css file is not created, create it and open it. Then add this simple CSS to style your page:
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
padding: 50px;
}
h1 {
color: #333;
}
p {
color: #555;
font-size: 18px;
}
- It makes your page look better:
- Sets the background color.
- Centers the content.
- Styles headings and paragraph text.
Step 4: Open your project in a browser
The javascript file is linked to our html file. But today we will not be writing any scripts. If you want to see the Javascript project, go here. Then, once your files are ready: Open your project folder and double-click on the index.html file. Or open it in a browser. You will see that your default browser will open the page and display the "Hello, World!" message you styled.
Post a Comment