Skip to content
Submitted about 2 years ago

3-column preview card component

Josh•100
@Joshua-Farr
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

3-Column Preview Card Component:

I really enjoyed working on this project, it felt like the first time that things that I've been learning were starting to click. Theres still a long road ahead for my web dev journey but I will take the success of this project as a personal victory!

Wins:

  • Made use of a professional styling reset at the start of my styles.css file.
  • Able to solve problems using already existing documentation as I ran into them.
  • Felt really comfortable with applying basic flex-box styling to the elements.

Go Gets:

  • Try and find a simpler solution for handling element color changes. Felt like my CSS was not as optimized as it could have been.
  • Choose a challenge that requires the use of a CSS grid to force learning.
  • Try a harder HTML / CSS challenge (non-newbie)

One of the problems I ran into was on the hover states, the blocks would get pushed down. After some googling, I realized that the problem was caused by not having a border on the initial button state. Putting a border (albeit invisible) on the learn more buttons solved this issue!

Questions that I had while working on this project:

  • Will I run into specificity issues with having the h1 override the body font?
  • Is there a way to have the button color inherit the same color as the background or is the best way to separate it separately?
  • Is there a simpler solution for handling the button hover state changes?

Any additional feedback would be greatly appreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    HEADINGS ⚠️:

    • This solution consists incorrect usage of <h1> so it can cause severe accessibility errors due to incorrect usage of level-one headings <h1>
    • Every site must want only one h1 element identifying and describing the main content of the page.
    • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
    • In this solution there's three <h1> elements, like this <h1>SEDANS</h1>, you can preferably use <h2> instead of <h1>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely
    • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)
    • Example: <h1 class="sr-only">3-column preview card component</h1>

    CSS 🎨:

    • Looks like you declared each background color for each button which needs to be change the background color during the hover, actually we can handle that issue with a the inherit value
    • Yes you're right there's a value which is used to inherit the parent element's background
    • So just add background: inherit for the button elements during hover additionally we replacing the border with outline they both work similar but outline doesn't consume extra space like border does.
    • Let's look an example
    button:hover {
background-color: inherit;
color: white;
outline: 1px solid white;
}
    • Now you can remove these individual declarations for the background for each button element
    .sedans a:hover {
background-color: var(--bright-orange);
border: 2px solid var(--very-light-gray);
}
.suv a:hover {
background-color: var(--dark-cyan);
border: 2px solid var(--very-light-gray);
}
.luxury a:hover {
background-color: var(--very-dark-cyan);
border: 2px solid var(--very-light-gray);
}
    • Now you have gotten the desired result without hassling in an efficient way.
    • Pro tip: you can use transparent value for background property to get the same effect as `inherit.
    • If you have any questions or need further clarification, you can always check out my submission and feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful

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