Welcome to a tutorial on how to create a simple website layout with HTML and CSS! In this tutorial, we will go through the steps of building a basic website layout using these fundamental web development technologies.
Step 1: Setting up the HTML structure
First, let's start by setting up the basic HTML structure of our website. We will use a few different HTML elements to create the layout, including a <header>, <nav>, <main>, and <footer> element.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h2>Welcome to My Website</h2>
<p>This is the main content of the website.</p>
</main>
<footer>
<p>Copyright 2021</p>
</footer>
</body>
</html>In this example, we have a <header> element that contains the website's title, a <nav> element that contains the navigation links, a <main> element that contains the main content of the website, and a <footer> element that contains the website's copyright information.
Step 2: Adding basic styles with CSS
Next, let's add some basic styles to our website using CSS. We will use a few different CSS properties to style the layout, including the width, height, display, and float properties.
header {
width: 100%;
height: 80px;
background-color: #0066cc;
color: #ffffff;
}
nav {
width: 200px;
float: left;
background-color: #333333;
color: #ffffff;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin: 10px 0;
}
nav a {
display: block;
padding: 10px 20px;
color: #ffffff;
text-decoration: none;
}
main {
margin: 0 200px 0 200px;
}
footer {
clear: both;
width: 100%;
height: 80px;
background-color: #333333;
color: #ffffff;
}In this example, we have styled the <header> and <footer> elements to be the full width of the page and a fixed height. We have also styled the <nav> element to be a fixed width and float to the left of the page. The <main> element has a margin on the left and right to create space between the navigation and the main content. The <nav> links are styled to be block elements with padding and a hover effect that changes the background color on hover.
Step 3: Adding a responsive layout with the @media rule
Now that we have a basic layout, let's make it responsive so that it works on different screen sizes. We can use the @media rule to apply different styles based on the width of the viewport.
@media (max-width: 768px) {
nav {
width: 100%;
float: none;
}
main {
margin: 0;
}
}In this example, we are using the @media rule to apply different styles when the viewport is less than or equal to 768 pixels wide. We are changing the width of the <nav> element to be 100% of the viewport and removing the float, so that the navigation is displayed below the main content. We are also removing the margins from the <main> element, so that it takes up the full width of the viewport.
Step 4: Adding a hover effect with the :hover pseudo-class
Finally, let's add a hover effect to the navigation links. We can use the :hover pseudo-class to apply styles when the mouse is hovering over an element.
nav a:hover {
background-color: #0066cc;
}In this example, we are changing the background color of the <a> elements within the <nav> element when they are being hovered over.
That's it! We have created a simple website layout with HTML and CSS. With a basic understanding of these technologies, you can start building your own websites and experimenting with different layouts and styles. There is a lot more to learn about web development, but this tutorial should give you a good foundation to build upon.