Owen C137
Administrator
Staff
LEVEL 5
225 XP
HTML & CSS Basics – Building Your First Webpage from Scratch
This tutorial will walk you through creating a very simple webpage from scratch using HTML for structure and CSS for styling.
By the end, you’ll have a basic, working website you can build on.
Replace your file with this:
That’s it! You’ve just built your first webpage from scratch. Keep experimenting — the more you practice, the better you’ll get.
This tutorial will walk you through creating a very simple webpage from scratch using HTML for structure and CSS for styling.
By the end, you’ll have a basic, working website you can build on.
1. What is HTML & CSS?
- HTML (HyperText Markup Language) is the backbone of a webpage. It defines the structure and content (text, images, links, etc.).
- CSS (Cascading Style Sheets) is used to control the visual style of your HTML content (colors, fonts, spacing, layout).
2. Tools You Need
- A text editor (Examples: Visual Studio Code, Sublime Text, or even Notepad++).
- A web browser (Chrome, Firefox, Edge, etc.).
- A basic understanding of copy-paste and saving files
.
3. Creating Your First HTML File
Open your text editor and paste this code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my very first webpage.</p>
</body>
</html>- Save the file as index.html (make sure the file extension is `.html`).
- Double-click it to open it in your browser — you just created your first HTML page!
4. Adding Some CSS Styling
Let’s make it look nicer by adding a bit of CSS.Replace your file with this:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
color: #333;
text-align: center;
margin-top: 50px;
}
h1 {
color: #4CAF50;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my very first webpage with CSS styling.</p>
</body>
</html>5. How This Works
- background-color changes the background color.
- font-family changes the text style.
- color changes the text color.
- margin-top adds space at the top of the page.
- h1 and p styles apply to the heading and paragraph.
6. Next Steps
Now that you know the basics:- Try changing colors and fonts.
- Add more headings and paragraphs.
- Insert an image using:
HTML:
<img src="image.jpg" alt="Description"> - Learn about HTML elements and CSS properties.
That’s it! You’ve just built your first webpage from scratch. Keep experimenting — the more you practice, the better you’ll get.