Skip to content
Submitted over 1 year ago

Stats Preview Card Component using HTML and CSS

Priyanka Roy Choudhury•100
@PriyankaRC16
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone!

I have a few issues with creating this card component.

  • The image of the card was not the same height as the text card even though I tried to inspect with the image height and the classes too.

  • Any other feedback is appreciated!

Thank you

Priyanka

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Sunetra Bhowmick•280
    @kaiser-sb

    Hi Priyanka,

    Nice job on completing the project! To solve this issue you faced - you can use a wrapping div in which you can create two more divs with 50% width. Also, you don't need to break the paragraph lines and style them individually. Just use one header for the heading, one paragraph for the text, and maybe some span tags wrapped in divs to get the lower part done. If you're using flexbox - all these will be even simpler with minimal styling. Knowing the default nature of different elements will help you to choose on which elements to choose in which situation, e.g. - div, p etc are block elements whereas span is inline element by default.

    I saw a fellow coder suggesting the use of ChatGPT. While this can be tempting and acknowledging the fact that this can be super helpful at times when you're really stuck - relying on it for your error correction can at times be frustrating. GPT can be really stupid at times and you need to know the concepts to identify its stupidity. I would suggest googling, referring to articles, going through stackoverflow solutions etc. This really helps to build up concepts. Hope this helps. Happy coding!

    Marked as helpful
  • Iggy19944•160
    @Iggy19944

    check out my solution, it might be helpful. https://www.frontendmentor.io/solutions/frontendmentor-preview-card-component-EJRNpCjv7o

    I also initially had issue with image height. here is link to discord thread where mods answered my questions about that https://discord.com/channels/824970620529279006/1167660276330532915/1167660276330532915 https://discord.com/channels/824970620529279006/1167186479223668867/1167186479223668867 https://discord.com/channels/824970620529279006/1168998725952217199/1168998725952217199 https://discord.com/channels/824970620529279006/1167347714850291792/1167349670830424104

    I would also suggest not to rush publishing projects until you feel good about them. Discord has really great knowledgeable moderators that are happy to answer any question. That's what I do when I get stuck, which is often. Remember the goal of the challenges is to learn through mistakes and hardships.

    Marked as helpful
  • Jon Henrik Åvitsland•230
    @jonhenrikaavitsland

    Hi Priyanka.

    Just a suggestion, perhaps you should put the elements into one common container and let them adjust height by default.

    Marked as helpful

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