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

P

@WouterTPeeters

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?

Need to spend more time on the media query's.

What challenges did you encounter, and how did you overcome them?

Struggled with the link hover's, got the background to change on the hover but couldnt get the text to go from white to black. After watching some guides i managed to figure it out.

What specific areas of your project would you like help with?

What would you have done differently?

Community feedback

Mirjax2000 680

@Mirjax2000

Posted

Hi, i watched yor code.

I have question, why are you flexing "a" element in the links-menu li ?

also your naming the variables in your root. You cannot name variable --green. What happen if you or contractor decide that you must change the color of hover efect to light blue? after that your variable --green has light blue value. name it for example --hover-effect.

try to not use IDs. IDs are for forms and javascript targeting. Use classes if it is possible. IDs has also higher specificity. It can make problems with breakpoints if declare some value in madiaqueri and insert different way to target that element.

dont use fixed sizes, use em,rem units or percentages, or dwh, dwv,wh,wv units ".links-menu li a" istead of fixed size 304px you can use display:block. a element will stretch an keep width with his parent. You dont need to use flexbox there to make text in the center. If text align isnt working insert it higher to the parrent.

dont use fixed values and try to be dynamic and responsive.

next if you use :hover pseudoelement somwhere use :focus as well, try it with your keyboard, if you press tabelator you control your site with keyboard only thanks to that.

a :hover, a :focus {do something cool};

mediaqueries: @media screen and (max-width: 375px{};

yor mediaqueries has no room to be activated. You need higher value. for example 680px. It is too small.

you can also use @media screen and (min-width: 375px){} min-width but this is using when you making mobile first coding. It revert breakpoints. from lower to higher resolution.

I hope i helped you. I can see you have lot of knowledge already, keep practise. I do as well.

see ya

Marked as helpful

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