Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
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

Training-product-preview-card-component-main

@Devalito67

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


i try to do a good job and think there a lot of things that you can do faster than me but a dont know how, so please ask me if you have advice. Thanks in advance.

Community feedback

@Fasunle

Posted

Hey @Devalito67,

It is my pleasure to review this project. You did an amazing job. Since you want a better job, here are a few tips that would make you result even better:

  • I find out that you are styling html elements directly e.g:

h3 {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 5px;
}

This is not considered a good practice and it is pretty painful to understand the styles when you revisit your code in future. Instead,

  • reset the default styles: https://piccalil.li/blog/a-modern-css-reset/ to prevent inconsistencies across browsers.
  • use class instead of html elements e.g . heading instead of h2
  • BONUS: I would also suggest that you look into the BEM Methodology. This will make your work clean and fast.

If you find this useful, kindly mark it as useful.

Happy coding

Marked as helpful

1

@Devalito67

Posted

@Fasunle Thanks for your help, i have update my work and try to apply your advices to do a better job, i hope i did it...

1

@Fasunle

Posted

@Devalito67 you can invite me to your project on GitHub... It's my pleasure to help once again.

Here is my page link:

https://github.com/Fasunle

Marked as helpful

0
Tomek 240

@qntek

Posted

Hi there. Well I think that You should start learning html / css first before using bootstrap.

Also try to apply some media query to that project so it could display on mobile devices as well.

Good luck.

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