Ping single column page using SVG images/filters, flexbox, & JS events

Solution retrospective
I used this project as an opportunity to start getting in the habit of writing comments on my code to distinguish which parts of my code served which functions, and make it all-around easier to read. I've only annotated my CSS so far, but will dabble in the future with doing so on my HTML/JS as well.
I ran into some difficulty with styling the SVG images correctly. Initially I had the images just on their own, but found that once I added borders onto images, the borders took the same color filter that I'd applied to the images themselves. I then tried wrapping each image in a <div> but found the images would disappear once I tried to style them. Being honest, I don't remember what I tried that ended up working, but it worked and I'm overall satisfied with the final product.
I found I was unsure about whether to add alt text for the main image on the page, and ended up doing it anyway just to be on the safe side. Would this image be considered more decorative or should it receive alt text? For that matter, should I have added alt text on my share buttons?
Thanks all :)
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Galen White's solution.
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