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

my second project with vs code I hope u like it

@riddler5000

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@ZenitsuAg

Posted

Hi Riddler, you've done a great job, but there are a few things you can improve on

  • It's better to have your CSS and HTML in separate different files.
  • You also forgot to include the images folder that's why the images aren't showing
  • You have to wrap your code in a landmark tag like main, footer, for accessibility reasons
  • Your code is also not responsive, you didn't work on the mobile view so the user-experience on smaller devices is not really great.
  • You can update the font-family with this in your CSS:
// Import the font from google
@import url(https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;900&display=swap)

body {
    font-family: "Lexend Deca", monospace;
}

h1 {
    font-family: "Big Shoulders Display", serif;
}
  • And finally, add some hover effect to the button with:
button:hover {
    background-color: *some color*
}

Overall you did great!! Keep up the good work.

Happy Coding :)

Marked as helpful

1

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