Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Cannot read properties of null (reading 'code')
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

Html5, Css3(flexbox and media queries)

@aasthaanand123

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would appreciate if you all suggest me ways to improve my code since I really faced difficulties in applying the background color and at last took a shortcut(not using css) and also I faced certain problems in media queries and I'm not really sure if its written in a correct manner.

Community feedback

Tereza 605

@sirriah

Posted

Hello,

Nice work. I have some suggestions:

  • Not everything should be in div tag. For example for paragraphs use p tag, etc. Look at some articles or videos - list of all tags and FreeCodeCamp - semantic HTML
  • Try to use BEM naming or another naming standard. This project is small, but If you will work on something bigger, you will get lost. [Video about BEM] (https://www.youtube.com/watch?v=SLjHSVwXYq4)
  • As josuke0227 mentions above - the responsiveness is not good. Try to add another breakpoint. I know that in the starter files are only designs for mobile and desktop, but It would be better, if the page will be visible in all devices. [Responsive design] (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) Your browser will help you with the media queries [Responsive design mode in Firefox] (https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode)

Have a nice day :)

1

@aasthaanand123

Posted

@sirriah Thanks for the feedback. I do think I'll start incorporating BEM in my code and I'll look into the responsiveness also since I did struggled in media queries the code became really messy.

0

@josuke0227

Posted

Hello, Aastha!

Good work, mate👍

What I'd like to suggest is as below:

  1. You can apply font-style globally if you set it to body in your stylesheet.
  2. The break point which the layout is switched to desktop one may be a bit too small since the left side of the contents is outside of the screen.

I hope it helps.

Happy coding! :)

0

@aasthaanand123

Posted

@josuke0227 Thank you for the feedback! I'll surely look into the code again.

1

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