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 Component using HTML and CSS

@PriyankaRC16

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


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

Community feedback

@kaiser-sb

Posted

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

0

P
Iggy19944 160

@Iggy19944

Posted

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

0

P
Iggy19944 160

@Iggy19944

Posted

@PriyankaRC16 you are welcome. I would like to add one more thing that is super useful for me. I use Chat GPT. Its open AI tool.. Its free to use and you can ask it questions and it provides answers, its very good at understanding what you ask even if you dont ask well and its very good at elaborating with follow up questions. For example there is times where I dont know what I did wrong, so I will copy my entire HTML markup and then my entire CSS markup into it and then I will ask... why is something not working and he will give me great answers. It is extremely useful for learning and getting answers. Give it a try. https://chat.openai.com/

Marked as helpful

0

@PriyankaRC16

Posted

@Iggy19944 yes I know about ChatGPT. I use it a lot too!

Thanks!

1

@jonhenrikaavitsland

Posted

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

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