Skip to content
OverviewSolutions
36
Comments
133

Kimo Spark

@kimodev1990Riyadh, Saudi Arabia2,190 points

Hi there! I'm a passionate Front-End Developer working as a Freelancer. I'm aiming for the Full Stack Developer. Feel free to check on my solutions & projects and hope you find it useful. Never ever Give Up!! ( Consistency ).

I’m currently learning...

React & Node.js

Latest solutions

View more solutions

Latest comments

  • Kimo Spark•2,190
    @kimodev1990Posted over 1 year ago

    Really great work in completing the challenge and loved the transition of colors while hovering, Just a simple feedback :

    • If I added space at start or end of the input email ( not in between ), It gives an error. To eliminate this issue , You could just adjust in the javascript :
    form.addEventListener("submit", function (e) {
      e.preventDefault();

      if (!emailCorrectFormat(emailInput.value.trim( ))) { rest of your code }

    and

    state = "success";
email = emailInput.value.trim( ) ;
rest of your code

    The rest of your code is okay, trim ( ) removes if there is any spaces added in input.

    Hope you find this Helpful.

    Other than that, Nice work & Keep going on.

    Marked as helpful
    1
  • Kimo Spark•2,190
    @kimodev1990Posted over 1 year ago

    Great work in completing the challenge, Just a few feedbacks :

    • It better ( here & future designs ) to assign percentage values instead of definite values, such as you could assign width of image and class .content width: 50% ; for each of them, so you it would be in relevant to the main container's width and having better responsiveness.
    • You could center your design in middle of the website by adding in body :
    display: flex ;
justify-content: center ;
align-items: center ;
min-height: 100vh ;

    then container under body will be centered, no need to use top: 120px ; & left: 28% ;

    • Wrap the page's whole content in the <main> tag.
    • Use font-size in rem or em units rather than pixels for better responsiveness
    • You could use clamp ( ) method in your coding for font-size, width, margins, padding, etc., So the designed sizes will change according to the viewport dimensions having a responsive design and will be suitable for any device layout.

    Hope you find this Helpful.

    Other than that, Really Nice work & keep Going on.

    Marked as helpful
    0
  • Kimo Spark•2,190
    @kimodev1990Posted over 1 year ago
    • Use rem or em units rather than pixels for better responsiveness
    • You could use clamp ( ) method in your coding for font-size, width, margins, padding, etc., So the designed sizes will change according to the viewport dimensions having a responsive design and will be suitable for any device layout.

    Hope you find this Helpful.

    Other than that, Really Nice work & keep Going on.

    Marked as helpful
    0
  • Kimo Spark•2,190
    @kimodev1990Posted over 1 year ago
    • You could use clamp ( ) method in your coding for font-size, width, margins, padding, etc., So the designed sizes will change according to the viewport dimensions having a responsive design and will be suitable for any device layout.

    Hope you find this Helpful.

    Other than that, Really Nice work & keep Going on.

    Marked as helpful
    0
  • Kimo Spark•2,190
    @kimodev1990Posted over 1 year ago

    Really Great work in completing the challenge, Just a few feedbacks :

    • To center your container, no need to use padding: 175px 420px in container, You could add in body :
    display: flex ;
justify-content: center ;
align-items: center ;
min-height: 100vh ;

    and the container under body will be centered in the middle of your website.

    • You could add background-color: var(--cream-bg) to body instead of container to cover the whole page similar to the desired design.
    • Other way to change images according to the design layout is to use picture tag :
    <picture>
      <source media=" ( max-width:991.5px ) " srcset="./images/image-product-mobile.jpg>
      <img  src="./images/image-product-desktop.jpg" alt="#">
</picture>

    and depending on @media, the image changes. No need to add display: none ;

    Hope you find this Helpful.

    Other than that, Really Nice work & keep Going on.

    Marked as helpful
    0
  • Kimo Spark•2,190
    @kimodev1990Posted over 1 year ago

    Really great work in completing the challenge and loved the transition between two containers, Just a simple feedback :

    • If I added space at start or end of the input email ( not in between ), It gives an error. To eliminate this issue , You could just adjust in the javascript :
    e.preventDefault( );
let emailValue = emailInput.value.trim( ) ;

    The rest of your code is okay, trim ( ) removes if there is any spaces added in input.

    Hope you find this Helpful.

    Other than that, Nice work & Keep going on.

    0
View more comments