Loopstudios coding challenge

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted almost 4 years ago

  Hi Vincenzo,

  Viewing on mobile, the menu is not opening, the right border of the white box around the heading is hitting the right of the screen and I think you've forgotten the dark overlays on those image cards to make the writing readable(?)

  Take some time to fix these and your report errors if you can

  All the best

  1

  ---

  

  T

  Grace•31,090

  @grace-snowPosted almost 4 years ago

  I've only had a very quick look at code but notice a few suggestions straight away:

  • all these links would be for this site, so you wouldn't want them opening in new windows
  • the nav trigger needs to be an interactive element like a button or anchor tag with the image inside it. Don't listen for click events on non-clickable elements whenever possible
  • you're injecting a style tag on the page for main, navigation. You don't wanna be adding lots of style tags if possible, just compile to one stylesheet (unless that's how the tools you're using are compiling the styles, by pulling these blocks out of each component?)
  • that style block has unnecessary repeating styles in it at the moment like display flex. Remove any repetition in media queries

  I hope this is helpful

  1

  

  Vincenzo Marcovecchio•1,085

  @VincenzoMarcovecchioPosted almost 4 years ago

  Hi Grace,

  thank you for your answer, yeah I noticed the white border of the h1 I need to fix that, dark overlays I tried to apply filter directly on the image and didn't really find anything, wow did I put the target attribute on those links :), about the image logo I should have used a button yes and for the inline styles I saw that I was just playing around with Next.js but no good.

  Great suggestions really I appreciate your help perhaps I noticed up here all the widths and heights I gave to my images are resulting in errors while on my google light house are not, I think :). Anyway it's all good to know, I hope to have some time in the future to do another challenge

  0

  

  T

  Grace•31,090

  @grace-snowPosted almost 4 years ago

  @vinceoldmark you can put width 100% on images via css, but the width and height attributes on the element will only accept pixels and should have no unit on them. So width="100" would mean a default width on an image of 100px

  0

  

  Vincenzo Marcovecchio•1,085

  @VincenzoMarcovecchioPosted almost 4 years ago

  @grace-snow I tried out of nonsense...for what I can remember if you don't specify width and height on your Images your lighthouse score will be affected negatively, am I right? so...

  0