Flexbox, css, html5

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi Yann! Your solution looks great, well done! Everything looks responsive, although I am not sure about setting a width of the container in column to 300px - you can get viewports that are less than that, but the issue would be just visual in this case (the user would still be able to click the buttons). I would just set a max-width instead, I think. And a few more tips:

  • Adding a transition to your hover states makes the design look more polished and professional

  • Instead of adding the rounded corners on end cards individually, you can set border-radius on the container, just make sure to add overflow: hidden as well - it's a good trick to know :)

  • Some people consider using ids in CSS to be a bad practice (but then again, others disagree and say it's perfectly fine). Another way to add the background colors to your card would be to add helper classes, like .yellow {background-color: yellow;} or to use a pseudo selector nth-of-type(n) This is a good article that explains it, I think

  Hope this helps :)

  1

  ---

  

  Yann•75

  @YannotronPosted over 3 years ago

  @AgataLiberska Thanks a lot, I am slightly confused as to what you mean ref to the container size. Could you guide me towards a better solution?

  Transition: Absolutely! :) Rounded corners on container: I will but do not understand what <code>overflow:hidden</code> would achieve. Could you elaborate?

  Helper classes: I learned about class utilities while building this page. Is it the same as a helper class?

  :)

  1

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @Yannotron Container size: you set your width to 300px in mobile design. On a viewport with width smaller than 300px, the content will overflow the screen and user will have to scroll horizontally to to read the text. In this project this is just visual, like I said, but it's a good thing to remember to check. You can learn more about this issue here. I would personally change width to max-width :)

  Rounder corners - if you set border-radius on the container and not add overflow:hidden, the children (without rounded corners) will overflow and cover it up. I found a nice example of this here

  • helper classes - yes, in CSS I think those names are used interchangeably (I just had to google this to make sure :D)

  1
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 3 years ago

  Congrats on submitting your first solution, Yann! I hope you enjoyed the challenge. Here's some feedback on your solution:

  • You've currently got multiple h1 elements. Although this is valid HTML it's generally still considered a bad practice, as it can cause accessibility issues with the content hierarchy. As this challenge is for a component that would typically be a small part of a larger page I'd say h2 headings would be good options here.
  • You could imagine that the "Learn More" call-to-actions would link through to other pages on a real site. So I'd go with anchor elements here instead of buttons.
  • Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.

  I hope that's helpful. Keep up the great work!

  1

  ---

  

  Yann•75

  @YannotronPosted over 3 years ago

  Thanks for the feedback. H1s: Absolutely, I overlooked this entirely. Buttons: Again, very good point, I'll modify this. IDs: I learned about CSS utilities during while building this page. I'll use them instead!

  :)

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 3 years ago

  @Yannotron you're welcome!

  0