Skip to content
Submitted 29 days ago

Four cards project using Flexbox

#sass/scss
id-nynt•80
@id-nynt
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This time I learned to use Sass. The variables and functions are convenient.

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

I had some trouble making the layout for the footer at the bottom while keeping the main part vertically central. After I looked it up, I used flex-grown: 1 for the main part and it worked.

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

I used a lot of layers in both HTML and CSS. Is there a better solution to optimize or minimize those layers or elements? Any other suggestions are appreciated. Thanks a lot!

Community feedback

  • P
    Matthef•170
    @MatFrat95Posted 27 days ago

    Hey, page looks very good, it's responsive, works very well in both moblie and desktop view. About your problems with having content verticaly centered, try to insert all of your content in .container class. I usualy create .container { max-width: 80%; margin: 0 auto; } That allows me to center all of my content. You can try it.

    I also noticed, thay You used h1 and h2 innstead of just one header, Try to use span property on bold part of header with created additional class to change the size and boldness of part of header.

    I have the same issue, we both should use more em, rem, max, min, clamp units to make our webstes more responsive. I'll recommend you Kevin Powell YT chanell, he explain everything very easily.

    I hope you enjoy your path of Frontend dev. Good luck and have fun!

    Marked as helpful
    0
    id-nynt•80
    @id-nyntPosted 25 days ago

    @MatFrat95 Thank you so much for your recommendations! As a newbie, I really appreciate all your kind suggestions and I will try to improve my project! Have a great journey, too!

    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