Skip to content
Submitted 3 days ago

Single price grid component by HTML and CSS (Sass)

Kairung Vangmanaw•230
@VangmanawKairung
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of creating a responsive layout using CSS Grid and Flexbox, as it helped me structure the design effectively for both mobile and desktop views. Additionally, leveraging SCSS allowed me to write clean and maintainable code, which I found very rewarding. Next time, I would focus on:

  • Improving accessibility by adding more comprehensive ARIA roles.
  • Optimizing performance through better asset management and smaller CSS files.
  • Exploring JavaScript interactivity to make the design more dynamic and engaging.
What challenges did you encounter, and how did you overcome them?

The main challenge was creating a fully responsive layout, which I solved using CSS Grid and Flexbox for flexibility. Maintaining consistent styles was another hurdle, overcome by leveraging SCSS variables and mixins. Debugging layout issues with Chrome DevTools also played a key role in resolving problems efficiently.

What specific areas of your project would you like help with?

I would like help with further optimizing the responsiveness of the layout for more screen sizes and refining accessibility features, such as improving ARIA roles and ensuring compatibility with assistive technologies. Additionally, I’d appreciate guidance on enhancing performance through better CSS optimization and exploring ways to add more interactivity with JavaScript.

Community feedback

  • Dylan Heslop•1,600
    @dylan-dot-cPosted 3 days ago

    media (min-width: 1440px) {

    everything looks good, only issue is that media query you have is too large as it will only work for laptops that are really large and not for the smaller ones like 1024px. ANd even my laptop (about 1340px) is seeing them vertically. SO that's one thing you can fix.

    For the css body main.container section#pricing-section button I think you are overusing the selectors, which it's not really a bad practice, but having clear and short selectors are a bit like having good variable names. I think a bottom top approach would be really good in these. Anyways you can apply a classname for the button and it would be clearer...also what happen if you want to add a hover to the button? ANyways... section#pricing-section button is better but still a bit lengthy especially since you only have 1 button.

    Other than that everything else is good, you might also wanna look into css variables to help make your code more modular

    1
    Kairung Vangmanaw•230
    @VangmanawKairungPosted 2 days ago

    Thank you for your feedback!

    You're absolutely right about the media query size—it could definitely be adjusted to include a wider range of screen sizes, like 1024px and up.

    As for the button selector, I see what you mean about keeping it clear and concise. Using a class for the button would simplify things and make hover states easier to manage.

    I’ll also look into using CSS variables to make the code more modular.

    Thanks again for the detailed suggestions!

    1

Please log in to post a comment

Log in with GitHub

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