Aspiring full-time Frontend Web Developer currently mastering React and honing my skills to create dynamic, user-friendly web experiences. My goal is to transition into a Full Stack Developer role after gaining strong experience in frontend development.
I’m currently learning...React
Latest solutions
- Submitted 21 minutes ago
Responsive Loopstudio landing page
#react#tailwind-css#typescript#vite- HTML
- CSS
- JS
I need help in blurring the background image on hover
- Submitted 5 days ago
Responsive Password Generator App
#react#typescript#tailwind-css- HTML
- CSS
- JS
I need help in Styling the input slider. Any other feedback is also much appreciated.
- Submitted 21 days ago
Responsive News homepage in React JS
#react#tailwind-css#typescript- HTML
- CSS
- JS
I need help in styling the menu button in mobile screen. I am struck with this and unable to go any further.
- Submitted 22 days ago
Responsive contact form
#react#react-hook-form#tailwind-css- HTML
- CSS
- JS
I need help in these areas
- How do I change the styling of the radio and checkbox, after it has been checked or clicked
- Is my code readable and understanble? or did I just make it very messy?
These areas of help would be much appreciated.
- Submitted 27 days ago
Responsive faq-accordion
#react#tailwind-css#typescript- HTML
- CSS
- JS
Any feedback is appreciated
- Submitted 28 days ago
Responsive Tech-book-club-landing-page
#react#tailwind-css#typescript- HTML
- CSS
Any feedback is much appreciated. Thank you!
Latest comments
- @angelveliz1837Submitted about 2 months agoP@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.
- 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.
- 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@MinamakhloufSubmitted 8 days agoP@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 - @Ghozy165Submitted about 1 month agoWhat 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
P@nishanth1596Posted 21 days agoHi @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 - @theJRodriguesSubmitted about 2 months agoP@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.
- 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.
- 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 helpful1 - @Moyinoluwa-10Submitted 12 months agoP@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.
-
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.
-
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 -
- @vgarmySubmitted over 1 year agoWhat 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.
P@nishanth1596Posted 27 days agoHi @vgarmy, Great work on the project! I have a couple of suggestions that could improve things even further:
- 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>
- 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 */
-
**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.
-
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 helpful0