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

Gabriel Alves

@gb4lvesSão Paulo, SP50 points

// status: learn and evolving

I’m currently learning...

◾️Front-end (HTML5, CSS3 and JavaScript)

Latest solutions

  • Responsive Product Card with HTML, CSS, Flexbox and Media Query


    Gabriel Alves•50
    Submitted 19 days ago

    Responsiveness!


    1 comment
  • Responsive Recipe Page with HTML, CSS, Flexbox and Media Query


    Gabriel Alves•50
    Submitted 19 days ago

    Overall, haha, I think my code may have gotten a bit cluttered.

    Regarding responsiveness, if there is any way to improve it, I will definitely implement it. In lists too, how to space the text markers. And lastly in flexbox, where I used justify-content: space-between but I would like to reduce the space between the elements for a result closer to the exercise.


    1 comment
  • Social Links Page with basic HTML and CSS


    Gabriel Alves•50
    Submitted 20 days ago

    1 comment
  • Blog preview using flex and basic CSS


    Gabriel Alves•50
    Submitted 20 days ago

    2 comments
  • Creating the challenge using simple CSS parameters and a bit of flex


    Gabriel Alves•50
    Submitted 20 days ago

    1 comment

Latest comments

  • Poung_Mont•250
    @ThyuHtooAungOwO
    Submitted 19 days ago

    Responsive Product-Preview-Card

    1
    Gabriel Alves•50
    @gb4lves
    Posted 19 days ago

    It's perfect, I don't have many comments to make, it's identical to the exercise! Something I did in my version and would perhaps like to implement is an animation when we change the media from mobile to desktop, aesthetically it looks better, but that's it, everything is incredible, congratulations

  • P
    Anton Ryabov•240
    @antryabov
    Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    In just a couple of days, I gained a much better understanding of HTML and CSS. Practice makes perfect. I think the semantics should have been organized differently. I will be more careful next time.

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

    Learned to calculate the preferred value for clamp()

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

    I worked very hard on this. I am looking forward to constructive criticism :)

    Recipe page

    1
    Gabriel Alves•50
    @gb4lves
    Posted 19 days ago

    Very good, it's perfect. I had trouble making mine, looking here I would make a change only in the mobile version to remove the border-radius at the bottom. Otherwise everything is incredible, congratulations

  • P
    oxford777•50
    @oxford777
    Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    Je suis fière d’avoir réussi à recréer une mise en page fidèle au design fourni. J’ai bien compris l’utilisation des unités relatives comme rem et clamp() pour rendre le site responsive. La prochaine fois, je structurerais mieux mes classes CSS dès le début pour un code plus clair.

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

    Le centrage vertical de l’article m’a posé problème au départ. J’ai dû bien comprendre comment fonctionne Flexbox avec min-height: 100vh et align-items / justify-content.

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

    Je suis preneuse de retours sur la sémantique HTML et l’accessibilité (par exemple, l’usage des balises <article> et <footer>). Je me demande aussi si mes pratiques actuelles pour gérer le responsive sont optimales, ou s’il existe des alternatives plus modernes.

    Profil de liens sociaux responsive avec HTML & CSS

    1
    Gabriel Alves•50
    @gb4lves
    Posted 20 days ago

    Your result is very good, I currently haven't learned how to use rem and clamp for responsive sites, I admire that! About centering, I took a look at the code, and I learned a while ago that it is not very recommended to use display flex in our <body>, for centering I would create another tag like a <main> wrapping all the content, I would leave both, <body> and <main> with 100vh and use display: flex in <main>, so I believe that all the content will align vertically and horizontally with justify-content and alignt-items!

  • fukoutamaface•20
    @fukoutamaface
    Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    It pretty :D

    Blog post card with css

    1
    Gabriel Alves•50
    @gb4lves
    Posted 20 days ago

    It turned out great, especially because of the perspective, the measurements are practically the same. I liked the border you added to the profile picture!

  • LelloX-Dev•100
    @LelloX-Dev
    Submitted 20 days ago

    Responsive QR Code Card using HTML, CSS & Flexbox

    1
    Gabriel Alves•50
    @gb4lves
    Posted 20 days ago

    Very good, it's exactly like the exercise!

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

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