Refining the Frontend: From Sketches to a Fully Responsive Navbar

After playing around with sample code from W3Schools to get a basic header and footer, this was my initial result:

[Insert picture – first draft frontend design]

This approach—designing while coding—turned out to be a mistake. However, one thing I did right was sketching my ideas on paper before diving into development. Now, it was time to digitize these ideas for the second iteration of my website. To get inspiration, I browsed Dribbble for blog post designs.

[Insert picture – paper sketches]

Turning Sketches into a Realistic Design

For this stage, I turned to Figma. While coding rough versions and iterating over time works in some cases, UI/UX requires deliberate attention. You can’t focus on usability while also coming up with class names for your styles. Since I was already comfortable with design tools like Photoshop and Canva, using Figma felt like a natural choice.

I started with the most commonly used elements—the navbar and footer—and built from there. But first, I had to learn how to use Figma (I quickly realized I had no idea what I was doing). Luckily, knowing what I wanted to design helped. Since Tailwind CSS is a mobile-first framework, I created three versions of my designs: mobile, tablet, and desktop.

At this stage, I focused on two essential pages:

1. Home Page – Displays all blog posts.
2. Post Page – Shows the full content of a selected blog post.

[Insert picture – Figma designs (mobile, tablet, desktop versions)]

Applying Figma Designs to Code

A major benefit of using Figma was how naturally elements grouped into components, mirroring how Vue.js structures its UI. Once I was happy with my designs, it was time to translate them into HTML and CSS.

Initially, my plan was to prioritize layout first and handle styling later—a smart move, since styling can be time-consuming. But my obsessive perfectionism kicked in, and I ended up spending six hours animating a navbar instead.

Yep, the problem is me.

That was most definitely a waste of time for an MVP, but on the bright side, I did end up with a fully responsive navbar—not bad for someone who supposedly "hates" frontend development.

Key Lessons Learned About Layouts

Since I’m using Tailwind CSS, a lot of the heavy lifting is already done. I primarily worked with:

• flex – for flexible layouts
• justify-between – to space elements evenly
• items-center – for vertical alignment

This made structuring my layout a breeze. But then, of course, I went down a rabbit hole of fine-tuning padding, margins, overflow, and positioning. All useful knowledge, but not essential for an MVP.

Final Thoughts

Don’t get stuck in the details too early. It’s okay to come back and improve things later.

Remember:

“

Small, continuous progress is better than getting lost in pixel perfection.

”