Skip to content
OverviewSolutions
2
Comments
3
Shahar Levy
@monodonBrand

All comments

  • Shahar Levy•85
    @monodonBrandPosted over 4 years ago

    Hello Harshit,

    1. Design: the best way to get the design perfect for these challenges is to use a browser extension like pixelperfect that let you see all the small differences between the mockup and your code. But just from looking at it quickly, you have different spacings and sizes for the headers, the lower right block background color is not accurate, the text on the button is not accurate, the price is bigger then the mockup and the per month should not be aligned to the bottom. There are more inconsistencies but they can all be solved with pixelperfect extension. It's very very hard and takes much longer to get all these things right just by eye training so I really recommend you use it in your next challenges.

    2. Responsiveness: Your design does not brake in small sizes but not going mobile first made you keep the desktop layout for much too long.You should move to a single column design at about 600px width and adapt spacings around the component so you have more room for text and button. Right now at 650 about 50% of your width is the background and things get squished and long. I suggest building the mobile design first then adapting it as screen size grows. Usually you can adapt spacing and margins and font sizes an only after at about 750 and bigger (sometimes even only at 1000+ width) move to multi column layout.

    3. Functionality: I'd add a hover style to anything a user can interacts with, so in thins case the button.

    1
  • Vanesa Perea•50
    @MinervaLongSubmitted over 4 years ago

    This time I've found my way of organizing CSS a bit messy for the three views(first inline elements and then block elements)so for the next challenge, I want to find a better method. Does anyone have a favourite method to write CSS? :) Also, my code works good in Firefox but terrible in Chrome, If I'm not wrong Sass or Less are the solutions for that. Could anyone give me some advice about it? Which is best? Thank you

    Single price grid component

    1
    Shahar Levy•85
    @monodonBrandPosted over 4 years ago

    Hey, try not defining grid rows explicitly in this case. use inner padding for the blocks instead to set the right height. Also when you name classes, either use some kind of BEMish syntax or component oriented naming, I would avoid names like t1Div1 because they are first, chining you to a specific structure and second, hard for someone form outside to understand. Also for a project at this scope, I'd avoid utility classes they add code and can be redundant if you are not using them in the end.

    1
  • Elena Stagg•220
    @elenastaggSubmitted over 4 years ago

    I didn't have the design sketch so matched the styles & measurements as best I could. I struggled with making the project mobile-first and adapting the code for larger screens - so I'd be keen to have feedback on the media queries - do they look a bit hacky? I'd also like feedback on making my CSS cleaner in general.

    Single Price Grid Component using Sass & Grid

    3
    Shahar Levy•85
    @monodonBrandPosted over 4 years ago

    Hey. My only suggestions for you for this task is to use pixelperfect extension for your browser so you can really be accurate in sizes and spacing.

    I would not use utility classes in a project of this scope, they add duplication if you are already using variables.

    And finally use some kind of a reset.css file to change browser default styles (such as list styles), and that will add clarity to your code.

    1