Submitted almost 3 years ago

Stats-preview-card-component

Harish• 10

@harishcalvin

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, This is my first project, built from scratch. I built my best, please share your feedback and tips to improve my code. Thanks :)

Community feedback

Dinesh• 1,115

@Dinesh1042

Posted almost 3 years ago

Hello, HARISH'S!👋.

Fantastic work on this challenge

Here are my few suggestion for you

In mobile view the card image has been broken. To fix that src="./image-header-mobile.jpg" You should period . in front of your image path.
Your card-content has more breathing space on the top make use of that. You can move your card-content slightly upwards.

Yep! that's it Good work Happy Coding💪

Harish• 10

@harishcalvin

Posted almost 3 years ago

Hi, @dinesh1042, thanks a lot for your feedback, I'm not aware this mobile view card image is broken. It works perfect in vscode live server so I thought It would be same in live site, so I uploaded it directly to github. Now I updated . (period) in front of Img path, now it's working fine. Thank you :) and may I know why it was not working in live site as it was worked in live server.

Dinesh• 1,115

@Dinesh1042

Posted almost 3 years ago

@harishcalvin

/ means the root of the current drive ./ means the current directory ../ means the parent of the current directory. When the image is fetched from the server / returns to the root directory and starts path from here by using period ./ the images path starts from the current directory.

Eric Salvi• 1,330

@ericsalvi

Posted almost 3 years ago

Hey, this looks great for your first project built from scratch. Make sure you double-check your images on mobile after uploading to Git Pages. That is always good practice to QA your work after you make it public.

The other thing you could try to implement for future projects is the BEM naming convention for your class names.

Keep on going!

Harish• 10

@harishcalvin

Posted almost 3 years ago

Thanks for your feedback. And sure, I'll read and use BEM naming convention. :)

Victor Eke• 190

@Evavic44

Posted almost 3 years ago

What's BEM naming convention?

Eric Salvi• 1,330

@ericsalvi

Posted almost 3 years ago

@Evavic44 it stands for Block Element Modifier and it is used as a naming convention to help readability in relationship between HTML and CSS. https://css-tricks.com/bem-101/

tediko• 6,580

@tediko

Posted almost 3 years ago

Hello, Harish! 👋

Congrats on finishing your first challenge! Your solution responds well and looks good. I have nothing to say after great feedback from both Dinesh and ericsalvi but happy to see your next solutions!

Have fun coding! 💪

Please log in to post a comment

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