P
Matt Pahuta• 540
@MattPahuta
Posted
Hey there. Great job on this challenge. You've matched the design comp really well and have incorporated some good semantic elements and modern, responsive styles. Your JS code is straightforward and efficient. You also interpreted the ui pattern here correctly as a tab interface. So good on that. I completely failed to recognize that myself when I worked on this project.
I remember having trouble getting the overlapping cards to behave as well and just ended up using various padding values, not unlike your solution. I'm sure there's a more elegant way to achieve the effect but It's beyond me at this point.
All that said, I did flag a few small things for you:
- The alt description on the user's avatar should be more descriptive and shouldn't include words like 'image' or 'picture' because they are already an image role.
- I believe the card icons here are decorative so the alt attributes can be empty.
- You're skipping some heading levels, moving from an h2 to an h4 and back to h2.
- The ellipse images are meant to be buttons. I'm guessing in a real-world app they'd open up a modal or another menu of some kind. It's not a detail I incorporated in my solution either but it's on the list for a future revision item.
- You still have the hard-coded data in your index.html file, so you should be able to delete that since you're populating values via JavaScript.
- For the JS, your 'work' variable isn't being used for anything I can see and can be deleted.
Again, great work on the challenge. Cheers!
0
