How to Create a Basic Website Using HTML and CSS

How to Create a Basic Website Using HTML and CSS

In this tutorial, you will learn how to create a simple website using HTML and CSS. This is a great starting point for anyone new to web development.

Step 1: Set Up Your Development Environment

Before you start coding, you need a text editor and a web browser. Some popular text editors include VS Code, Sublime Text, and Atom. You can use any web browser like Chrome, Firefox, or Edge.

Step 2: Create the HTML File

Open your text editor and create a new file. Save it as index.html. This will be the main file for your website.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is my first website.</p>
  </body>
</html>

This code creates a basic HTML structure with a title and a welcome message.

Step 3: Create the CSS File

Next, create a new file in your text editor and save it as styles.css. This file will contain the styles for your website.

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #333;
}

p {
  color: #666;
}

This CSS code styles the body with a background color, font, and some padding. It also sets the color of the headings and paragraphs.

Step 4: Link the CSS to the HTML File

To apply the styles to your HTML file, you need to link the CSS file. Add the following line inside the <head> section of your index.html file:

<link rel="stylesheet" type="text/css" href="styles.css">

This line tells the browser to use the styles from styles.css.

Step 5: View Your Website

Open the index.html file in your web browser to see your website. You should see the styled text on a background color.

Conclusion

Congratulations! You have created a basic website using HTML and CSS. From here, you can experiment with more HTML elements and CSS styles to enhance your website.

Leave a Comment

Your email address will not be published. Required fields are marked *