How to Create Your First Website Using HTML and CSS
Creating your first website is one of the most exciting milestones when learning web development. In this tutorial, you will learn how to build a simple webpage using HTML and CSS, the two core technologies used to build websites.
By the end of this guide, you will understand how to:
- Create an HTML file
- Structure a webpage using HTML
- Style a webpage using CSS
- Run your website using Live Server
HTML creates the structure of a webpage, while CSS controls how the page looks and is styled.
What You Need Before Starting
Before building your first website, make sure you have:
- Visual Studio Code installed
- Live Server extension installed
- Basic knowledge of HTML and CSS
If you have not installed VS Code yet, read the previous guide:
How to Install and Setup VS Code for Web Development
Step 1: Create a Project Folder
Start by creating a new folder where your website files will be stored.
Example folder name:
my-first-website
Open this folder in Visual Studio Code.
Steps:
- Open VS Code
- Click File
- Select Open Folder
- Choose your project folder
Step 2: Create an HTML File
Inside your project folder, create a file named:
index.html
The index.html file is usually the main entry page of a website.
Step 3: Write Basic HTML Structure
Open index.html and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first website.</p>
</body>
</html>
This is the basic structure of an HTML page.
Explanation
<!DOCTYPE html>tells the browser that the document is HTML5<html>contains the entire webpage<head>contains metadata like the page title<body>contains visible content on the webpage
Most websites start with an index.html file which acts as the homepage.
Step 4: Run the Website
To see your website in a browser:
- Right-click the
index.htmlfile - Select:
Open with Live Server
Your browser will open and display your webpage.
Step 5: Add More HTML Content
Let's add more content to the webpage.
Update your HTML code like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>I am learning web development.</p>
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>About Me</h2>
<p>I want to become a professional web developer.</p>
</body>
</html>
Now your webpage has:
- Headings
- Paragraphs
- Lists
Step 6: Add CSS Styling
Now let's make the website look better using CSS.
Create a new file named:
style.css
Step 7: Link CSS to HTML
Inside your HTML <head> section, add:
<link rel="stylesheet" href="style.css">
Your HTML file should now look like this:
<head>
<title>My First Website</title>
<link rel="stylesheet" href="style.css">
</head>
This tells the browser to load the CSS file.
Step 8: Add CSS Styles
Open style.css and add the following code:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
color: #333;
}
p {
font-size: 18px;
}
ul {
background: white;
padding: 10px;
}
Your website will now look much cleaner and more modern.
Step 9: Add a Button
You can also add interactive elements like buttons.
Update your HTML:
<button>Contact Me</button>
Then style it in CSS:
button {
background-color: #0070f3;
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
cursor: pointer;
}
What You Learned
In this tutorial you learned how to:
- Create a project folder
- Build a basic HTML page
- Add headings, paragraphs, and lists
- Link CSS to HTML
- Style a webpage using CSS
- Run your website using Live Server
These are the fundamental skills every web developer must know.
Practice Challenge
Try improving your website by adding:
- An image
- More sections
- A navigation menu
- More CSS styling
Practice is the best way to improve your web development skills.
The more small projects you build, the faster you will become comfortable with HTML and CSS.
Coming Next on EdhuvaTech
In the next tutorial you will learn:
How to Publish Your Website Online for Free
You will learn how to deploy your website using:
- GitHub
- GitHub Pages
- Netlify
- Vercel