Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
3

Matheu46

@Matheu46120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • mobile first


    Matheu46•120
    Submitted about 2 years ago

    0 comments
  • order summary


    Matheu46•120
    Submitted about 2 years ago

    0 comments
  • using tailwindCSS for the layout

    #tailwind-css

    Matheu46•120
    Submitted over 2 years ago

    0 comments
  • using tailwind css

    #tailwind-css

    Matheu46•120
    Submitted over 2 years ago

    0 comments
  • rating component


    Matheu46•120
    Submitted over 2 years ago

    0 comments
  • solution using one breakpoint


    Matheu46•120
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • magv01•40
    @magv01
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    First time working from Figma and I think I got this pretty close to the design file . I started off using root styling also for the first time.

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

    The padding and margin to get it matching the design file as I couldn't see that the exact sizes are in the style guide. I created small, medium, large root styles and calculated 320px wide container against the 288px image size to find the padding size.

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

    would like feedback on html structure and css decisions..what could I improve also did I miss anything from the figma design file?

    QR-Code Component -Flex

    2
    Matheu46•120
    @Matheu46
    Posted over 1 year ago

    wow, it's almost perfect!

    The only thing different from design that I see is the shadow. In the design there is more blur and maybe offset-y needs a little adjust.

  • LynnArsa•20
    @LynnArsa
    Submitted over 2 years ago

    Responsive Advice App Generator using TailwindCSS

    #tailwind-css
    3
    Matheu46•120
    @Matheu46
    Posted over 2 years ago

    an easy way to turn your javascript code simpler is call the function once, so you don't have to make fetch two times in the code

    function getAdvice() {
      fetch("https://api.adviceslip.com/advice")
        .then((response) => response.json())
        .then((data) => {
          console.log(data)
          document.getElementById("advice-id").innerHTML = "A D V I C E  # " + data.slip.id;
          document.getElementById("advice-word").innerHTML = data.slip.advice;
        })
     }
     getAdvice()
    

    the code will generate a phrase when the website is opened, just like your first fetch

    Marked as helpful
  • Yuzuki9•20
    @Yuzuki9
    Submitted over 2 years ago

    3 column cards

    1
    Matheu46•120
    @Matheu46
    Posted over 2 years ago

    Great solution! But look at the border radius of the rectangles, you can set different values ​​of the border radius for the corners

    Ex.: border-radius: 10px 40px 40px 10px; which reffer to top-left, top-right, bottom-right and bottom-left respectively

    Marked as helpful

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

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