Skip to content
Submitted 9 days ago

CSS grid for centering the main div, "hover" pseudoselector,

AJsdevs•20
@AJsdevs
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

While working on this, I learned for the first time about Rules in CSS, specifically, I had to use the font-face rule to define the font families I used in the website. It gives me the idea that CSS Rules are used to make custom values to specific properties, so I will do more research to see it's uses. Also I learned several other ways to centre a div.

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

The first challenge I encountered was trying to centre the main light-grey div on the viewport; I knew initially that I could use flexbox to do this, but it wasn't working for some reason. To find other solutions I consulted Youtube.

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

I would like help with the button layout, because I don't believe I went around this in the most efficient way.

Community feedback

  • Adriano•38,080
    @AdrianoEscarabotePosted 8 days ago

    Hi AJsdevs, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:

    You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader.

    You can read more in MDN.

    The rest is excellent.

    I hope you find it useful. 👍

    1
    AJsdevs•20
    @AJsdevsPosted 7 days ago

    @AdrianoEscarabote i understand what you mean. So what would you suggest I use for separating the buttons to occupy individual rows or lines? I initially made each button have a block display, and I remember it worked in separating them the way i wanted but i decided to use the br instead. Is changing the display to block a better way of solving the problem? which others will you suggest?

    0
  • Gaurav Shukla•0
    @heygauravshuklaPosted 9 days ago

    I recommend utilizing anchor tags in place of input buttons for improved functionality and accessibility.

    1
    AJsdevs•20
    @AJsdevsPosted 9 days ago

    @heygauravshukla Okay that makes sense, thank you!

    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