Nishanth Venkatesan

Latest comments

• 

  angel veliz•290

  @angelveliz1837Submitted about 2 months ago

  

  pagina realizada con css puro

  #pure-css

  1

  10
  

  P

  Nishanth Venkatesan•640

  @nishanth1596Posted 2 days ago

  Hi Angel Veliz,

  Great work! Since your code isn't in English, I may not be able to deep dive fully, but I'll do my best to provide helpful feedback.

  1. Margin and Centering Issue: Instead of using a fixed margin: 70px auto, you could use the following approach for better responsiveness:

  body {
      display: flex;
      justify-content: center;  
      align-items: center;     
      height: 100vh;          
      margin: 0;
      background-color: #f0f0f0; 
  }
  
  .envoltura {
      max-width: 300px;
  }
  

  This ensures the content stays centered on all screen sizes. On my screen (which is wider than 1440px), the content appears shifted to the left.

  2. Avoid setting a fixed width for content, images, etc., as it may look good on your screen but not on all screen sizes. Instead, design responsively so that the browser adjusts the layout properly across different devices.

  You can test this while developing by using the developer tools in your browser and adjusting the screen size to see how your site responds.

  By the way, great work! Keep working hard—you're doing well! 😊

  0
• 

  P

  Mina Makhlouf•1,120

  @MinamakhloufSubmitted 8 days ago

  

  Password Generator App w/React

  #accessibility#vite#react

  1

  20
  

  P

  Nishanth Venkatesan•640

  @nishanth1596Posted 4 days ago

  Hi @Minamakhlouf Great work, I learnt how to style input slider by going through your code. I was really struggling to style it propely and just used tailwind inbuilt method to style it. Though it didn't come like in the design.

  I have a few suggestions that might further improve your code:

  1.CSS Modules Naming: I see you are using css module like this

  <section className={styles["password-generator"]}>
  ...
  </section>
  

  You can consider defining styles in camelCase instead:

  .passwordGenerator{
    max-width: 540px;
    margin: 0 auto;
  }
  

  And then use it as:

  <section className={styles.passwordGenerator}>
  ...
  </section>
  

  This is just a suggestion in case you're not already aware of this approach!

  2.Code Organization: To keep your code clean and modular, you might consider creating a separate file for the password generation logic and then importing it inside the handleSubmit function. This would enhance readability and maintainability.

  3.Fixing class Instead of className: In the PasswordStrength component, I noticed that you’ve used class instead of className. Keeping the browser’s developer console and VS Code’s built-in error detection tools open while working can help catch such issues immediately.

  4.Project Structure: As a best practice, it's generally recommended to place the components folder inside the src directory. This helps maintain a clear distinction between source code and build-related files.

  Overall, you've done a fantastic job! Keep up the great work, and I look forward to seeing more of your projects. 🚀

  Regards, Nishanth

  0
• 

  Ghozy•250

  @Ghozy165Submitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  I am proud that i am able to finish this project using React

  What challenges did you encounter, and how did you overcome them?

  make the navbar responsive in mobile and when click outside part of the navbar will make the navbar close, I am fix it using overlay, that above the page and above the overlay is the navbar

  What specific areas of your project would you like help with?

  any comments are welcomed

  

  News Homepage

  #react

  1

  22
  

  P

  Nishanth Venkatesan•640

  @nishanth1596Posted 21 days ago

  Hi @Ghozy165,

  Great work! I learned a lot going through your code.

  Just a small suggestion for best practices: It’s recommended to update the state using a callback function like this:

  const handleNavToggle = () => {
    setNavActive((prevState) => !prevState);
  };
  

  By doing so, React will correctly use the previous state value when updating, which can help avoid potential issues, especially when state updates depend on the previous state.

  Hope this helps! Keep up the good work!

  0
• 

  Jean Gabriel Rodrigues•330

  @theJRodriguesSubmitted about 2 months ago

  

  Contact form

  #node#react#react-hook-form#tailwind-css#vite

  1

  00
  

  P

  Nishanth Venkatesan•640

  @nishanth1596Posted 22 days ago

  Hi @theJRodrigues, Great job on your work! I was struggling with styling the checkbox and radio buttons, but after reviewing your code, I learned that adding accents can make it much easier to style them.

  1. While going through your code, I noticed that you have used unnecessary <div> tags, like:

          <div>
            <TextAreaElement 
            label="Message *" 
            name="message"  
            register={register} 
            errors={errors}/>
          </div>
  

  Using <div> elements without a clear purpose can make the code a bit messy. I would recommend using <div> tags only when necessary.

  2. Also, since this is a small component, it's not ideal to use an <h1> tag. Instead, consider using an <h2> or <h3>. To prevent accessibility issues, you could add a header with an <h1> tag, something like 'FM contact-form challenge', and then hide it using the sr-only class.

  Keep up the good work, and I hope these suggestions help!"

  Marked as helpful

  1
