Design comparison
Solution retrospective
I am proud of getting my JavaScript to work properly. I think that was the easiest part of the project for me to complete. I have been busy recently so this was the first project I have worked on in a while, it took me longer than I would have liked to get it done.
What challenges did you encounter, and how did you overcome them?One challenge I encountered was developing the mobile view for the share menu. Once I had got the desktop view the way I wanted it to be, I had trouble getting the mobile view to appear the way I wanted it to as well; The width was of the menu was bound to the width of the share button. I eventually was able to fix this issue.
What specific areas of your project would you like help with?There are a few things I had trouble with as I worked through this project. Firstly, I was not able to get the svg logos to appear how they were in the given design files - mine are rounded and the given are square. I have not had the time to be consistent with my work on these projects, and so after a break this is the first one I have come back to and my work feels and looks a little more unpolished than projects I have taken on in the past. There are many small improvements that can be made, and if you can point them out to me I will do my best to fix them as I go along.
Community feedback
- @Alex-Archer-IPosted 4 months ago
Hey, congrats with your new challenge, looks cool =)
A couple of suggestions if you don't mind =) I didn't recommend you to use percentage for width of the container. There are a tons of different screen sizes now and you just can't be sure that your card looks good on the 50% of all them (I can't attach a screen here, but try to look at the various screen sizes through dev console).
Than I suggest you to use hover effect instead of active. Active effect works only in the time of click which is just a milliseconds, so guess it's a bit confusing for the user. And speaking of the UX - it'll better to apply
cursor: pointeronly to the links, not to all "share" section.And a bit of semantic tips. I can understand why you decided to use
input type="image"for the button, but the purpose of such inputs is to submit data from the form. Thebuttonelement more semantically fits here cos they used for interactivity. Also a group of links is list =)It's cool how you handle the appearance of the little arrow on the bottom of the links block, but maybe it will a bit easier to control it's display with media queries? But that not a big deal, actually.
I hope it could be helpful. You work is really neat, keep doing =)
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