A responsive website is one that changes its shape and size to fit any device, whether it’s a desktop computer, a laptop, a tablet, or a smartphone. In this tutorial, we’re going to create a responsive website from scratch, using HTML and CSS.
We’ll be using a simple three-column layout for our website. The first column will be for the website’s header, the second column will be for the main content, and the third column will be for the website’s footer.
The first step is to create the HTML for our website. Here’s the code for the header:
My Responsive Website
Next, we’ll create the HTML for the main content:
My Article Title
My article content goes here.
Finally, we’ll create the HTML for the footer:
Now that we have the HTML for our website, we can start styling it with CSS. We’ll start by styling the header. Here’s the code:
header {
height: 100px;
background-color: #333;
}
h1 {
font-size: 48px;
font-weight: bold;
}
Next, we’ll style the main content. We’ll make it take up the full width of the screen, and we’ll add some padding to the top and bottom:
main {
width: 100%;
padding: 20px 0;
}
article {
width: 80%;
padding: 10px 0;
}
h2 {
font-size: 36px;
font-weight: bold;
}
p {
font-size: 18px;
}
Finally, we’ll style the footer. We’ll make it take up the full width of the screen, and
