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

All 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
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year 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
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year 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
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year 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
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year 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
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year 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
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year 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
  • Matias Ludueña•1,990
    @matiasluduena23Posted over 1 year ago

    Hi Dalma! Nice Work Just one good practice that might help you with future projects.

    • Use the picture tag to make your images responsive. Here documentation

    Something like this:

    <picture>
  <source srcset="images/image-header-desktop.jpg" media="(min-width: 700px)" />
  <img src="images/image-header-mobile.jpg" alt="my-image" />
</picture>

    Where the browser choose the image depending of the viewport width of the device setting in the media query in the source.

    Hope this help you!

    Good code!

    Matias

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

    Hi Namrata! Good work!!! Your media query works perfectly fine! Just one advice that might help you.

    • To avoid that your content go all away to the width sides, you can use a max-width in your main.
    main {
   display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  margin-left: 47px; //remove this line
  margin-right: 47px;//remove this line
  margin-top: 100px; 
  max-width: 1000px; // add this line
  margin-inline: auto; //add this line( center you content)
}

    The margin-inline is the same that say (margin-left- margin-right)

    Look this when you have time.

    Hope this help you!

    Good code!!!

    Matias

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

    Hi Dalha’s! Good work! Just one advice that might help you!

    • If you notice in your <a> tag hover effect the height or your card jump. This is because you add border to your <a> . To avoid this you can add .signup-btn { border: 1px solid transparent} . Your border is already there, but transparent so avoid the jump.

    Good code!

    Matias

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

    Hi Darla! Congratulations you finished the challenge! It looks great!

    • Your form validation works great for this project but if you want to go one step further you can split you code to make it more reusable. The possibilities are many. You can check for you form submit, this help if you had more than one form in your website.
    1. You pass your form as a parameter to the function.
    2. get the input in the form and check for empty and validEmail( depending of the different kind of error send different message too error function).
    3. create a 'Show error' function that takes 2 parameters the message and the form.
    4. The error function get the element that display the message(the p element in your case) and insert the message. And also add a show-error class to your form. This is a different way to add the errors to elements. inserting a class in its parent.
    const formEl = document.querySelector('.form');

const validateFormEmail = (form) => {

    form.addEventListener('submit', (e)=> {
        e.preventDefault()
        const input =  form.querySelector('input').value.trim();

        if(input === "") {
            showError(`Can't be blank`, form)

        }else if(!validateEmail(input)){
            showError(`Please check your email`, form)

        }else {
            showSuccess('Thanks for surscribe!!!', form)

        }
    })
} 

validateFormEmail(formEl) // we past the form to the function



function showError(message , form) {

    const errorElement = form.querySelector('.error-message');

    errorElement.innerText = message;
    form.classList.add('show-error');
}

    In your css file you need to tell that when the error class be in the form all your error elements are going to be visible.

    CSS

    .form.show-error  .error-message{
 display = 'block';
}

.form.show-error  .error-icon{
 display = 'block';
}

    Here and example using typescript.

    Hope this help you!

    If you don't understand something let me know.

    Good code!

    Matias

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

    Hi EFFY1996’S! Your project looks great!!! Just one small detail that you can improve, use a hr tag instead of a div to make the line. Its for the good use of semantic HTML. Just a small detail.

    Good code!

    Matias

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

    Hi ROMEDIX1’S Good work! Just one advice that might help you make your layout more fluid and flexible. You can use a css grid implicit concept. Look this video.

    Good code!

    Matias

    0