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

Single grid component with responsiveness

Apah 280

@apah-dev

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


Any help toward improving my code is highly welcomed! Thank you

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • It is best practice ✅ to have separate files for you coding files (HTML, CSS, JS). It helps keep things organized and make it easier to maintain.
  • ALWAYS Implement a "Mobile First" approach 📱 > 🖥

Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

More Info: 📚

Mobile First

  • The headings are being used incorrectly ❌. You can only use the <h1> heading once per page ⚠️. So For this component, you will only use the <h1> for “Join our community” and <h2> for “Monthly Subscription” and “Why us.”
  • The “30-day, hassle-free money back guarantee” is not a heading❌. It should instead be wrapped in a paragraph element.
  • The button was created with the incorrect element ❌. When users click on the button they should directed to a different part of your site; the anchor element will allow this to happen.

More Info:📚

MDN The Anchor element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 👾

Marked as helpful

0

Apah 280

@apah-dev

Posted

@vcarames thank you so much for talking the time I’ll go through the code and make required changes 💌

1
Apah 280

@apah-dev

Posted

@vcarames I’m not sure on how to deal with the media query when approaching a mobile first approach since I’m not sure on how to specify the screens using min-width for the sizes

0

@VCarames

Posted

@apah-dev

You'll want to use your browser's developers tools to simulate a screen size of 320px and from there on use min-width to build your content to desktop size.

Marked as helpful

0
Apah 280

@apah-dev

Posted

@vcarames Thank you for taking the time

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