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

Desktop optimized design using HTML and CSS

Urmi Jana 10

@Urmi-Jana

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

Solution retrospective


This is my first time creating a design using only HTML and CSS. I had some problems regarding the hover state of the buttons and optimizing the design for mobile devices. Any help/feedback will be greatly appreciated!!!

Community feedback

Jesse 430

@jesse10930

Posted

Hi Urmi Jana, your project is looking good so far! For the hover-state of the buttons, you just have to add 'button:hover' to your stylesheet, and then add any changes that you want to happen. For example, if you want to change the arrow to a pointer, you could add the following:

button:hover {
    cursor: pointer
}

As for responsive design, I'd recommend not using fixed pixels when styling the different elements because as the screen size changes, the element sizes will remain the fixed-pixel size that you defined in your original styling. Using unites like rems, ems, or percentages will respond when the screen size changes because these units are dependent upon their parent divs or the root element. So as the screen size changes, these elements will change size as well.

Other tools you could look into for mobile CSS design are Flexbox, Grid, and mediaqueries.

Hope this is helpful! Keep up the good work!

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