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 Price Grid Component in HTML and CSS

P
Roy 195

@royschrauwen

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


I have been self-learing HTML and CSS since May 2021 and I want to become a developer, so any constructive criticism is welcome.

Community feedback

Eric Salvi 1,330

@ericsalvi

Posted

Hey Roy,

This looks really good for someone being self-taught for a month. Keep up the great work.

One thing that did stand out to me from a visual side of things is that the color styles for the background and fonts do not match the solution/design. I would take another look at those things to try and get them as closely matched as possible.

The responsiveness works so that is great. I did not test on different browsers so you may have some incompatibilities on older browsers. I'd run your CSS through https://autoprefixer.github.io/ and then use the generated code for your CSS. It adds all the browser compatible flex stuff and other things needed to make sure it works for almost all viewers.

I think you could have done one extra thing to set the hover, focus, and active states on the button. Play what that. You have a license for creativity there.

Lastly, the code itself looks clean and pretty straightforward. I think for future solutions you should check out semantic HTML markup https://developer.mozilla.org/en-US/docs/Glossary/Semantics and read about BEM naming conventions. Just some tips.

Keep up the momentum!

1

P
Roy 195

@royschrauwen

Posted

@ericsalvi Thank you very much for your kind and detailed feedback.

I will look into the color styles not matching. I don't know what I did to change them.

I tested in Chrome and Firefox. Would that be enough or is it better to test in all browsers?

I tried to implement your helpful advice regarding the CSS autoprefixer, button states and markup semantics in the next challenge I just uploaded: https://www.frontendmentor.io/solutions/3column-preview-card-component-with-html-and-css-VWvdp-3y_

Thank you very much for the tips. I really appreciate it.

0

@hrushi-thorat

Posted

hey man grate job just give close look at the color scheme they are just little bit off from design..best of luck keep it up

0

P
Roy 195

@royschrauwen

Posted

@hrushi-thorat Thanks for the feedback. I will look into the color scheme. I thought I copied them well from the design document, but maybe I did not look at the final result well enough.

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