Skip to content
OverviewSolutions
51
Comments
96
Matias Ludueña
@matiasluduena23

All comments

  • nicholasboyce•220
    @nicholasboyceSubmitted 10 months ago

    How did you all manage to make the credit cards responsive? I'm still practicing making font-sizes properly responsive and everything, and clamp is still not entirely intuitive for me. Any resources to really make using it a bit more precise?

    Responsive Credit Card Form Input Exercise with Flexbox

    1
    Matias Ludueña•1,990
    @matiasluduena23Posted 10 months ago

    Hi NICHOLASBOYCE’S ! Good Work

    This course might help you with the responsivesness.

    Good code!

    Matias

    0
  • Zuka•30
    @Zukamimotu147Submitted 11 months ago

    This is my 2nd Challenge and I use some new CSS properties. I still don't know how to properly use pseudo classes so I'm trying to learn it at the moment. Also, CSS units.

    If you have any suggestions on how to improve my code. Please leave a feedback. Thank you.

    Stats-preview-component Project

    1
    Matias Ludueña•1,990
    @matiasluduena23Posted 11 months 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 11 months 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 12 months 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 12 months 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 12 months 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
  • Matias Ludueña•1,990
    @matiasluduena23Posted 12 months ago

    Hi Don coder’s! Nice work! Just one recommendation that might help you.

    • You can prevent that an element grows more that you need on the width direction using a max-width. Use this
    .grid-container {
  max-width: 700px;   // play with this number 
}

    Good code!

    Matias

    Marked as helpful
    0
  • Daniel 🛸•44,310
    @danielmrz-devSubmitted 12 months ago

    Hey, I'm Daniel and this is my solution for this challenge! 😁

    Very happy with the challenge, specially because I managed to create a fully functional email validation with JavaScript. This was impossible to me a few months ago.

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Built with SASS and JavaScript - Fully functional email validation

    1
    Matias Ludueña•1,990
    @matiasluduena23Posted 12 months ago

    Hi Daniel ! Good work!!! Just one advice that might help you in this and future projects.

    • When you have a suscribe input most of the cases your are sending data to a server. Is a good practice to use a form to wrap your input fields. You can change your .subscribe div for a form element.

    Good code!

    Matias

    Marked as helpful
    2
  • Joe Sexton•250
    @Joesexton9789Submitted 12 months ago

    I can't seem to get the big image to be the right size or get the text to line up properly as its shown in the design. Any advice on what I could have done wrong will be a tremendous help. Thanks.

    intro-section-with-dropdown-navigation

    2
    Matias Ludueña•1,990
    @matiasluduena23Posted 12 months ago

    Hi Joe! Good work! Just three advice that might help you.

    • In your titles use the function clamp to set differents values to your font-size. >You can check this video.
    • For your image you can set a max-height: 750px.
    • In your main you can use `display: flex; justify-content: center; align-items: center;

    Tried to avoid fixed sizes, and your website is going to be more dynamic hope this help you!

    Good code!

    Matias

    Marked as helpful
    0
  • Evergarden•1,290
    @EvergardenxSubmitted 12 months ago

    Today I did a Newsletter Sign-up Form with a stylish success message. Learn how to structure the HTML markup, style the form elements with CSS for a RESPONSIVE DESIGN and implement simple EMAIL VALIDATION with JavaScript functionality to display a success message upon successful submission (:

    Newsletter Sign-up form with success message

    1
    Matias Ludueña•1,990
    @matiasluduena23Posted 12 months ago

    Hi ULISES! Good work! Just one recommendation that might help you in this and future projects.

    • You need to validate your input with javascript.

    Something like this

    function validInput(input) {
   if(input.value.trim() === "") {
      //add error class here "can't be blank"
  }else i(!validateEmail(input.value)){
    // add error class here "not valid email"
  }
}

//function to validate the email
const validateEmail = (email) => {
  return String(email)
    .toLowerCase()
    .match(
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    );
};

    You can make a show error function to pass the message to the function and show the error.

    Hope this help you.

    Good code!

    Matias

    Marked as helpful
    0
  • Namrata Sinha•530
    @nmrtsnhSubmitted 12 months ago

    Hello everyone,

    I am Namrata and this is my solution for the Intro component with sign up form challenge.

    If you have any suggestions to improve my code, please feel free to share!

    Thank you 🙏

    Intro component with sign up form

    1
    Matias Ludueña•1,990
    @matiasluduena23Posted 12 months ago

    Hi again Namrata! You have been working a lot. Your are improving fast. Congratullations!!!

    • In this challenge like in the "ping coming soon" you also need to use position absolute. Now you can use it to position the error image.
    • Remember that you need to had parent with position relative to use a position absolute in an element.
    • I recommend you this:
    1. add a wrapper .form-control to your input and your image. Use the position relative in that element.
    2. use a position absolute in the img.
    <div class="form-control">
  <input>
  <img>
</div>

    Hope this help you. If you have any questions, leave them in the comments.

    Good code

    Matias

    Marked as helpful
    0
  • Namrata Sinha•530
    @nmrtsnhSubmitted 12 months ago

    Hello everyone,

    I am Namrata and this is my solution for the Ping coming soon page challenge.

    If you have any suggestions to improve my code, please feel free to share!

    Thank you 🙏

    Ping coming soon page

    1
    Matias Ludueña•1,990
    @matiasluduena23Posted 12 months ago

    Hi Namrata. Good Work! Just one good practice that might help you in this and future projects.

    • When you used a form, all your inputs, button and error message are wrapper inside the form, because some of this data you are going to send data to some endpoint server. Here Docs.
    • And for the error message notice that when it appears the image jump a few pixels down, that is because you use a position static in the <p>element. My recomendation is:
    1. Replace the <p class="error-msg"> for a <span class="error-msg">
    2. Use position absolute in that <span class="error-msg">
    3. Use position relative to the parent, the form.
    4. Use top, left, right, botton to position your span element under the input.

    Position absulute resources

    Hope this help you!

    Good code!!!

    Matias

    Marked as helpful
    0