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

Roni Tovar

@ronitzdevColombia280 points

Software Developer | Frontend | Bringing each design to life | #HTML5 #CSS3 #SASS #Bootstrap #JavaScript #MySQL

I’m currently learning...

learning advanced javascript, react and nodejs.

Latest solutions

  • blog-preview-card Vanilla CSS

    #bem

    Roni Tovar•280
    Submitted about 1 hour ago

    I want to improve the adaptability of the font and improve details.


    1 comment
  • Mortgage Repayment Calculator Sass

    #accessibility#sass/scss

    Roni Tovar•280
    Submitted about 1 year ago

    0 comments
  • Contact form with sass, using nesting and flexbox

    #sass/scss#accessibility

    Roni Tovar•280
    Submitted about 1 year ago

    0 comments
  • Qr component in vanilla

    #bem

    Roni Tovar•280
    Submitted about 1 year ago

    As for preprocessing css with sas, I want to learn sas.


    1 comment
  • Social links css vanilla

    #accessibility#bem

    Roni Tovar•280
    Submitted about 1 year ago

    1 comment
  • Recipe page responsive

    #accessibility#bem

    Roni Tovar•280
    Submitted over 1 year ago

    How they would have made a cleaner HTML structure and what CSS properties they would have used to generate less code and better project quality. I want to improve image adaptability and cross-branch task management in Git for optimal workflow.


    1 comment
View more solutions

Latest comments

  • P
    Nikita Chigirinsky•20
    @Nick-Rinsky
    Submitted 3 days ago
    What specific areas of your project would you like help with?

    I'd really appreciate any constructive feedback you can give — whether it's about code structure, naming, layout, responsiveness, or anything else. I'm open to suggestions on best practices, things I might have missed, or areas I could improve. I'm also eager to hear what direction I could grow in as a developer moving forward.

    Solution blog preview card

    #bem
    1
    Roni Tovar•280
    @ronitzdev
    Posted about 1 hour ago

    You can prevent your card from warping to a specific size by using these techniques in CSS:

    Set minimum values: Use min-width and min-height on the card so that it is never smaller than those values.

    Set maximum values: Use max-width and max-height to limit the growth of the card.

    Use box-sizing: border-box: So the padding and border are included in the total size of the card.

    Avoid fixed width/height values: Prefer width: 100% and height: auto so that the card fits the container, but respects the minimum and maximum values.

    Add media queries: Adjusts the borders at different screen sizes to maintain proportion and avoid warping.

  • Lord-Ace•90
    @lord-Ace
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the speed of completion and the rate at which my development skills have improved and I want to learn to style better

    social-links-profile-main

    1
    Roni Tovar•280
    @ronitzdev
    Posted about 1 year ago

    Hi, I see that you have added the font to the code, but you need to add the font family property to the body, also reduce a little the padding to the buttons; and to the sentence that follows the location add a suitable gray color without losing visual accessibility. In addition to leaving the buttons with a width of 100%. Topics such as the BEM convention can be useful. Practice with an interactive game like flexbox froggy to reinforce knowledge.

  • Christian Benitez•10
    @ChrissBenitez
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Using git to publish on github pages, I had never used it.

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

    centering vertically the element, I used absolute position

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

    Nothing so far so good.

    QR code landing page using SCSS and absolute position

    #bem
    1
    Roni Tovar•280
    @ronitzdev
    Posted about 1 year ago

    Hi, I found your project very nice. As for the image container, you can use the figure tag with the same .qrcode--image class. You can also add the property left and rigth in the developer attribution with a value of zero to center it, a background color like white, and padding up and down. To make it stand out and look clearer. And in the text a font size in rem unit. Mostly because it is used professionally. Otherwise fine.

    Marked as helpful
  • Basomka•60
    @Basomka
    Submitted over 1 year ago

    qr-code-component

    1
    Roni Tovar•280
    @ronitzdev
    Posted over 1 year ago

    Hello, to improve the visualization of your project on mobile, I recommend you to modify the height of the body tag with an automatic value, a padding of 10px and a padding of 1rem to the text container. I have invested on the BEM methodology for the html structure.

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