HTML Markup, Flexbox, CSS Grid, Mobile-first workflow, JS, Sass

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hello, Lidia! 👋

  Nice work on this challenge! 🙌 I like the hover state you added to the navigation links in your solution! 😀

  A few things I suggest are,

  • Giving the hero section a fixed height (so that its size remains more consistent across screen sizes and is never too high or too short).
  • Adding background-size: cover to the background image in the hero section of the page to ensure that it is clipped (not stretched or squeezed) when the size of the its container changes.
  • It looks like you set a fixed width on the cards in the "Creations" section. You might want to consider letting them share the width of their container or using CSS grid (or a media query) to adjust their layout when necessary to avoid those overflow issues in that section.
  • Taking a look at your solution report and trying to clear up some of the errors that are there. 😉

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  2
• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Lidia! 👋

  Good job on this one! 🎉 Your solution responds well and overall looks good. In addition to great CaptKraken and APG feedback here's my suggestions:

  • Add :focus pseudo class to interactive elements like anchors, buttons etc. Use outline property to make your website more accessible to keyboard users. Focusable elements like anchor, buttons or inputs they have applied default :focus pseudo class with outline property. These default styles are subtle and hardly visible tho. Furthermore every browser has a slightly different default style for the outline, so you probably want to change the default style. Read more about why we should change focus styles.
  • Change the alt attributes for the .logo images, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.

  Good luck with that, have fun coding! 💪

  Marked as helpful

  1
• 

  Kim Song•205

  @CaptKrakenPosted over 3 years ago

  i think it's the position absolute you set on the desktop gallery version. you should just have a container class to wrap both your .hero__container and .gallery__container. set max-width there. it should be easier to center.

  i see that you set exact width for the img in px, too. that would also causes problems.

  Marked as helpful

  1