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

Galdino

@GaldinoMatBrazil215 points

I am a CS student trying to improve my skills and develop quality software/solutions to the modern world. I am focusing on front-end development for now, but my biggest dream is to become a Fullstack Javascript Dev. If you have any tips, feedback, or even any questions, feel free to contact me!

I’m currently learning...

Javascript, HTML and CSS. I hope to get a good grasp of the fundamentals of front-end development before I can advance to bigger frameworks and libraries, such as React, Vue, Angular, jQuery, Bootstrap, SASS etc.

Latest solutions

  • Mobile First Single Price Grid (HTML, CSS grid)


    Galdino•215
    Submitted over 4 years ago

    0 comments
  • Mobile First Intro SignUp Form (HTML, CSS Vanilla JS)


    Galdino•215
    Submitted over 4 years ago

    1 comment
  • Mobile First Coming Soon section w/ CSS Grid (HTML, CSS, JS)


    Galdino•215
    Submitted over 4 years ago

    1 comment
  • Mobile First Card feature section (HTML, CSS Grid and Tilt.js library)


    Galdino•215
    Submitted over 4 years ago

    1 comment
  • Mobile First Coding bootcamp testimonials (HTML, CSS, Vanilla Js)


    Galdino•215
    Submitted over 4 years ago

    1 comment
  • Mobile First Article Preview (HTML, CSS, Vanilla Javascript)


    Galdino•215
    Submitted over 4 years ago

    1 comment
View more solutions

Latest comments

  • Muhammad Hisham•715
    @mohamedhesham221
    Submitted over 4 years ago

    HTML & CSS (No Javascript)

    2
    Galdino•215
    @GaldinoMat
    Posted over 4 years ago

    Hey man, good job! But I think your solution has some issues. Regarding the box image, try putting the container in position:relative, so the box doesn't move when we try to check for responsiveness. This can also be checked for the mobile image, since it gets on the text's way when the device is 760 - 500px wide. Also, check the container's size for lower resolution devices, since it gets too big. My tips is: try to design the solution using a mobile first approach, and limit yourself to 2 media queries, since too many rules can cause conflicts and weird behaviours. But good job with the radio-buttons. I used a similar approach on my own solution and was quite happy with it. Be proud of yourself!

  • Gesiere•780
    @Gesiere
    Submitted over 4 years ago

    Testimonial Grid Section With Scss

    1
    Galdino•215
    @GaldinoMat
    Posted over 4 years ago

    Hey man, great job! But I think you forgot to specify the font-family.

  • IlamaaranRamakrishnan•10
    @IlamaaranRamakrishnan
    Submitted over 4 years ago

    Design using figma and then grid-container styling.

    1
    Galdino•215
    @GaldinoMat
    Posted over 4 years ago

    Hey man. Good job! But, like you said, the responsiveness is a bit strange, since the cards do not move until a certain point where they are already well hidden by the screen. My suggestion is to research on how to improve you grid and its responsiveness, since, in my opinion, it is the issue here.

  • dhakobja•85
    @dhakobja
    Submitted over 4 years ago

    HTML and CSS solution using lots of Flexbox

    1
    Galdino•215
    @GaldinoMat
    Posted over 4 years ago

    Hey man, nice solution! Maybe on next ones try to use a mobile first approach, so the code looks a bit less repetitive and the desktop version comes in a little more naturally. And while I'm still on the same boat as you (newbie projects), I don't think there is any problem in using flexbox that much. I've tried to use css grid but I end up coming back to flexbox lol. The only thing that I would tell you to watch out is the boxes' sizes and font-weight, since they have a lot of impact on the solutions. Cheers!

  • Ashley Chatman•40
    @amchatman
    Submitted over 4 years ago

    FAQ Accordion Card

    1
    Galdino•215
    @GaldinoMat
    Posted over 4 years ago

    You did very well on the responsiveness, but remember that when it comes to frontend, it is the details that get our attention. When we are beggining we tend to forget about padding, margin, font-size, line-height and many things like that. Try to review those things in your code. They make a huge difference. Also, try to put both images in one single div, so it is easier to position and change them. Specially the box image, that is a little bit weird in my opinion. Instead of using it as a background image, try using it as a rendered image using the <img/> tag. Hope it helps!

  • Kevin Persaud•140
    @Kpersaud-Dev
    Submitted over 4 years ago

    Used Sass and flexbox to make responsive

    2
    Galdino•215
    @GaldinoMat
    Posted over 4 years ago

    Hey Kevin. You did a nice job, but try to use media queries to change the image depending on the resolution, i think this will help you a lot in the future.

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