Skip to content
OverviewSolutions
41
Comments
45
P
Nishanth Venkatesan
@nishanth1596

All comments

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @elingwange, Great work on this! I really enjoyed going through your project. Here are a few suggestions that might help take it even further:

    1. Consider using external CSS: You've used internal CSS, which works fine for smaller projects. However, switching to an external stylesheet can improve separation of concerns, make your code more maintainable, and speed up loading times as your project grows.

    2. Avoid inline CSS where possible: Inline styles are best used for dynamic or one-off cases. Moving styles into an external file gives you better flexibility and consistency across the site.

    3. Use more semantic HTML tags: Tags like <header>, <main>, <section>, and <article> improve accessibility, SEO, and the overall structure of your HTML. For example:

    <header>
    <h1>Simple Omelette Recipe</h1>
    <p>An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked to perfection, optionally filled with your choice of cheese, vegetables, or meats.</p>
</header>

<main>
<!-- all content here -->
</main>

<footer>
Challenge by Frontend Mentor. Coded by Evan Fang.
</footer>
    1. Update your README.md: It might seem like an extra step, but a clear README can really make your project stand out. It shows professionalism and helps others understand your work quickly.

    Keep up the awesome work, you're doing great!

    Marked as helpful
  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @bhuvi819381, You're doing a fantastic job, really impressive work so far! I had a few small suggestions that might make the experience even better:

    1. The card hover transition feels a bit slow, slightly increasing the speed could make it feel smoother and more responsive.
    2. It looks like the cursor: pointer might be missing on the buttons. Adding it would improve the UX subtly but noticeably.
    3. You could consider adding a reducer to remove an item from the cart when its quantity drops below one. This would add a nice real-life touch to the cart functionality.
    4. Adding a small notification (like using react-hot-toast library) when items are added, updated, or removed from the cart could enhance the user experience even more and it's quick to implement!
    5. Also, there seems to be some inconsistency in the styling of the "Delete" button for cart items, a bit of padding and visual alignment would make it look more consistent and polished.

    Overall, really solid work, just a few refinements and it’ll feel even more polished. Keep it up!

    Marked as helpful
  • Diana Codaus•230
    @DyaC-703
    What are you most proud of, and what would you do differently next time?

    I improved my understanding of box-sizing: border-box for consistent layouts and practiced using object-fit: cover to handle responsive images without distortion.

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

    Maintaining the aspect ratio of images inside containers was tricky at first, but using object-fit: cover solved this issue effectively.

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

    I’d appreciate suggestions on optimizing my CSS for better maintainability and performance.

    Parfum Project Css

    1
    P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @DyaC-703, Great job, the design is clean, semantic, and well-organized!

    A few small suggestions to make it even better:

    1. Simplify the layout if possible: If you're not styling the image wrapper specifically, you can simplify the structure like this:
       <main class="container">
     <img src="./images/image-product-desktop.jpg" alt="Perfume Bottle" class="product-image" />
     <div class="product-info">...</div>
   </main>


