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

Jonathas Tavares

@jonathasltavaresFortaleza, CE130 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

  • newsletter form


    Jonathas Tavares•130
    Submitted about 2 months ago

    1 comment
  • article preview


    Jonathas Tavares•130
    Submitted about 2 months ago

    1 comment
  • testimonials grid


    Jonathas Tavares•130
    Submitted 2 months ago

    1 comment
  • fourCardFeatureSection


    Jonathas Tavares•130
    Submitted 2 months ago

    1 comment
  • productViewCard


    Jonathas Tavares•130
    Submitted 2 months ago

    1 comment
  • recipe page main


    Jonathas Tavares•130
    Submitted 2 months ago

    1 comment
View more solutions

Latest comments

  • P
    Antoine•330
    @super7ramp
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I think implementation is pretty close to the Figma design and works as expected.

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

    Essentially styling the <dialog> element.

    By default, <dialog> has a display: none and switches to display: block when opened. I wanted to customize the dialog and use a display: flex, but only when dialog is open. I had to use for the first time an attribute selector for that, otherwise dialog would appear by default on the page:

    .success-dialog[open] {
       display: flex
       /* ... */
    }
    

    Also, dialog is centered by default but after my CSS reset, it wasn't anymore. Had to use margin: auto to fix that. Maybe my CSS reset could be improved.

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

    Any feedback/advice welcome!

    Newsletter sign-up form (HTML + CSS + JS vanilla)

    1
    Jonathas Tavares•130
    @jonathasltavares
    Posted about 2 months ago

    really good

  • Vinh Le•180
    @vinhle-dev
    Submitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    I have difficulty processing the content shared in 2 modes of mobile and desktop. I tried to do everything but my code seemed too complicated

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

    I am looking for a way for the code to work better and can easily be converted to hold two types of devices.

    Article Preview Component

    1
    Jonathas Tavares•130
    @jonathasltavares
    Posted about 2 months ago

    really good.

  • Esprium•170
    @Esprium
    Submitted 5 months ago

    responsive

    1
    Jonathas Tavares•130
    @jonathasltavares
    Posted 2 months ago

    good

  • P
    Akshata•210
    @Akshatasarawgi
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have learnt the use of flex: grid; and sizing each item in the grid container according to the design. I am yet to get a good understanding of the grids. But I'm happy with the result.

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

    I faced some challenge in getting the grids to align in the mobile device.

    Four Card Feature Section

    1
    Jonathas Tavares•130
    @jonathasltavares
    Posted 2 months ago

    It's great! Just the gap between the cards are bigger than the design. Other than that, good job.

  • vipuser12•60
    @vipuser12
    Submitted 3 months ago

    Product-preview-card-component

    1
    Jonathas Tavares•130
    @jonathasltavares
    Posted 2 months ago

    really good. Just one thing: the color of the green are wrong.

  • Vanshika Thesiya•40
    @vanshu778
    Submitted 2 months ago

    Recipe Page Challenge – HTML & CSS Implementation

    1
    Jonathas Tavares•130
    @jonathasltavares
    Posted 2 months ago

    really good.

View more comments

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

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