In this tutorial, we will learn how to create a simple website using HTML and CSS. We will cover the basic structure of an HTML document, styling elements using CSS, and creating a responsive layout for our website.
Before getting started, make sure you have a basic understanding of HTML and CSS. If you are new to these languages, it’s recommended to go through some beginner tutorials to familiarize yourself with the concepts.
Let’s start by setting up the basic structure of our HTML document. Open your favorite code editor and create a new HTML file called index.html. Add the following code to set up the HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>My Simple Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
In the code above, we have defined the <!DOCTYPE html> declaration, which tells the browser that we are using HTML5. Inside the <html> element, we have the <head> and <body> elements. The <head> element contains meta information about the document, such as the title and linked stylesheets.
Now let’s create a CSS file to style our website. Create a new file called styles.css in the same directory as your HTML file. Add the following code to style the body background and center the content:
body {
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
font-family: Arial, sans-serif;
}
.container {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 40px;
max-width: 500px;
width: 100%;
}
h1 {
text-align: center;
}
In the code above, we have defined styles for the body, container, and h1 elements. We set the background color of the body to a light gray, centered the content using flexbox, and styled the container with a white background and a slight box shadow. Feel free to customize the styles according to your preferences.
Now that we have set up the HTML structure and CSS styles, let’s add some content to our website. Inside the <body> element, insert the following code:
<div class="container">
<h1>Welcome to My Simple Website!</h1>
<p>This is a sample paragraph describing the purpose of my website.</p>
<button class="btn">Click Me</button>
</div>
In the code above, we have a container <div> that wraps the heading, paragraph, and button elements. The heading displays a welcoming message, the paragraph provides a brief description, and the button can be customized for any desired action.
To see our simple website in action, save your changes and open the index.html file in a web browser. You should see the content centered on a light gray background.
Congratulations! You have successfully created a simple website using HTML and CSS. Feel free to further customize the styles, add more content, or explore additional HTML and CSS features to enhance your website.
In this tutorial, we have learned how to create a simple website using HTML and CSS. We covered the basic structure of an HTML document and how to style elements using CSS. With this knowledge, you can now build your own websites and experiment with different designs and layouts.
Happy coding!
You can find the complete source code for this tutorial on GitHub.
Please follow the link for a live demo: Simple Website
Remember to replace the placeholders like today's date time (now) goes here with the actual current date and time in the format yyyy-MM-ddTHH:mm:ss. Also, update the content and add appropriate metadata as needed for your specific blog post.