Skip to content
OverviewSolutions
8
Comments
7
TheGDneo
@GD-neo

All solutions

  • Submitted about 1 month ago

    Bento Grid Challenge, Responsive Design, Desktop-First

    • HTML
    • CSS
    1

    Would there have been a way to do this challenge with just one single grid?

    I also added a small hover effect to the cards, so that they translate(-10px,-10px) and a box-shadow shows when you over over it. How could I slow down these effects so that its a bit easier on the eyes?

  • Submitted 7 months ago

    Testimonials Grid Section. CSS Grid + Flex Box. @media 1200px

    • HTML
    • CSS
    1
    • Any suggestions related to my approach, readability and structure or any other aspects you see that I could approve on or think I might be better of doing in the future are welcome. :D Thaks
  • Submitted 7 months ago

    Four Card Feature Section. Mobile First. Flex Box. @media at 800px.

    • HTML
    • CSS
    1
    • Any feedback and ideas for improvement are welcome - really helps a lot :D
  • Submitted 7 months ago

    Product Preview Card. Mobile First Approach. @media at 700px.

    • HTML
    • CSS
    2
    • Any advice on better understanding 'em' , 'rem' and when to use which one would be appreciated as well as any improvements related to structure of my code
  • Submitted 7 months ago

    Recipe Page Challenge. Desktop First Approach.

    • HTML
    • CSS
    1

    Any feedback and ideas for improvement are appreciated.

  • Submitted 7 months ago

    Social Links Profile Using Flex Box. Desktop First Approach.

    • HTML
    • CSS
    1

    Is there a way I could have kept justify-content: space-between and then adjusted the margins? My original thought was to use the justify-content: space-between property to ensure that the picture was at the top of the card and the actual links (I grouped these together in a div) at the bottom and to then adjust the other spaces. I ended up playing around with margin-top set to negative values which seemed odd which is why I ended up the the approach I explained above.

    -Basic HTML layout was

    -Basic CSS

    .linksProfile { 
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    padding: 40px 30px 39px 30px;
}

    I ended up commenting out justify-content because that seemed to be what made it impossible for me to get the remaining spaces between the elements right. Then I started adding margin-top to the individual elements until I came close to the layout.

  • Submitted 8 months ago

    Blog Preview Challenge Using Flex Box. 2 Breakpoints (500px and 365px)

    • HTML
    • CSS
    1

    None in specific - but any suggestions are welcome.

  • Submitted 8 months ago

    First Newbie Challenge With HTML and CSS Only. Desktop First Approach.

    • HTML
    • CSS
    1

    I still struggle to fully understand how to use box-shadow. In my solution I used the syntax:

    box-shadow: 0px 4px 16px 0.1px var(--project-grayishblue);

    While I understand that the first two inputs move the shadow on the x/y axis, the third and fourth input I don't fully understand.

    I would have liked to adjust the shadow so that there is less on the sides and the opacity is even lower so that the shadow would be more subtle.

    In the attempted solution I did not access the Figma files.