.container {
  display: flex;
}

    But if you need more control over image sizing or layout ratios, wrapping the image in a .card-image div is still a good idea.

    1. Avoid redundant class names: If .container and .product-card are applied to the same element and not reused separately, you can consolidate them into one class to keep things simpler.

    2. Make price info more semantic: You could wrap the pricing section in a <p> or semantic container for better structure:

        <p class="price">
          <span class="discount-price">$149.99</span>
          <span class="original-price">$169.99</span>
    </p>
    1. Consider mobile-first development: It’s generally easier to start with a simple mobile layout and scale up using min-width media queries. This also leads to more maintainable CSS as the project grows.

    Overall, great work! Just a few tweaks here and there to make it even more awesome. Keep building

    Marked as helpful
  • P
    Gwinyai•140
    @gkuzivam
    What are you most proud of, and what would you do differently next time?

    Learning state management using Signals

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

    Understanding Signals, I overcame this by doing tutorials.

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

    Coming up with a mobile version as an improvement.

    Product List App built with Angular, TypeScript, CSS and HTML

    #angular#typescript
    1
    P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @gkuzivam Great work on the implementation, your effort really shows! 👏 I’d love to share a few suggestions that might help improve the project further:

    1. Tagging: I noticed the project is built using Angular, but it’s tagged as React. Since I'm reviewing this as part of my learning path (which includes React projects), it showed up on my list. This can be a bit misleading for reviewers and learners following a specific stack. Correct tagging will help others find and evaluate your project more effectively.

    2. Responsiveness: I'd recommend adopting a mobile-first development approach. It's generally simpler to build for smaller screens first and scale up. For example:

    • Start with grid-template-columns: 1fr for mobile.
    • Adjust to grid-template-columns: repeat(3, 1fr) for tablets.
    • Scale further for desktop as per your layout needs. This way, responsiveness becomes more structured and easier to manage.
    1. Transitions: Most of the transitions in your project feel very fast and linear. Adding a slight transition duration, something like
    transition: all 0.3s ease-in-out;

    can make interactions feel smoother. Whether it's a color change or icon shift, this subtle improvement enhances the user experience noticeably.

    1. Cursor Pointer: For interactive elements like the increase/decrease buttons in the cart, consider adding cursor: pointer;. This small detail improves UX by visually indicating clickable elements.

    Overall, it’s a solid foundation, with a few tweaks, it’ll feel much more polished. Keep up the great work! Let me know if you’d like help with the CSS structure if it were React, I’d be happy to walk through it!

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @okhaled11, You've done a great job implementing the tip calculator using HTML, CSS, and JavaScript, it looks clean and functional. I really appreciate the effort you’ve put in. Here are a few friendly suggestions that could help polish the project further and bring it closer to a professional standard:

    1. Tagging: Since this project is built using plain HTML, CSS, and JS, tagging it as a React project might be a bit misleading. Updating the tags accordingly could help others find it more accurately.

    2. Documentation: Adding a short README or usage guide, even if minimal, makes a big difference. It signals that you care about code clarity and makes it easier for others to understand and test your work.

    3. Reset Button Behavior: Currently, the reset button calculates the result. Typically, a reset button is expected to clear all input fields and set values back to default. You might consider renaming it or adjusting the logic to match the label.

    4. Active Tip Highlight: There’s no visual indication of which tip percentage is selected, which can slightly impact the user experience. Adding an active class for the selected tip can help users better understand their selection at a glance.

    5. Semantic HTML: Using semantic tags like <header>, <main>, <section>, etc., instead of generic <div> elements, improves accessibility and SEO. For example:

    <header class="header">
  <span>SPLI</span>
  <span>TTER</span>
</header>

    This gives better structure and meaning to your layout.

    Again, great work overall, you’re definitely on the right path. Keep coding and refining, and your projects will keep getting stronger!

  • Rebecca Padgett•2,100
    @bccpadge
    What are you most proud of, and what would you do differently next time?

    The only thing I would do differently, is use React and Tailwind CSS.

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

    N/A

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

    All feedback is welcome and greatly appreciated.

    Responsive Fylo using HTML, SCSS, & JavaScript

    #accessibility#bem#sass/scss
    3
    P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi Rebecca! Excellent work on this challenge! 🎉 It’s really impressive how semantic and accessible your HTML is! The transitions and animations look super smooth, Im definitely going to steal a few of these ideas for my next challenge 😉

    My few suggestions are; 1.Decorative Image Optimization Since the illustration is decorative, you can simplify the markup by removing the <figcaption> and aria-hidden="true". An empty alt attribute (alt="") is enough to hide it from screen readers

      <figure class="productive__banner">
          <img class="intro__img" src="./assets/images/illustration-2.svg" alt="" aria-hidden="true">
          <figcaption class="visually-hidden">Image doesn't need a caption</figcaption>
        </figure>


<figure class="productive__banner">
          <img class="intro__img" src="./assets/images/illustration-2.svg" alt="" >
