Coffeeroasters with VueJs and flexbox

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Joran Minjon! 👋 Congrats on finishing another challenge! Your solution looks very good and also responds well. Here's my few tips:

  • I'd personally add some max-width on the container and center it horizontally so the content of the page doesn't look too stretched on large screens.
  • Change the alt attributes for the .coffee__image, .usp__icon, 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. Headings below these images describe content, no need to keep those alt attributes.
  • I believe your footer social icons are lacking anchor tags.
  • You can fill your svg using css property which is named exactly the same. All you have to do is give class to svg/path that you want to style.
  • 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.

  Good luck with that, have fun coding! 💪

  2

  ---

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  I have not tried this yet but it looks promising for the SVG issues https://css-tricks.com/svg-loader-a-different-way-to-work-with-external-svg/

  also so far your challenge looks like you have a good start going but on the About Us page the margins around the locations might need some work at desktop size

  1

  

  Joran Minjon•610

  @DrKlonkPosted over 3 years ago

  @tediko Thank you for your thorough reply!

  SVGs

  On the fill elements: I found that that only works on inline svg elements. This can make the html quite verbose, quite rapidly. Inside of an <img> tag, the fill property does not work.

  I've implemented the option that @palgramming suggested and it seems to work for external icons, but not for local ones.

  Other points

  Thanks for the pointers! I think I fixed it all.

  I've fixed the first with a sticky (instead of fixed) menu, and a max-width and margin: 0 auto on the container.

  1