Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502
Request failed with status code 502

Submitted

Simple Price Grid Component

Rafalβ€’ 1,395

@grizhlieCodes

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Just another project I wanted to have access to as an example for newer developers as to some flexbox/css grid functionality, as well as clamp.

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hello, Rafal! πŸ‘‹

Nice job on another challenge! πŸ‘ This one is a simpler challenge, but your solution looks great! πŸ˜€

Super tiny thingβ€”but I noticed some padding-top on the body for some reason that pushes the card component a bit off-center in the desktop layout.

Also, you could perhaps use an article tag for the card component itself (and section tags for the section inside it, maybe?) to bump up the semantics of your solution a little! πŸ™‚

Otherwiseβ€”keep coding (and happy coding, too)! 😁

Marked as helpful

2

Rafalβ€’ 1,395

@grizhlieCodes

Posted

@ApplePieGiraffe Hey APG, thanks for the feedback πŸ˜„, yeah I was helping newer people and this challenge kept on coming up, it's a great entry one to practice grid/flex; Thought I might as well do it.

Darn, forgot about that padding, thanks for that.

Honestly my brain's jury is still out on when to best use articles/sections. I thought I knew what's what at one point but then read an article or two and decided I most certainly do not know what's what. Mostly because so many people seem to have various opinions on it.

Do you have any useful resources for clearing this up, or perhaps a robust definition that works for you?

1
P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@grizhlieCodes

I know! Semantics is an interesting (and sometimes, a little opinionated) topic and I often wonder what's the right tag for the job. πŸ˜„

Here's a great, very detailed article on how to section your HTML from CSS Tricks. It's often helped me think about semantics and how to markup things, and it's got so much in it I should probably give it another read sometime soon to refresh my mind. πŸ˜…

My semantics suggestions are just suggestionsβ€”I might learn something new and change my mind sooner or later. πŸ˜‚

1
Rafalβ€’ 1,395

@grizhlieCodes

Posted

@ApplePieGiraffe Down the rabbit hole we go..... 😩😬

Thanks again, will read and temporarily make up my mind lol. (Darn this is a long article, huh?? Love details. )

1

Please log in to post a comment

Log in with GitHub
Discord logo

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