@HARSHITKU
Latest solutions
Latest comments
- @monodonBrand
Hello Harshit,
-
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.
-
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.
-
Functionality: I'd add a hover style to anything a user can interacts with, so in thins case the button.
-
- @MinervaLong@monodonBrand
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.
- @elenastagg@monodonBrand
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.
