Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You must first complete or unlock this challenge
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Css grid price tag, newbie edition

@Comet466

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

0

Accessibility Issues

0

HTML Issues

View Report

Luis Colina’s questions for the community

hi, hope that you day is going great, this is my first css challenge, i'm relative new in the web development (started learning on january of this year) soo any feedback is welcome with open arms

Community Feedback

@steventoben

Posted

Good job on your first CSS challenge! A couple things I want to point out just in case you didn't realize because they're useful tips: On your 3 divs that are children of the grid container div, you don't have to explicitly set a height. Removing the height will make it take up the size of the row of your grid, which is pretty much the same size as you set. Nice job of using grid-areas and naming them. For your 2nd and 3rd div you actually don't even need to set the grid-area property because with the way grid works, the next child will take up the next grid area available. So if you removed the grid-area: box-2(and 3) it would actually result in the same thing. Just a couple useful grid tips I thought I'd share.

When you do set something's height, try to use max-height or min-height (same goes for width) and try to set it using rem units. Rem units make the application much more responsive and it helps with accessibility. Good job using rem everywhere else tho like on padding and border-radius!

Nicely done, especially for your first CSS challenge! Just thought I'd share some tips about css-grid and rem units!

3


@Comet466

Posted

@steventoben Wow Steven thank you soo much for taking the time of going through my code now i understand the grid a little better thanks to your tips, i already applied them in the repository and it works wonders.

0

Please focus on giving high-quality, helpful feedback and answering any questions Comet466 might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!