Design comparison
Solution retrospective
Comments welcome
Community feedback
- @folathecoderPosted over 3 years ago
Hey Dakota!
You have started well, keep it up!
There are some changes you might want to make:
Note: I only viewed this on my mobile phone, so I can't really tell how it looks on larger screens.
-
Adjust the mobile font size, it is too small for accessibility.
-
I noticed that you made use of variables to define your colors. That's awesome!
But you still went ahead to enter colors directly in some sections of your code. You can easily assign a variable to the color and that will make it easier if you wish to maintain your code.
- I suggest you look into BEM for naming classes. This will really help you when you start using SCSS/SASS.
Happy coding!š
2 -
- @grace-snowPosted over 3 years ago
Whoop, well done! You should be proud of this.
āļø Good semantic HTML āļø CSS custom properties āļø Understandable clean CSS
To improve this I recommended
- removing the font-size 62.5%. Yes, this will may mean you need to check/adjust rem sizes through your solution (although as others have mentioned current font sizes are too small atm, so you may be fine). I'm a strong advocate for accessibility and it's a bad idea to bump default sizes down like that. The font size in the style guide is 15px I think(?) so I would set that on the body as 0.9375rem, not the root (html). That way 1rem will stay as 16px or whatever the user has set it to be, with no danger of people being unable to read the site.
- I'd also remove the large margin top on the content - again, as others have mentioned you can center the grid on the page using grid/flex
- in html you can't have a button or anchor tag inside each other. Just style the link to look like a button. Links are for navigation (which this sign up link would be) whereas buttons are for action.
- try to add the shadow on the grid if you can. Small details like that matter to designers. There are lots of shadow generators online that can help you, and usually designers use a shade of the background color for the shadow rather than default black.
Good luck āŗ
1 - @ChamuMutezvaPosted over 3 years ago
Nice work Dakota. The site is responsive on most devices. I would suggest to increase the font-size - looks a bit smaller than the design.
Happy coding
0 - @DEmanderbagPosted over 3 years ago
Hey Dakota š
For desktop, view try using on the following code on a body
body { min-height: 100vh; place-items: center; }
To center cards to the middle of the screen. If you use the code above you can also remove
justify-content: center;
0
Please log in to post a comment
Log in with GitHubJoin 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