P
Srijan Manandhar• 450
@srijanss
Posted
You have done really great job to complete this task without the JS. I was also thinking about using just CSS to handle the popups. But used JS just to try some querySelectors and event handling.
- You html document should have been more semantically correct. <section> element should have heading element as the child. <picture> element is more useful when you've multiple images for different screen sizes and you want the browser to select the images based on screen size. But in this case there is only one image for card-header. So, simple <img> element would've been sufficient.
- You have left the alt tag empty for all the images. This will create some accessibility issue
- You've missed some CSS styles for the active state of the design. Like the share icon styles changes in active state. To make it work I directly used <svg> image in html and changed its style using JS events like click, keydown and touchstart. I think it can also be done directly in CSS. I will try it next time.
Congrats for completing the challenge.
0
