Skip to content
Submitted over 2 years ago

Stats preview card using HTML and CSS flexbox, @media

shemjay•140
@shemjay
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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
    @osaarohPosted over 2 years ago

    Hey

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

    1. CSS Naming

    • 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.

    2. Overlay Method

    • 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.

    3. Recommendations

    • 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
    @shemjayPosted over 2 years ago

    @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
    @osaarohPosted over 2 years ago

    @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
    @shemjayPosted over 2 years ago

    @Master-Osaro Thanks will do!

    0

Please log in to post a comment

Log in with GitHub

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