As a backend developer by trade, I’m much more at home wrangling data, building APIs, and designing systems than I am worrying about layout or color palettes. But when I decided to build a personal website, I had to wade into the world of frontend development—a world filled with frameworks, component libraries, and way too many opinions.
 

Like most developers, my first instinct was to research the tools: React? Svelte? Astro? Tailwind? Bootstrap? Chakra? MUI? Radix? ShadCN?
 

It didn’t take long before to realize that I didn’t need any of this. My website was simple, and using this as a learning opportunity, I committed to writing it all pure CSS.
 

At first, writing raw CSS was a nightmare. Then it got a bit easier, but then came responsiveness. For each media query, it was the same thing over and over and over again. Setting the margin and padding for when the viewport is this size, then this size, then this size. It was repetitive and frustrating.
 

But halfway through, I paused and thought why am I treating desktop and mobile like two separate versions of the site? What if I just made everything fluid from the start? That’s when I started experimenting with viewport units such as vw and vh. I adjusted padding, margins, text sizes, and layout spacing using the viewport directly. And to my surprise, it just… worked.
 

All the elements resized themselves as I resized the browser window and it was smooth like butter. It probably isn’t the solution for bigger projects and dynamic websites with a ton of content or websites that target specific devices. But for a simple blog or personal site, it was perfect.
 

I still love the backend, but this has been a great learning experience and I’ve got a newfound respect for the frontend.
 

Below is a CSS snippet that I used for my site:

:root {
  --spacing: calc(25vw - 100px);
  font-size: calc(1rem + 0.5vw);
  overflow-y: scroll;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  padding: 1vw var(--spacing);
  flex-grow: 1;
}

nav {
  align-items: center;
  padding: 0.7rem 0;
}