Skip to content
OverviewSolutions
51
Comments
96

Matias Ludueña

@matiasluduena23Argentina1,990 points

Hi! I'm Matias a IT manager who wants to become Front-end developer. I finished all the newie challenges with HTML Vanilla CSS JS. Now I'm gonna to start with the junior challenges using ASTRO. Good code for everyone!!!

I’m currently learning...

ASTRO - REACT - Reading Eloquent Javascript

Latest solutions

View more solutions

Latest comments

  • Matias Ludueña•1,990
    @matiasluduena23Posted about 1 year ago

    Hi NICHOLASBOYCE’S ! Good Work

    This course might help you with the responsivesness.

    Good code!

    Matias

    0
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year ago

    Hi ZUKA’S!!! Congratulations you finished the challenge!!! Just one recommendation that might help you.

    • Tried to avoid position absolute to center big elements. With position absolute the element is remove from the normal document flow. Instead you can use flexbox or grid.

    with Flex

    .element {
display: flex;
justify-content: center
align-items: center;
}

    with Grid

    .element {
display: grid;
align-content: center;
}

    In both case if you don't have an height you need to set one. You can use min-height: 100vh

    Hope this help you!

    Good code!

    Matias

    0
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year ago

    Hi SAMSON360! Good work! Just one advice that might can help you with your font-size.

    • You can use clamp() function, this function takes 3 parameters, the first one is the minimum size the second is the ideal size and the last one is the maximum size. Look this. You can take advantage of this setting a viewport unit in the second parameter, and make your font be dynamic.

    Use this in your links:

    nav li a {
font-size: clamp(1rem, 3vw, 2rem);
}

    Play with those values.

    Good code!

    Matias

    0
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year ago

    Hi Adonay Aragón’s! Good work You can tried mobile first approach in other challenge. I recommend to you trying to do it without any framework, just Vanilla CSS. So you can focus on the css.

    • In this challenge you can add a max-width in your card media query.
    @media (max-width: 768px) {
  .card {
    flex-direction: column;
    max-width: 400px;
  }
}

    Good code!

    Matias

    Marked as helpful
    1
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year ago

    Hi Steezy1416’s! Your work look great Nice code! Just one small details that might help you in UX.

    • Make you buttons cursor pointer in hover effect.

    Good code!

    Matias

    Marked as helpful
    0
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year ago

    Hi JimTK16’s! Nice work! Just one good practice that might make you work more easy to debbug.

    • You can structure your html like this:
    <header>
 <img logo/>
 <nav>
   <ul>
     <a link...>
     <a link...>
     <a link...>
   </ul>
 </nav>
</header>
<main>
   <section >left </section>
  <section >right </section>
</main>

    This video could help you understand more clearly the structure.

    Good code!

    Matias

    Marked as helpful
    1
View more comments