</figure>

    2.Improving Tablet Layout UX For tablet screens, consider adding more horizontal padding and constraining the width of the input and button fields. Centering them would improve the overall visual balance. This is also where using React (or any component-based UI library) could shine, you only need to update the button/input styles once, and it would reflect everywhere!

    Again, great job! Keep up the amazing work and keep pushing yourself with more advanced setups like React, you’re clearly ready for it! 🚀

    Marked as helpful
  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @apu2304, Great work, the transisiton and translation for the nav was really cool! 👏

    Here are a few suggestions you might find helpful:

    1. In the App component, I noticed some components are named like Section1, Section2, and Section3. When another developer (or even you after a few weeks) reads it, it may not be immediately clear what each section does. It's better to give meaningful names like HeroSection for the landing section, WhyChooseUs or FeaturesSection for the features part, etc. Meaningful names really improve readability and keep the project structure clean.

    2. In the Nav component (great naming here btw 👏), you repeated the same animated <motion.p> element multiple times. Instead, you could map over an array of links, like this:

    {navLinks.map((link) => (
  <motion.p
    key={link}
    initial={{ borderBottom: "none", borderColor: "transparent" }}
    whileHover={{
      borderBottom: "3px solid",
      borderColor: "var(--emerald)",
      color: "var(--space-cadet)",
    }}
    transition={{ duration: 0.5, ease: "easeInOut" }}
    className="text-[var(--cadet-gray)] cursor-pointer"
  >
    {link}
  </motion.p>
))}

    It makes the code more scalable and maintainable. (And honestly, as developers, we're a little lazy 😝 — DRY code saves us pain later!)

    1. In Section1, Section2, and the Nav component, you used a lot of <div>s. It would be even better to use semantic HTML tags where possible, like <section> for sections and <nav> for the navigation bar. You can look into semantic HTML a bit more — it’s a small change that improves accessibility and SEO, and it's a great habit to develop.

    2. In section 2, you could create one component and reuse it by passing different props.

    function CardItem({ title, description }) {
  return (
    <article
      className="bg-[var(--lightblue)] p-4 rounded-lg flex flex-col gap-4 mb-8 justify-center items-center
md:items-start text-center md:text-left"
    >
      <img src="assets/images/icon-onboarding.svg" alt="" />
      <h2 className="text-[var(--space-cadet)] text-lg md:text-xl">{title}</h2>
      <p className="text-[var(--cadet-gray)] text-sm md:text-md max-w-lg">
        {description}
      </p>
    </article>
  );
}

export default CardItem;

    That way, your code becomes even cleaner and more scalable, which is a big advantage of frameworks like React. Also the another big advantage is you dont have to write more code, coz we developers are lazy 😂

    Keep up the awesome work! 🚀 Your project already looks great, and with these small improvements, it'll look even more professional. ✨

    Marked as helpful
  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @bhuvi819381, Great work!

    Here are a couple of suggestions to make it even better:

    1.Use a <select> element instead of a <button> for dropdowns I noticed you’re using a <button> and several <div>s to build a dropdown, like this:

    <button class="flex items-center gap-2 px-4 py-2 rounded-md dark:bg-Dark-Mode-Elements bg-White shadow-md hover:shadow-lg transition-all duration-300">flexnetlify.app/country/BHR

    While it looks good, using a native <select> element would be more semantic, and it also simplifies the code. You can still apply styles using className as needed. Here's a rough example:

    <label for='sortBy'>Sort by:<label> //if you dont want to show this, you can you sr-only
<select name="sortBy" id="labelId">
  <option value="name">Name</option>
  <option value="population">Population</option>
<!-- Add more options as needed -->
</select>

    2. Consider implementing pagination Right now, all country cards are rendered at once. This can slow down loading and hurt performance as the number of countries grows. Instead, you could load and display 10 countries at a time, and then load more as the user scrolls or clicks “Next”.

    This approach (called pagination) offers several benefits:\

    • better performance
    • Improves user experience
    • Easier to manage large data sets
    • Works well with APIs that use ?page=2&limit=10 style parameters

    These are just my suggestions — but again, fantastic job overall! The animations and UI are really well done 🔥

    Keep it up!

    Marked as helpful
  • P
    Nishanth Venkatesan•1,030
    @nishanth1596
    What are you most proud of, and what would you do differently next time?

    I really enjoyed this challenge. Since I am accousmed to tailwind css, I faced a lot of setback in using vanilla css. But there were perks of using it, I used module css, so debugging was way to simpler compared to tailwind but I have to write a lot of code.

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

    The alignment of the "Add to Cart" button is incorrect, and I’m not sure why it’s getting wrapped. However, if I remove left: 50%, the issue is resolved. It seems to be related to positioning—since there isn’t enough space, the button is wrapping to the next line.

    I've never encountered this issue before, so I’m unsure how to fix it. Any help would be greatly appreciated.

    Responsive product-list-with-cart

    #react#redux-toolkit#tanstack-query#typescript#pure-css
    3
    P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @MarziaJalili Could you help me with this "Add to Cart" button issue?

    I've spent a lot of time on it but couldn't fix it. So, I decided to seek your help first before proceeding any further

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Great job on your work! I have a few suggestions that might help improve your code:

    1. You’ve used multiple unnecessary <div> elements. Try to use them only when necessary. For example:
      <div>
        <p>76</p>
        <small>of 100</small>
      </div>

    Instead of this, you can structure it like this:

    <p>76 <span>of 100</span> </p>

    This keeps the code more semantic and clean.

    1. Headings (h1, h2, h3, etc.) should follow a logical order. In your code, I noticed that an h3 appears before an h2, which can cause HTML issues. If you want a smaller heading to come first, consider using a <p> tag instead and styling it accordingly.

    2. h1, h2 ,h3 should go in a order. In your code, you have used h3 at first and then h2. This will raise html issues. Go in the order. If you feel h3 should come first and then the h2 come, instead of h3 use <p> tag and style it.

    3. Your website’s layout keeps expanding as the content grows. To maintain a structured look, you can set a max-width on the content. This will prevent the page from stretching too much and ensure better readability.

  • leodev•570
    @hangtime319
    What are you most proud of, and what would you do differently next time?

    It was a very challenging project, as I never used tailwind. But I learned a lot and I will always apply it to projects.

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

    My challenge was to apply the tailwind classes and make the animations

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

    I had difficulties in some parts of the project, such as putting a red border on the Features items. It doesn't work on mobile

    Bookmark landing page using HTML, Tailwind CSS and JS

    #accessibility#tailwind-css#jss
    1
    P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Great work on this project! I have a few suggestions that might help refine it even further:

    1. Since this project is built using HTML, JavaScript, and Tailwind, tagging React might not be the most accurate choice. Updating it accordingly could make it clearer.

    2. To enhance the professionalism of your project, consider updating and adding a well-structured README. I know it’s a bit of extra work, but small details like this can really help you stand out.

    3. On medium screens, the margins for the hero (first section) and the download section seem a bit tight. Adjusting them slightly could improve readability and overall layout.

    4. In the FAQ section, the toggle animation happens instantly. Adding a transition like the one below would make the interaction smoother and more visually appealing:

     transition-all duration-500 ease-in-out
    1. Since most of the headings and paragraphs in this project share common styles, you could define them in the input.css file using a base layer. This way, you can simply use <h2>Content here</h2>, and the styles will be applied automatically:
    @layer base {
  h2 {
    color: var(--color-Black);
    font-size: 1.5rem;
    line-height: 3.25rem;
    font-weight: 500;
    letter-spacing: -0.08px;
  }

  p {
    color: var(--color-Black);
    font-size: 0.94rem;
    line-height: 1.56rem;
    opacity: 0.5;
    font-weight: 400;
    letter-spacing: 0;
  }
  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Great work

  • P
    Mukarram Haq•440
    @MukarramHaq
    What are you most proud of, and what would you do differently next time?

    I was able to get it done in a very short amount of time and learned a lot of new things as well.

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

    The challenge I encountered was adding an overlay in the desktop version. I was able to overcome that by reading TailwindCSS documentation.

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

    In my interactive section I was unable to get the positioning of the second div. I used right-1/10 utility class with relative and absolute positioning. While I was able to get it done on my laptop but on larger screen sizes it breaks.

    Any help with that would be highly appreciated.

    Loopstudios Landing Page w/TailwindCSS

    #tailwind-css#accessibility
    1
    P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Great work

  • P
    Carlos Samuel•350
    @Crtykwod
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I implemented the timer functionality in the quiz application. For example, this part of the code made me proud:

    export const setTimer = () => {
  const duration = getTimerDuration();
  if (!duration || !elements.timerCheck.checked) {
    elements.root.style.setProperty("--animate-timer-playstate", "paused");
    saveTimerSettings();
    return;
  };
  state.timerDuration = duration;
  elements.root.style.setProperty("--animate-timer-playstate", "running");
  elements.root.style.setProperty("--animate-timer-duration", `${state.timerDuration}s`);
  saveTimerSettings();
};

    This implementation uses CSS variables and animations for the timer visualization rather than JavaScript intervals, which is more performant and smoother. I also implemented persistent timer and theme settings using localStorage, allowing users to maintain their preferences between sessions.

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

    One of the most significant challenges I encountered was implementing the quiz selection and rendering system that could handle different quiz categories dynamically. The main difficulty was creating a structure that could load the appropriate quiz data based on user selection and render it correctly. I solved this by developing a modular approach using the quiz-data.js and quiz-renderer.js files:

    import {createQuiz} from "./quiz-renderer.js";
export const quizTypes = {
  html: (quiz) => createQuiz(quiz),
  css: (quiz) => createQuiz(quiz),
  javascript: (quiz) => createQuiz(quiz),
  accessibility: (quiz) => createQuiz(quiz),
};

    This approach allowed me to maintain a clean separation of concerns between data fetching, quiz creation, and rendering logic. The quiz selection handler in quiz-logic.js then ties everything together:

    export const handleQuizSelection = (event) => {
  const button = event.target.closest(".menu__button");
  if (!button) return;

  state.currentQuiz = button.textContent.trim();
  updateHeader();

  const selectedQuiz = quizTypes[state.currentQuiz.toLowerCase()];
  const quiz = selectedQuiz
    ? selectedQuiz(getQuizData(state.currentQuiz))
    : null;

  quiz ? renderQuiz(quiz) : restoreMainMenu();
};

    Another challenge was implementing the dark/light theme toggle that needed to work seamlessly with the rest of the UI. The theme switching functionality required careful consideration of accessibility and user preferences, ensuring that all UI elements remained visible and properly styled in both themes.

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

    I would love feedback on the following areas:

    - Timer Implementation in Quiz App

    The timer functionality in my quiz app has been challenging to implement correctly. Here's the relevant code from my timer.js file:

    import {elements, quizElements} from "./elements.js";

export const setTimesUpEvent = () => {
  // This function is called when the quiz is rendered
  // I need help ensuring this properly handles the timer animation
  // and correctly triggers when time runs out
}

    I'm particularly concerned about:

    1. How to properly sync the CSS animation with the JavaScript timer logic

    2. Ensuring the timer resets correctly between questions

    3. Handling edge cases when a user answers just as time runs out

    - Quiz Selection and Rendering Logic

    I'm also looking for feedback on my quiz selection and rendering approach:

    export const handleQuizSelection = (event) => {
  const button = event.target.closest(".menu__button");
  if (!button) return;

  state.currentQuiz = button.textContent.trim();
  updateHeader();

  const selectedQuiz = quizTypes[state.currentQuiz.toLowerCase()];
  const quiz = selectedQuiz
    ? selectedQuiz(getQuizData(state.currentQuiz))
    : null;

  quiz ? renderQuiz(quiz) : restoreMainMenu();
};

    Is this approach maintainable for adding new quiz types in the future? Should I be using a different pattern for handling the quiz selection and creation?

    Frontend Quiz App using TailwindCSS

    #tailwind-css
    1
    P
    Nishanth Venkatesan•1,030
    @nishanth1596

    Hi @Crtykwod,

    Awesome work on this project! The timer feature is a great addition. 🎉

    I just noticed that the timer runs for the whole quiz instead of resetting for each question, which makes it a bit tricky to complete the quiz properly. I’m not too experienced with JS, but I think the timer might need to reset when moving to the next question. Maybe you could check that?

    Also, for better project organization, creating a separate repo for each project would be ideal. Branching is usually used for feature updates rather than separate projects.

    One more thing—since this wasn’t done in React, it might be better not to tag React for clarity.

    And if possible, adding a bit more margin to the theme switcher would make the UI even better!

    Great job overall! Looking forward to seeing more of your work. 🚀

    Marked as helpful
  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    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.

    1. 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! 😊

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    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

  • Ghozy•280
    @Ghozy165
    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
    P
    Nishanth Venkatesan•1,030
    @nishanth1596

    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!

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596

    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.

    1. 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