Design comparison
Solution retrospective
So, the instructions clearly stated HTML, CSS, and JavaScript needed to be used to complete this assignment, but I was able to complete it with just CSS and HTML. I do notice there are issues with adjusting the size of the tooltip to the container that could be addressed with JavaScript that I simply have not thought of yet. I'll revisit this assignment and rebuild it by trying to use JavaScript and see if that will help fix these issues.
What challenges did you encounter, and how did you overcome them?I had issues getting the tooltip to resize and present at the bottom of the container rather than over the share button, but used absolute positioning to get the top, left, and right of the tooltip to stretch across the width of the container, and use z-index to layer the container, tooltip, and share button to be visible/hidden as needed.
What specific areas of your project would you like help with?All help is welcome but as previously mentioned, I built this without JavaScript and therefore did not complete it according to the directions. Any guidance on how to create a JavaScript-featured solution would be greatly appreciated.
Community feedback
- @srijanssPosted 6 months ago
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
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord