Design comparison
Solution retrospective
most proud of utilizing min, a css function i haven't really used before
What challenges did you encounter, and how did you overcome them?putting anchor tags within list items while making the whole list item clickable - had to look this up. also read up on min() because i wanted the card to be slightly wider but be able to shrink on mobile.
What specific areas of your project would you like help with?i styled the list items to look like buttons then put anchor tags inside them w/ display block and height/width 100% to make them clickable; im pretty sure this is better than using buttons but lmk if i'm wrong and also if the usage of the list was necessary at all
Community feedback
- @cdanderson76Posted 6 months ago
Looking good! I'm not so sure about whether or not you should use lists to crank out those links. One thing you can't go wrong doing, is right-clicking on the page of your app, select 'Inspect', and select 'Lighthouse' (it's at the top of the dev tools menu where you find 'Elements', 'Console', 'Recorder', etc.). Once you've clicked on Lighthouse, it will give you an option to click on a button and analyze your page for accessibility. If something is weird with the way that you've written the HTML, it's sure to give you a clue on what to change! :) NOTE: this is in the Chrome browser...
Also, in reference to using anchor tags as opposed to the buttons, you've laid it out fantastic. If you are just clicking on something to navigate to another part of a page, or a different page for that matter, then you should use an anchor tag. On the other hand, if you click on something, and it does something like renders things to the page, initiates a calculation, etc., then you should use a button! Hope this helps! Great job on the project!
0 - @olivervillalobosPosted 6 months ago
Nice job!!!
The only thing I suggest is to add a minimum width. If you keep the default font size, which is 16px on most browsers, it's totally fine. However, if you modify it, for example, to 32px for the browser's font size, when you inspect the code and reduce the width size, you will see a bunch of boxes shrink and behave inappropriately.
0
Please log in to post a comment
Log in with GitHubJoin 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