Hi Lesley
Viewing on mobile it all looks great (good job there!), but there are lots of foundational html, css and accessibility best practices (or valid practices) that aren't yet right on this.
I recommend doing some of the smaller ui component challenges to nail those foundations first before doing more challenges like this.
In particular
- what figure element is/isn't used for
- valid html for links, buttons and lists
- labels on form elements
- focus states for interactive elements
- how to code accessible dropdowns
- alt text. When it should be empty and why; what it should say on a logo
- how to avoid repeating html markup for things like navigation
- how to have consistent alignment on the left and right of a page as you scroll down (content aligned vertically in all sections)
- css specificity from nesting and IDs vs classes; and why IDs are really for navigation and aria not styling
- how to have scalable styling using rem units instead of pixels
- why base font sizing in pixels could cause problems
- differences between em and rem (not necessarily an issue here at all in your css, but make sure you understand that difference)
That all said, you've done some solid work on here so far, and the menu animation is beautiful! It mostly needs html validity and accessibility addressing.
Good luck with it
@LesleyWesley
Posted
@grace-snow Thank you for the detailed feedback! This project was actually way more difficult than I expected it to be, so I'm definitely going to work on some of the smaller projects before moving on to more like this!
@LesleyWesley it's always harder than it looks and takes longer than expected, story of my life.
