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

Preview Card using CSS and HTML

@sadiaraja25

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@mk-muzzammil

Posted

A lot of improvement you need to adopt : 1 - Firstly main thing you need to do is using media queries to make your website responsive and firstly see the challenge carefully before starting because frontend mentor has provided you also the mobile design not only desktop design so use media queries to do this.

2- Make seperate style.css file and write css code outside the html file its the best practise you should follow

3- Dont use inline css dont write css inside the tags its not a good experience

4- Make local variables in :root and then use it in your css code

                                                     Hope so its helpful for you

Marked as helpful

0

@sadiaraja25

Posted

@MK-Muzzammil thanks for feedback & yes the style sheet, actually did that way but was new to GitHub so kept things in one file, hopefully to keep these points in mind next time.

0

@mk-muzzammil

Posted

@sadiaraja25 It doesn't matter weither you make new css file or use inline css it will not have any effect on you gitHub repository.Try to make new files and work seperately it helps you alot when you pratcise javscript and their libraries .

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