Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
2

Stefano

@StefanoDeCapitaniLecco, ITALY155 points

After 2019 I decided to leave my music studies. I started coding on January this year. At first I got into Java and attended a course by Oracle University but now that I'm going to begin a course for Web Developers I want to learn some HTML, CSS and Javascript skills to start on the right foot.

I’m currently learning...

-HTML -CSS -Javascript

Latest solutions

  • Responsive page with almost no media queries - Ping coming soon page


    Stefano•155
    Submitted almost 4 years ago

    0 comments
  • After some holidays I'm back on track! - Single price grid component


    Stefano•155
    Submitted almost 4 years ago

    0 comments
  • Intro component with sign up form - HTML CSS JS


    Stefano•155
    Submitted almost 4 years ago

    1 comment
  • ❗Please provide a valid title❗


    Stefano•155
    Submitted almost 4 years ago

    0 comments
  • Having some fun with cards - Four card feature section - HTML & CSS


    Stefano•155
    Submitted almost 4 years ago

    0 comments
  • Some clamp() and animations for you! - Article preview - HTML, CSS, JS


    Stefano•155
    Submitted almost 4 years ago

    4 comments
View more solutions

Latest comments

  • Midnith•120
    @Midnith
    Submitted almost 4 years ago

    3-column-preview-card-component-main

    2
    Stefano•155
    @StefanoDeCapitani
    Posted almost 4 years ago

    Hey @midnith, welcome in the community! Great work :)

    I suggest you to try using display: flex-box on the container instead of inline-block on the cards, it will make it so much easier to position the items where you want inside a container and to avoid at the start many responsiveness issues you could run into.

    In case you don't know where to start, here you can find some interesting stuff:

    • An overview to get some context - Youtube - Kevin Powell
    • [A complete guide to Flex-box - CSS-Tricks] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

    I hope these resources are as useful to you as they have been to me!

    Happy coding ;)

    Marked as helpful
  • darryncodes•6,350
    @darryncodes
    Submitted almost 4 years ago

    3-column preview card using HTML, SCSS, FlexBox & Grid

    #bem#sass/scss
    1
    Stefano•155
    @StefanoDeCapitani
    Posted almost 4 years ago

    Great work, well done @darryncodes!

    I have only a suggestion that might be useful. In order to place the container in the center of the page you can do something like this:

    .body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }

    I'm not sure this is a best practice but I find this solution handier than trying different margin sizes till the wanted result is obtained. Hope it'll save you some time in the future ;) What do you think about it?

    Happy coding!

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub