Frontend Mentor - 3 Column Preview Component

Going through the frontend mentor challenge roadmap to get some practice in. Found this one to be pretty simple, only challenge was getting buttons to look as close to the design as possible. Grid might have been a better option but I opted for flexbox instead. Maybe I will re-do it with grid for practice somewhere down the line. I also should begin trying to look into mobile-first workflow with vanilla CSS. Feels more intuitive with Tailwind or bootstrap.

Screenshot

image

My process:

  • Desktop first Workflow
  • Responsive Design
  • Flexbox

What I learned:

Learned a bit about transitions when it comes to effects like hovering over a button. A simple 0.5s transition made it look so much better than getting flashbanged with a button hover effect.

Helpful resources:

Responsively App - Great app for testing responsiveness, highly recommend it.

live site