Submitted about 1 year ago

Responsive 3-column layout with active states using Sass

sass/scss

IO•770

@i000o

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of my speed and confidence approaching these types of layouts recently. I feel I can take on the task and get it done efficiently without detouring due to unforeseen errors too much.

I need to pay more attention to my use of <main> vs <body> tags. The reason being, I noticed I wasn't landmarking my HTML with a <main> tag, which isn't great practice, namely because I didn't have varied content on these designs, so there was nothing else to differentiate <main> from. However, I don't want to get into a bad habit, but now I sometimes target <body> with sizing when I should be targeting <main> instead. This caused a conflict later on that confused me, and I could have avoided.

What challenges did you encounter, and how did you overcome them?

As I said, conflict between <main> and <body>. I want to use both moving forward and work out the kinks in this detail so I don't overlook it again.

I had some difficulty with the active states but only because I was confusing it with hover which I now understand are very different, as well as from focus, too.

I used a desktop-first workflow which meant I had to adjust my use of media queries to use max-width and work backwards in the breakpoints. This was a bit finnicky, but I somehow find it easier than a mobile-first flow because there is less work to do in making the design responsive when you do the bulk at the beginning, in my opinion.

What specific areas of your project would you like help with?

I'd like feedback on my Sass. I tried to make better use of it this time, incorporating nesting, mixins, variables and partials. I'd like to go deeper over time, though. I find that writing careful Sass makes me understand my CSS better, which I appreciate.

I couldn't figure out how to remove the previous border-radius settings on the mobile design in the media queries. Those settings weren't behaving as I'd expect. I tried targeting specific corners, as well as a general border-radius attempt (I learn that this is actually shorthand, which is good to know). This bugged me a lot, so help would be appreciated.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on IO’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord