Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social links profile using flexbox and min

irene 120

@irene-panis

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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

P

@cdanderson76

Posted

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

@olivervillalobos

Posted

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 GitHub
Discord logo

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