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
Not Found
Not Found

Submitted

Responsive Price Grid

Nikki 80

@N11KK11

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


Typography was a challenge , I need to practice more with box model.

Initially struggled to deploy and still unsure of the issue. It's seperate HTML & CSS files, they load correctly on my local browser.

Netlify & Vercel returned 404 errors, until I renamed HTML & CSS to 'index.html' & 'style.css'. I'm trying to understand why that is.

Thank you for any feedback!

Community feedback

@Miguelaeb

Posted

Hi @N11KK11, congratulations on your solution!

Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:

Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/

The main tag should contain all divs Replace the <h2> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.

Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/solutions/single-price-grid-component-master-ynpfkgRCSb

I hope this helps you and happy coding!

Marked as helpful

1

Nikki 80

@N11KK11

Posted

@Miguelaeb Thank you for great feedback and sharing your solution! It is very kind of you.

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