• 

  Moyinoluwa Adelowo•390

  @Moyinoluwa-10Submitted 12 months ago

  

  FAQ Accordion built using React and Typescript

  #react#typescript#tailwind-css

  1

  10
  

  P

  Nishanth Venkatesan•640

  @nishanth1596Posted 27 days ago

  Hi @Moyinoluwa-10

  Excellent work, I learned how you have given transisition to the code, making the animation looks cooler.

  My couple of suggestions are; 1.

      <div className="hero bg-light-purple min-h-screen w-full flex flex-col items-center justify-center gap-10 py-10 px-5">
        <div className="w-full max-w-[530px] bg-white rounded-2xl p-5 md:py-10 md:px-8">
          <div className="flex items-center gap-5 mb-4">
            <img src="/icon-star.svg" alt="icon-star" />
            <h1 className="font-bold text-4xl md:text-6xl text-dark-purple">
              FAQs
            </h1>
          </div>
          <div>
            {faqs.map((faq, i) => (
              <FaqItem
                key={i}
                {...faq}
                id={i + 1}
                isActive={isActive}
                onToggle={handleToggle}
              />
            ))}
          </div>
        </div>
        <Footer />
      </div>
  

  In this code, there are a lot of divs which is not that great in terms of SEO and accessbilities. So instead you can use semantic html like this

      <>
        <main className="hero bg-light-purple min-h-screen w-full flex flex-col items-center justify-center gap-10 py-10 px-5">
          <article className="w-full max-w-[530px] bg-white rounded-2xl p-5 md:py-10 md:px-8">
            <div className="flex items-center gap-5 mb-4">
              <img src="/icon-star.svg" alt="icon-star" />
              <h1 className="font-bold text-4xl md:text-6xl text-dark-purple">
                FAQs
              </h1>
            </div>
            <div>
              {faqs.map((faq, i) => (
                <FaqItem
                  key={i}
                  {...faq}
                  id={i + 1}
                  isActive={isActive}
                  onToggle={handleToggle}
                />
              ))}
            </div>
          </article>
        </main>
        <Footer />
      </>
  

  You have to tweak here and there to use flex for the footer, my whole point was how you can use semantic tags even for this small component.

  2. For the heading h1- “FAQs”, I would suggest using an <h2> or <h3> tag since this is a small component, it might be better to use a different heading level for accessibility and SEO. You could consider adding a hidden <h1> tag like “FAQ Accoridon Card Component” (with the sr-only Tailwind class) to keep the semantic structure intact. You can add this under header tag as well by making more semantic.

  3. In FaqItem component, you can simplify the className like this

          <p
            className={`overflow-hidden transition-all duration-300 text-grayish-purple ${
              isActive === id ? "my-4  max-h-[200px] " : " max-h-0 "
            }`}
          >
  
  

  0
• 

  Vladimir Gatara•440

  @vgarmySubmitted over 1 year ago

  What are you most proud of, and what would you do differently next time?

  Im proud of the overall design, the animation is i nice touch:)

  What challenges did you encounter, and how did you overcome them?

  The react coding was a litte tricky.

  What specific areas of your project would you like help with?

  Not at this moment.

  

  Interactive rating component in react

  #react#react-router#framer-motion

  1

  30
  

  P

  Nishanth Venkatesan•640

  @nishanth1596Posted 27 days ago

  Hi @vgarmy, Great work on the project! I have a couple of suggestions that could improve things even further:

  1. HTML Update for the Favicon: It seems the React logo is still visible instead of the Frontend Mentor icon. You can replace the <head> section in your HTML with the one below. Don't forget to add the logo image to the public folder and remove any unnecessary images to keep things tidy.

    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  
      <title>Frontend Mentor | Interactive rating component</title>
    </head>
  

  2. Adding Animation Delay: To enhance the user experience, adding a delay to the transition would make the animation smoother. You can do this with the following CSS:

   transition: all 3s ease 2s; /* 3s duration, 2s delay */
  

  3. **Improving Heading Structure for Accessibility: ** For the heading “How did we do?”, consider using an <h2> or <h3> tag. This will help maintain a clear, hierarchical structure for smaller components and improve both accessibility and SEO. Additionally, to maintain proper semantic structure, you can add a hidden <h1> tag like “Interactive Rating Project” and use CSS to hide it visually while keeping it accessible to screen readers.

  4. Great Transition Effect: The transition from the right to the center for the "Thank You" component was fantastic! Really well done on that!

  Keep up the excellent work! Your attention to detail is truly impressive.

  Marked as helpful

  0