Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
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

Stats preview card using HTML and CSS flexbox, @media

shemjay 140

@shemjay

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


What I found really difficult while building the projects was:

  1. How to properly name my css classes.
  2. How to change the background color of the image using css. I still managed to do it but i could not get the color to match exactly.
  3. Positioning with css especially positioning text within flex childs I was really wingin most of the text positioning.

Areas I am unsure of: Pretty much all areas from the parts I found difficult above lol. Though I am also unsure on how I removed the default margin and padding of my website. Instead of using the '*' (asterisk) and setting the margin and padding to 0, i used bofy, html and set that margin and padding to 0. I hope that is not bad practice.

Questions I have:

  1. How can I get better at naming my css classes according to industry standard?
  2. What is the best way to change the background color of an image using css?
  3. What can i improve on in my attempt?

Community feedback

Osaro Iyoha 1,080

@osaaroh

Posted

Hey

Good work so far on this task. For your questions:

  • Check out the this Block, Element, Modifier methodology (BEM) article from CSS Trick here. CSS TricksBEM The BEM naming is very popular and its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
  • To be frank I also use an overlay with absolute positioning like you did on this project. Maybe CSS filter will have that ability in future updates.
  • Use media queries and flex-direction to make your code responsive on mobile devices, as it currently looks packed on my mobile device

@media only screen and (max-width: 576px) {
    body {
        flex-direction: column;
        text-align: center;
        background-image: url("../../images/bg-intro-mobile.png");
    }
    p {
        font-size: 0.95rem;
    }
}

Marked as helpful

2

shemjay 140

@shemjay

Posted

@Master-Osaro Thanks so much! This really helps a lot especially that part on media queries I didn't even know I could do that

0
Osaro Iyoha 1,080

@osaaroh

Posted

@shemjay Glad I could help. Just to add, one other thing you will find helpful is the "view report" section above. With it you can check out html issues you may have and apply some of the recommendations given.

Happy Coding!

1
shemjay 140

@shemjay

Posted

@Master-Osaro Thanks will do!

0

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