Skip to content
OverviewSolutions
29
Comments
4

Sinka László

@dlxzeus777Hungary470 points

Hello everyone, I'm 21 years old and I've been learning web development for a while now. Thanks to frontend mentor I've learned a lot just by building projects from scratch. I'm also doing The Web Developer Bootcamp 2022 by Colt Steele on Udemy.

I’m currently learning...

React

Latest solutions

View more solutions

Latest comments

  • Sinka László•470
    @dlxzeus777

    Hey Treasure, Nice solution however I have some tips for you!

    Instead of grid-template-columns: repeat(5,1fr) in your social-media-1 class change the number 5 to 4 because its a 4 column grid. The parent div with a social-media class should have display:grid; justify-items: center; so it gets centered.

    In your div with a class of social-media-dashboard-2 you should delete every children's grid-column and add this display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(2,1fr);, so if you want to make it responsive all you have to do is change the grid-template-columns or the grid-template-rows.

  • Sinka László•470
    @dlxzeus777

    Hey C Lewis nice looking solution, however you could've just used a for of loop to loop through the buttons and get its value and apply it to the innertext.

    Like this for example:

    for(let btn of buttons) { btn.addEventListener('click', (e) => { const target = e.target.value; console.log(target); selectedNumber.innerText = target; }) }

  • Sinka László•470
    @dlxzeus777

    Hello!

    Your solution looks awesome!

    I think you should give the body the height:100vh; and the background: rgba(10, 12, 28, 1); instead of the container class because on smaller screens the content just gets cut off.

    Other than that it looks good, nice work!

    Marked as helpful
  • Sinka László•470
    @dlxzeus777

    Any idea on how can I solve the hover state on the image?