Loopstudios coding challenge

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

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

@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

@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...