Member-only story
How to make a basic responsive web from scratch
4 min readApr 18, 2024
If you’re here reading this, you probably already know a responsive web design ensures that web pages adapt and display effectively across various devices and screen sizes, providing an optimal viewing experience for users.
Now we’re going to make a straightforward responsive web that hopefully you can learn and understand how to make a responsive web from scratch just with HTML and CSS.
Let’s get to it. All of this code is inside the body tag. We start at 1024px desktop screen resolution and then make it responsive for iPad or smartphone screens.
Large resolution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello, world!</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<link rel="icon" href="favicon.png">
</head>
<body>
<div class="header">
<h2>Blog</h2>
</div>
<div>
<div class="row1">
<img src="https://fakeimg.pl/250x100/">
</div>
</div>
<div class="row2">
<div class="column-2">
"As a highly skilled web dev, I possess the technica…
