Using the useRef hook to display the form error messages.
What challenges did you encounter, and how did you overcome them?Displaying the form error messages and becoming familiar with the useRef hook.
What specific areas of your project would you like help with?Open to suggestions.
Hi, Some suggestions for UI:
background gradient. Havent a clue!
Hi there!
Congratulations on completing the challenge! The background here is not a gradient, It's an image that is provided in starter files, you can simply add it as background-image to div.content-wrapper
Hi!
Congratulations on completing the challenge! Your code is clean and well-organized, and I have a few suggestions that might help you improve it even further:
Modal functionality: for better user experience I suggest make modal closable by clicking outside of modal, so user can close modal without habving to reset their order
Use of Absolute Imports : For larger and more complex React projects, using relative imports can become cumbersome. Consider using absolute imports to simplify your project structure. Here’s a helpful article: Absolutely Don’t Use Relative Paths Imports in Your Vite + React Project.
Keep up the great work!
Hi there!
Congratulations on completing the challenge! Your work is impressive, and I have a few suggestions that might help you improve it even further:
Remove Button Functionality: The X button on the cart item should completely remove the row from the cart. This will enhance the user experience by making it clear what the button does.
UI Improvements: While the app’s functionality works well, as frontend developers, our goal is to make the final UI as close as possible to the design. Achieving a pixel-perfect UI without a Figma file can be tough, but you can still refine the sizes (padding, font sizes, etc.) and colors to better match the design.
Use of Absolute Imports: For larger and more complex React projects, using relative imports can become cumbersome. Consider using absolute imports to simplify your project structure. Here’s a helpful article: [Absolutely Don’t Use Relative Paths Imports in Your Vite + React Project.] (https://medium.com/@pushplaybang/absolutely-dont-use-relative-paths-imports-in-your-vite-react-project-c8593f93bbea)
Keep up the great work!
Hi there!
Congratulations on completing the challenge! Your code is clean and well-organized, which is great to see.
There are still some areas for improvement. As frontend developers, our goal is to make the final UI look as close as possible to the design. While achieving a pixel-perfect UI without a Figma file can be challenging, you can still improve the sizes (padding, font-sizes, etc.) to better match the design.
Also, before submitting your solution, it would be helpful to replace the repetitive content with the real content provided in the index.html of the starter files. This will give your project a more polished and authentic feel.
Keep up the great work, and thank you for your effort!
Hi, Nice and Code, I noticed the images aren't showing based on the viewport, this article from official Next js docs has great instructions: https://nextjs.org/docs/app/api-reference/components/image#art-direction
It's better not force aspect ration of 1:1 on image since the original image is not 1:1.
Hi, It's a nice and clean code, Good job There is a minor issue in the layout for tablet design, the summary cards are compact and although it shows desktop layout the border radius is at mobile viewport
First time I used Sass/SCSS. I used one .scss file because this is a small component and I don't know how to create a proper sass structure.
Please provide feedback on using sass and great resources to dig deeper.
hello your code is clean and well-written.👍 If you're up to a little more difficult challenge I suggest following along with this great youtube tutorial:
https://www.youtube.com/watch?v=8w_kHIAkucA&list=PLUWqFDiirlsuYscECzks6zIZWr_Cfcx9k
I learned sass from these videos and she uses a very clever solution for using media queries and breakpoints
My solution to news homepage. I would love to hear your feedback.
Hi
Title of the all news articles and "read more" button should be a link.
in the last-content div the design for mobile devices is broken you can fix it by giving the <div class="container"> a justify-content: flex-start
you can make images responsive with this class: .img-responsive { max-width: 100%; height: auto; }
I can't seem to get my javascript to work after much effort. Is there a way to fix it?
use <a> tag for links in navigation and also for all the news titles and read more button.
when you click on the toggle button it refreshes the page and the nav-links are showing only for a second. change the following line in the index.html: <a class="toggle-button" href=""> to <a class="toggle-button">
it should fix the problem, let me know if it doesn't work, You can also check out my solution here: https://www.frontendmentor.io/solutions/responsive-mobile-first-news-home-page-using-grid-flexbox-sass-0qzsyCifGq
