All solutions

1. What did you find difficult while building the project?

In my case, since the project has a 'Success Message' needed, I take time to familiarize with React Router 6 and learn its basics. Though it take a long time to finish the challenge, I feel satisfied with the result.

2, Which areas of your code are you unsure of?

This two function in my Form.jsx:

 const handleSignUp = (e) => {
    e.preventDefault();
    if (isEmail(value)) {
      navigate('/success');
      setError(null);
    } else {
      setError('Valid email required');
    }
  };

  const isEmail = (email) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

MY QUESTION

• does handleSignUp() conditional statement good?
• does isEmail() way of checking email good?, It's my first initial thought to use Regexp and then use Regexp.test() to tell if the value is truthy or falsey. Which this function will be used in handleSignUp()

3. Do you have any questions about best practices?

Well, about SASS/SCSS

Most of my .scss file that deals with @media I tend to do it in the same file, for example in this _content.scss:

@use '../variables/variable.scss' as *;

.app {
  display: flex;
  flex-direction: column;
  .app__content {
    display: grid;
    gap: 1rem;
    padding: 1.5rem 2.5rem 1.5rem 1.5rem;
    .app__title {
      font-size: 2.5rem;
      font-weight: $fontWeight-700;
      font-family: $fontFamily_Bold;
    }
    .app__description {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      li {
        list-style-image: url('../../assets/images/icon-list.svg');
        padding-left: 0.5rem;
      }
    }
  }
  @media screen and (min-width: $screen-desktop) {
    flex-direction: row-reverse;
    margin: 1rem;
    border-radius: 2rem;
    overflow: hidden;
    padding: 1rem;
    background-color: $color-Neutral-100;
    max-width: 800px;
  }
}

Though it works, I was wondering if there is better way to this kind of stuff.

For any further inspection on my code, I highly recommend to check up on my Repository, I have a lot of codes in there that It'll take a long comment to cover it all of them if I decided to put it in here.

Any kind of comments, suggestions, critiques, thoughts, will be accepted whole heartedly. I'll be happily waiting for you guys to check out my work and have some discussion, long or short.

Thank you for your time to read this comments of mine.

1.) Which areas of your code are you unsure of?

• In this part of my code:

.card__description {
  text-align: center;
  margin-left: 2rem;
  margin-right: 2rem;
}

I'm not quite sure if this the right way but by doing this or this is common. This makes this code close to the design though.

ALSO

Does putting @media queries between a CSS selector like this:

.card__description {
  text-align: center;
  margin-left: 2rem;
  margin-right: 2rem;
}

@media (min-width: 700px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

.summary {
  padding: var(--card-padding);
  display: grid;
  background-color: var(--clr-neutral-100);
}

Is this fine?

2.) Lastly, is my code good?

• I try to do "good practice" along the way and making sure that the code was readable and maintainable. Though I'm pretty confident of what the result was, but having a second opinion and suggestion from other people like you guys who reading this right now is truly helpful

So, check out my code in my Github repository. Any comments, suggestions, tips, critiques will be appreciated.

Thank you for your time reading this comments of mine.

1.) What did you find difficult while building the project?

What I found challenging is to get around when the screen is changing, the image will also change from mobile to desktop.

Also making sure the whole component is responsive:

• text
• margin
• display
• and padding

2.) Which areas of your code are you unsure of?

This code from my "script.js":

document.addEventListener('DOMContentLoaded', function () {
  const image = document.getElementById('responsiveImage');

  function changeImage() {
    if (window.innerWidth <= 800) {
      image.src = './images/image-product-mobile.jpg';
    } else {
      image.src = './images/image-product-desktop.jpg';
    }
  }

  window.addEventListener('resize', changeImage);
});

Overall, this piece of code DID the job, when the screen is less than 800px then the image will be in mobile mode then pass that pixel it will be in a desktop mode.

BUT

I think this cause some problems, because when the page/web first load the image turns into './images/image-product-mobile.jpg. Then after I resize or refresh the page/web, it'll became './images/image-product-desktop.jpg'

I'm not quite sure how that happened

3.) Do you have any questions about best practices?

Yes, but it's all in my styles.css.

Whenever I style, I just keep going and I add the necessary CSS properties that needs to be look like what the design is be, and even though I'm managing to complete the styling, I can't help but to have some thoughts about doing CSS asking Is this a good enough? or did I over did it again when it comes to styling?

With that said, here is some of my CSS concern for references:

.card button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  font-family: var(--ff-Montserrat);
  font-weight: var(--fw-700);
  color: var(--clr-neutral-white);
  background-color: var(--clr-primary-darkCyan);
  border: none;
  border-radius: 10px;
  transition: background-color 0.3s ease-in-out;
}

Also this one:

.main {
  display: flex;
  flex-direction: column;
  margin: 1rem;
  box-shadow: 0 0 5px 4px var(--clr-neutral-DgrayishBlue);
  border-radius: 1rem;
}

@media screen and (min-width: 800px) {
  .main {
    flex-direction: row;
    margin-top: 6rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
  }

  .hero img {
    border-radius: 1rem 0 0 1rem;
  }

  .card {
    padding: 2em;
    border-radius: 0 1rem 1rem 0;
  }
}

Also

• I use a bunch of display: flex whenever I do some styling. I'm not sure when to use display: grid and what would be the best time to use it.

Check Out My Repositories

Check Out this on Netlify

I would love you guys to check it out and give any kind of help, suggestions, tips, best-practices and criticism.

Questions

1.) What did you find difficult while building the project?

• Answer: Well, finding the right size for the margin and font-style. I'm not worried about the padding and border, only those two that give me some trouble.

2.) Which areas of your code are you unsure of?

• Answer:

@media only screen and (min-width: 275px) {
  .app {
    margin: 1em;
  }
}

@media only screen and (min-width: 465px) {
  .app {
    margin: 2em;
  }
}

@media only screen and (min-width: 545px) {
  .app {
    margin: 2.5em;
  }
}

@media only screen and (min-width: 625px) {
  .app {
    margin: 20%;
  }

  .app-title {
    font-size: 4vw;
  }

  .app-paragraph {
    font-size: 3vw;
  }
}

@media only screen and (min-width: 1100px) {
  .app {
    margin: 37%;
  }

  .app-title {
    font-size: 1.8vw;
  }

  .app-paragraph {
    font-size: 1.3vw;
  }
}

@media only screen and (min-width: 1440px) {
  .app {
    margin: 37%;
  }

  .app-title {
    font-size: 1.8vw;
  }

  .app-paragraph {
    font-size: 1.3vw;
  }
}

I find this code of mine redundant but I'm not quite sure if there is another way of doing this kind of stuff. This just came out of mind and wing it. It works! but I had a feeling that there is another way of doing this.

3.) Do you have any questions about best practices?

• Answer: Is there a better way to resize margins, font-size, and using media queries? I get its purpose but is there a better way to do those? Any answer or guidance/criticize, I will gladly accept.