Design comparison
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
- @MiguelaebPosted about 2 years ago
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 helpful1@N11KK11Posted about 2 years ago@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 GitHubJoin 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