3-col-preview-card-component with flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  This looks great!

  I would use a transparent border on those buttons so the size doesn't increase when clicked/hovered.

  Also consider adding a transition to the buttons and clear focus-visible styles ☺

  Marked as helpful

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Looking at the html, I recommend

  • changing the font links in the head to links not imports, and doing all fonts in one link. Google fonts gives you the links you need, including a preconnect one.
  • fixing the formatting/indentation on html. That will become so important as you progress. It's hard to read at the moment because of elements starting and ending on the same lines in some places.
  • changing all the buttons to anchor tags. 'learn more' implies it's taking you somewhere - navigation. So we have to use the element for navigation.

  I hope that all makes sense

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  In css, I would

  • definitely change font size to rem (never px)
  • maybe use reusable classes on the buttons
  • use mix-blend-mode screen on all buttons to create a cutout text effect to make them the color of their background instead. Then you could have the same hover effect for all too if you wanted, using something like opacity or just changing the background color.
  • maybe start the desktop styles earlier

  0

  

  ellienndea•130

  @ellienndeaPosted over 3 years ago

  @grace-snow Thank you for your many tips! 🥰 Again so much to learn for me😅 What do you mean by "clear focus-visible styles"? The style guide said font-size: 15px. Would you recommend to change it to rem? Maybe 1rem because it equals 16px? Or 0.9rem? I will google mix-blend-mode screen and reusable classes 😉 Thank you! 🤩

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @ellienndea yes always convert px to rem, especially with font sizes. You work it out by doing desired-font-size/16, so in this case it would be 0.9375rem.

  If you use scss you have have a reusable function that takes in pixels and returns rem to the css, that's quite handy.

  By clear focus-visible styles, I mean make it really obvious to keyboard users where focus is as you tab around the page. You can do this with :focus but that affects all focus, including clicks on buttons and inputs etc. There is a new css property that's worth implementing now called :focus-visible which allows you to styles the focus with keyboard differently, making it really obvious. Eg you might have

  a:focus-visible {
     outline: solid 0.25rem orange;
     outline-offset: 0.25rem;
  }
  

  (or similar effect using box-shadow for curved buttons)

  0

  

  ellienndea•130

  @ellienndeaPosted over 3 years ago

  @grace-snow Thank you for the explanation and the tips! I changed it. 😊

  0
• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Ellienndea! 👋

  Congrats on finishing another challenge! 🎉 Your solution looks very good and also responds well. Here's my few tips:

  • To make your solution a bit more responsive set a max-width on .card to 550px for example and also box-sizing: border-box. What border-box does is that your padding get pushed in your container and don't affect width of that container. Doing it that way your container will be stretching untill it achieve 550px width. I would suggest you to read about boxmodel. Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items.

  Good luck with that, have fun coding! 💪

  Marked as helpful

  0

  ---

  

  ellienndea•130

  @ellienndeaPosted over 3 years ago

  @tediko Thank you so much for the tips and the explanation! 😀

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Looks like you are making great progress just need to work on the hover state on the buttons and you will have a very successful challenge completed

  0

  ---

  

  ellienndea•130

  @ellienndeaPosted over 3 years ago

  @palgramming Thank you! I totally forgot the hover state 😲😬.

  0

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @ellienndea no problem so many things to watch for on these projects

  0