RayProud
commented
1 month ago - Top right menu (list of pages)
- The sandwich button doesn’t work on mobile
- Menu
- A menu element should not contain p elements — read up on it on MDN
- Buttons should not be presented by any other elements than
- “menu-filter” don’t have “cursor: pointer” on hover
- They also don’t have a hover state (when one hover over the element and its colour changes a bit indicating that the element is clickable)
- toggleBox can be styled without JavaScript with the pseudo-class “:checked” on the input the label is connected to
- Its circle should ideally be a div. One usually uses pseudo-elements for it (:after).
- If it’s needed to use a div, don’t forget to add an aria-hidden property on the element
- Same with the .circle — you can use pseudo-class “:checked” and avoid using JavaScript
- On tablet size screens “slider-text” is too close to the toggle
- Its circle should ideally be a div. One usually uses pseudo-elements for it (:after).
- Cards
- “image-avatar-wrapper-purple” should not contain an image so that the network is not over flooded with unnecessary requests. Rendering images also takes some time thus there might be “blinking”. This styling can be done with CSS instead.
- “attendee-number” is not centred properly. It should be relative to the “image-avatar-wrapper-purple” element
- “card-text” is truncated everywhere. This makes the content of the cards useless for users. Must be a bug.
- JavaScript
- Event listeners on growth, analytics, thirdParty and etc look all the same. There’s a way to write this code only once that would apply to all of those categories