Stats Preview Card Component using HTML and CSS
Design comparison
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-sbPosted 12 months ago
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 morediv
s 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 somespan
tags wrapped indiv
s 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 whereasspan
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 helpful0 - @Iggy19944Posted about 1 year ago
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 helpful0@PriyankaRC16Posted about 1 year ago@Iggy19944 thanks a lot. Really appreciate it!
0@Iggy19944Posted about 1 year ago@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 helpful0@PriyankaRC16Posted about 1 year ago@Iggy19944 yes I know about ChatGPT. I use it a lot too!
Thanks!
1 - @jonhenrikaavitslandPosted about 1 year ago
Hi Priyanka.
Just a suggestion, perhaps you should put the elements into one common container and let them adjust height by default.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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