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

3 column challenge solution - HTML and CSS

Ashley 20

@ashhh266

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


How do I make the button elements all the same object and inherit the background color instead of specifying in each button?

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Ashley,

Your solution looks great on desktop, nice work!

Regarding your question about specifying each button colour, I don't think you can in this instance. There is a keyword called inherit which let's you inherit the parent's property - it can be quite useful!

Some helpful pointer's

  • have you considered using Flexbox to position your elements instead of position absolute, margin and paddding? It's extremely powerful and would really help your design become mobile responsive too.
  • there are lots of great free resources out there, scrimba is one of them!
  • you're adding a border to your button on hover which is making your design jump a little. Add it before the button is hovered Here is some useful guidance. Also it might be nice to add a transition.
  • be mindful of your accessibility/html report, you can learn a lot from it. Semantic html is really important you could be using a main and footer tag in your design

Good luck with it all, Keep coding!

Marked as helpful

1

Ashley 20

@ashhh266

Posted

@darryncodes Thank you so much for the very thoughtful feedback! This is my first project so I still have a long way to go. I'm going to look into the resources you provided and try some edits. Much appreciated!!

0
Ty 70

@ItsIchi

Posted

For your HTML issues try changing the Backslash() for your images to Forward slash(/) so the images follow the proper path I ran into the same issue a few times, But Nice work!

Marked as helpful

0

Ashley 20

@ashhh266

Posted

@ItsIchi thanks for the feedback! I noticed that in the report, but wasn't sure what the issue was. I'll make some edits.

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