Skip to content
Submitted almost 5 years ago

pricing-component-with-toggle-master

Anil Kumar Khandei•70
@anilkhandei
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pricing component with toggle
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Please have a look at my solution any feed back is much appreciated. I am learning frontend development so any feedback is much appreciated. I think i will try SASS in my next solution. I know my areas of improvement- 1- I think i am using a lot of redundant styling. 2- Using advanced css features like css variables 3- fonts are a bummer Questions:

  1. I had a hard time with the font size and font weights i dont think i matched. Need some helpful tips? How to approach font sizing and weights. Especially i could not match the weight with the sizes. At one particular font size if i want to increase the font weight i am unable to do so.
  2. How to manage the width of the cards when browser size shrinks? I used media query for mobile but what about sizes larger than mobile but still we want the optimal layout?

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    Nice work Anil! It's great to see that you're reviewing your own code and planning on what you would like to improve on. To answer your questions:

    1. The font weights can be found in the style-guide.md file. For this challenge, you only needed 700, so the 400 and 900 isn't needed. With the sizes in these challenges, I'd recommend increasing the JPG design file to its natural size (100%) and using your best judgment. Either that or you could get the Sketch design file, which shows the exact sizes, which is how you'd do it in a professional environment.
    2. You can use percentage widths on elements if you want them to resize based on the browser. You can also set max-width so that they never grow beyond a certain size. When building responsive sites, I'd recommend just resizing the screen and adding media queries as appropriate. You can also use the device emulator in the Dev Tools to check how it would look on different devices.

    Let me know if you have any questions. Keep up the great work! 👍

    1
  • Anil Kumar Khandei•70
    @anilkhandeiPosted almost 5 years ago

    Thanks Mark, for the review and response very helpful.

    0

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