Article preview component
Solution retrospective
I'm proud of using javascript to add some interactivity although it was small part but it is just the beginning.
What challenges did you encounter, and how did you overcome them?I had two main challenges The first was changing the color of share svg icon when hovered. The color of share icon was dark but when hovered it changed to white according to design but i couldn't change its color, i only changed the background color.
The second was the tooltip for mobile had share icon but for desktop didn't have. How to ensure that in efficient way? I had to place them twice one outside the tooltip and another inside and on change display to none of the one inside tooltip on desktop version
What specific areas of your project would you like help with?Any constructive comments will be much appreciated
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@dar-ju
Hi Jackson!
You're doing a great job!
About the icon color.
It's important to remember that if you connect svg via img or via background-image in CSS, you won't be able to change the icon properties.
To be able to change the svg properties, one option is to paste the svg code directly into the html. Open the image in the browser, press ctrl+u, copy the svg code, paste it into the html, and delete the fill="..." parameter in the svg code. You can add a class to the icon like <svg class="icon" width="15" ... Then, in CSS, change the icon color as follows:
.icon path { fill: #000; }About the share link - you did everything correctly.
I also looked at the rest of the code:
- it's not necessary to use the figure tag if you're not going to make captions for the images. In this case, you can just use img
- you can't use 2 H1 tags on one page, it's an error. For the name, you can use span
- if the page contains a date or time somewhere, you need to use the <time> tag. See how to use it correctly
- this card should rather be wrapped in the article tag. Read here how and when to use the section and article tags
Search engines and readers are guided by tags, so they need to be semantically correct.
- if background images and icons (not content) are connected via img in html, then you don't need to fill alt
- in css, try not to set a fixed height for blocks, especially the body
- it's better to wrap the share button in an <a> tag, otherwise it's impossible to click on the button using the keyboard
Otherwise, everything is great, good luck with your development!
Marked as helpful - @kunal90803
Great Work @Jackson-zablon15 Desktop version is looking good and perfect. But in mobile version on clicking share its position is changed accordingly to the previous position so try to keep the position of share button intact and also its seems u just overlapping it on previous part.. which is good but u must cover up the overlapped part too by increasing the height of this div.
<div class="tooltip-container">Other than that u did a great job.. best of luck for future.
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