All solutions

Any suggestions about UX improvements appreciated. I know the website would benefit from loading animations.

Used column layout for styling gallery page.

Some general workflow tips would be greatly appreciated!

• the background image part was the hardest and it burnt me out. Decided to drop it off for now. All I was doing is guessing some background-position values, it was not consistent. I don't know why bg-intro.svg was scaled so much in desktop layout and wasn't optimized for the design in the first place
• didn't add dark gradient background on mobile menu, since I was burnt out
• the font sizing felt very fixed even when using rems, the sizes were very specific in the design and I had to set font-size on many elements across different layouts just for small changes. Maybe it would be better if I'd used clamp()

Overall I still enjoyed this challenge and I'm happy how it looks, didn't go over Sass though and it might be little messy, just wanted to submit and get done with it to be honest, even though I always like make everything as clean as possible.

Once project size grows its hard to revisit old styles and make improvements, even when using 7 in 1 rule (I think that's what it's called)

This was interesting challenge with very small details which made it kind of difficult. Used Sass for the first time and even though it helped organize css a bit, I feel like it's still messy. Took about 2 days.

I'm not sure why datetime format is incorrect in HTML report.

Please let me know if you have any suggestions or find something off!

Also, I bought pro membership and the design files are awesome, it made development so much easier, totally worth it.

This was the most challenging one I've taken on. Please let me know if there are any inconsistencies, any feedback is appreciated!

Have I used semantic HTML elements appropriately?

Any feedback is appreciated.

• Is it okay to set static font size like 18px and then use ems to set font sizes? Or is it better to use 1 rem on body and scale other elements appropriately?
• Should I use SASS to better manage my CSS...? Or is it okay for these early stages?
• I used section element on 4 image gallery at the bottom of the page without the heading, Is it okay? There was no heading in the design and the gallery felt it was a separate section of the site. Should I use div?

Edit: Changed section to div.

I tried to use semantic HTML, organized CSS as much as possible (although it was still hard to manage).

Had some issues with mobile menu popping up when resizing back to the mobile layout. The styles I set via Javascript using style.display are directly put in HTML as inline styles, so they were prioritized over media queries and that caused some weirdness.

I fixed it by removing style attribute in HTML so that my media queries could take over.

Edit: realized I could have toggled .visible and .hidden classes when clicking the menu icon.

window.addEventListener('resize', _ => {
  if (window.innerWidth >= 768) {
    menu.removeAttribute('style')
  }
})

I would appreciate if you could provide any type of feedback. Maybe there's some visual bugs on the site, or I didn't use the best practice somewhere.

I would like to know if I could done better in terms of semantic HTML or class names. I know it's a small component but still. Also why did we have 2 images? They didn't seem that different in size and I used the one with smaller size.

Chose to do image overlay with HTML img tag and extra .overlay div.

Lastly, have I used some bad practices in CSS?