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 path contains unescaped characters
Not Found

Submitted

CSS GRID Single Price Component

@J-HernandezM

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


Made with CSS GRID. The thing i fount the most difficult was to correctly make the layout in a decent amount of time, i already practiced some of the properties so i already knew what to do but the devil is in the details so in order to make it look as same as possible i took more time changing some properties.

Maybe im insure in the way i work with the css, should i create less classes? so i can reuse parts of code? Is it escalable?

im trying to use BEM naming, but im unsure if im doing it correctly

Community feedback

P
Alper 1,010

@adonmez04

Posted

Hi, @J-HernandezM. It's a good solution. Keep coding. I have some suggestions for you.

1 - You don't need to give any class names to your main element. Because it should be a unique element on your page. You can just use it as the main.

2 - You can use a section instead of div.card__join boxes. Section separates the main's content with h1-6 tags. We can access our content in the main with this style easily.

3 - You don't need to use CSS Grid for 1 direction-flow. You can use flexbox for 1 direction-flow. CSS Grid works perfectly with 2 direction-flows and complex components. It usually uses a general page layout and 2 direction-flows. Actually in this challenge, you don't even need to use flexbox (for the container's child elements). You can give some whitespace to your elements with margin-bottom. It's an easy solution.

4 - You should use the h1 tag on your page. This is necessary.

5 - You can use ul > li instead of card__info whyInfo. It's another easy solution.

Check some good solutions and implement to your code.

I hope these will help you to improve your perspective. Keep coding. All the best.

Marked as helpful

0

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