@yazid78
Submitted
@tatasadi
@yazid78
Submitted
@tatasadi
Posted
Good job on completing this challenge! The structure is solid, and I like how you've handled the form and the success message. Here are a few suggestions to make the code even better:
Accessibility: Use h1
as the page title
h1
tag, as it's essential for accessibility and SEO. If there isn't a visible one, you can add a hidden h1
using a screen-reader-only class (like sr-only
) to improve accessibility for screen readers. It helps users and search engines understand the main focus of the page.h1
could be something like "Newsletter Sign-Up." You can keep it visually hidden but readable for screen readers.Use proper button text
Form validation
aria-live="polite"
on the error message span would announce errors in real-time.Keep up the great work! You're almost there, and with these tweaks, the code will be even stronger!
@javiIT10
Submitted
@tatasadi
Posted
Great job on the layout and structure of your article preview component! Here are a few suggestions to improve it:
ARIA Attributes for Buttons: Both the "share" and "close" buttons should have aria-label
attributes to improve accessibility. This helps screen readers provide meaningful context, especially since these buttons use icons only.
Avoid Empty Links: The <a>
tags for sharing links and the share button currently have empty href=""
attributes. Make sure to add proper links or use #
as placeholders to prevent unexpected behavior.
Transition on lg:pl
Class: The lg:pl-[8px]
class in the <main>
tag is missing a closing bracket, which breaks the class. This should be corrected to lg:pl-[8px]
.
Use rem
Instead of px
: Many of your spacing and font-size values use px
units. It's recommended to use rem
instead of px
for better scalability and accessibility, especially on responsive designs.
Add alt
Text for Share Icons: The social media icons (Facebook, Twitter, Pinterest) should have more descriptive alt
attributes. Instead of just alt="icon-facebook"
, use something like alt="Share on Facebook"
for clarity.
These changes will help improve both accessibility and maintainability while ensuring a better user experience across different devices. Keep up the great work!
@ownedbyanonymous
Submitted
What are you most proud of, and what would you do differently next time?
This challenge was a bit different from the other challenges in the sense it was an entire page and not just a component and l had to use media queries to cater for desktops, tablets and smaller mobile devices. Completing the challenge alone is something l am proud of and the fact that l was abl to search for answers whenever a hit a blocker. This chalenge gave a chance to use all the knowledge l have acquired in my journey and more.
What challenges did you encounter, and how did you overcome them?
Had challenges with responsive design, the assets l used in the project are exactly the optimized assests that were provided. I had a hard-time understanding the CSS property position. I am still not sure when and how to use the absolute and relative values. Then l figured using the mobile-first approach was not the best approach to the problem.
What specific areas of your project would you like help with?
Best practice and approach to responsive design especially when it comes to fonts and images. How to set media queries so that there are no devices left behind Difference between absolute and relative and when to use to each.
@tatasadi
Posted
Great job on the project! Here are some important suggestions to improve your code:
Max-width for Content: Consider adding a max-width
to your content containers. This prevents your content from stretching too much on larger screens, improving readability and visual balance.
Add ARIA Labels: Make sure that your <a>
tags have appropriate aria-labels
, especially if they contain non-descriptive text like "Download v1.3". This improves accessibility for screen readers.
Hero Section in <main>
: The hero section should be wrapped in <main>
tag. This is better for semantic HTML as the hero content seems to be part of the main content of the page.
Text-preset Class Refactoring: There’s a lot of repetition in your typography classes (text-preset-*
). Consider using utility classes or creating a more generalized class to handle similar styles (e.g., font-family, font-weight, and line-height).
These changes will improve the maintainability, accessibility, and performance of your project. Keep up the excellent work!
What are you most proud of, and what would you do differently next time?
I learnt to use a switch case for grid layout
Please comment whether it is a good way or not.
What specific areas of your project would you like help with?
I aimed to make the TestimonialCard component reusable, but each card has slightly different styles. To handle this, I added conditional Tailwind classes like ${bgColor} to match each card's unique style.
However, this increased the complexity of the component, reducing its readability and maintainability. It became harder to follow the logic, as the dynamic classes added clutter to the code. Balancing reusability with clarity is hard.
Please advise how I can improve.
@tatasadi
Posted
Great job on completing the challenge! I have just one suggestion:
gridClasses
switch can get cumbersome—consider refactoring into reusable components or predefined class sets to make it cleaner.Keep up the great work!
Marked as helpful
@MarcWebDev
Submitted
@tatasadi
Posted
Good job on the implementation, it looks solid overall! Here are a few suggestions to improve the code:
w-[540px]
for your paragraphs or cards, use responsive widths like max-w-[540px]
or w-full
with padding. This will make the layout more fluid on various screen sizes.w-[350px]
and h-[250px]
for the card containers. Consider using flex-grow
, flex-shrink
, or relative sizing units (like percentages or vw/vh
) to make the design responsive and flexible.max-[580px]
. Consider using Tailwind's built-in breakpoints (sm:
, md:
, etc.) for consistency and cleaner code.Keep up the great work!
Marked as helpful
@Ajaya-Rajbhandari
Submitted
What are you most proud of, and what would you do differently next time?
Use React as i felt easier to create component and use it anywhere i want. still lots of things to learn about react.
What challenges did you encounter, and how did you overcome them?
It was difficult to make responsive design. But i do it patching every element in most of the screen sizes. i think.
What specific areas of your project would you like help with?
-I want to focus on exploring more accessibility techniques, such as ARIA attributes, screen reader compatibility, and keyboard navigation.
-I aim to improve my understanding of React hooks, particularly the use of useState
and useEffect
to manage component state and side effects.
-I plan to dive deeper into CSS preprocessors like Sass or Less to enhance my styling capabilities and write more efficient, modular CSS code.
-I will continue to practice building responsive UI components using CSS Grid and Flexbox, ensuring my layouts adapt seamlessly to various screen sizes and devices.
@tatasadi
Posted
Nice effort on completing the challenge! Here are a couple of things to improve:
Marked as helpful
@Zak-aden1
Submitted
What are you most proud of, and what would you do differently next time?
tried using tailwind which was an interesting experience, slowly getting more accustomed to it
What challenges did you encounter, and how did you overcome them?
getting used to tailwind
What specific areas of your project would you like help with?
needed free figma to make it more like design :(
@tatasadi
Posted
Great effort on completing this challenge! Here are a few suggestions to improve your solution:
h-full
, and opt for min-h-screen
instead. This ensures the content adapts better on devices where the height may exceed the viewport, preventing overflow issues.max-w-full
or percentages, which will make your layout more adaptable across different screen sizes.<table>
for layout purposes. A CSS grid provides more flexibility and allows for better control of your content's structure, especially when adjusting to different screen sizes.sm:
, md:
, etc.) to make your design responsive. Responsive design is essential for ensuring that your layout works well on all devices, so it may help to dig deeper into responsive techniques.@Rahmonbek-0001
Submitted
@tatasadi
Posted
Great job on completing the challenge! You've put in solid work here. I have a couple of suggestions to improve responsiveness and flexibility:
Instead of using h-[100vh]
, it's better to use min-h-screen
. This ensures that your layout adapts better on smaller screens, especially when the content overflows vertically (e.g., on mobile devices with dynamic toolbars).
Avoid setting fixed width and height like w-[400px]
and h-[620px]
for your main container. Fixed sizes can cause layout issues on different screen sizes and resolutions. Instead, use responsive units like percentages (w-full
, h-auto
) or max-width
to allow your layout to adjust gracefully.
Keep up the great work, and these tweaks will make your solution even more polished!
@nowshadjaman21
Submitted
What are you most proud of, and what would you do differently next time?
i will add font style next time.
What challenges did you encounter, and how did you overcome them?
font styling
@tatasadi
Posted
Congratulations on completing the challenge! Your solution looks great, and you've done a fantastic job. I have two small suggestions to make it match the design even more closely:
8px 8px 0 0 black
. This will give it a bit more depth and stay true to the design.opacity: 0.5
to align better with the design's intended contrast.Great work overall! Keep it up!
Marked as helpful
@sidr467
Submitted
What are you most proud of, and what would you do differently next time?
Made it responsive
What challenges did you encounter, and how did you overcome them?
I didnt know how and what size would be perfect for container but somehow tried different width and managed it.
What specific areas of your project would you like help with?
Maybe CSS because it is still not perfect i think.
@tatasadi
Posted
Good job on completing your first challenge! Here are a couple of suggestions to improve your code:
Use one h1 on the page.
Instead of setting height: 100vh
on the body, use min-height: 100vh
.
Keep up the great work!
@Olatoyan
Submitted
@tatasadi
Posted
Good job on taking on this challenge! Unfortunately, I couldn't review your source code directly due to the link issue, but based on your app's functionality, here are a few suggestions:
Consistent User Identity for Comments
Ensuring a consistent user identity when making comments enhances the user experience by maintaining continuity. If implementing user authentication is challenging, consider using local storage to simulate a logged-in user's session. This way, the user identity remains the same until the session or local storage is cleared. (Currently each time that I make a comment, is a different user)
Limiting Upvotes
I can upvote a feedback unlimited. Every user should be able to upvote once for each feedback. (it is likely very hard to implement, when I don't have a login user)
Accurate Button Labeling
Ensure that button labels accurately reflect the action being taken. For an edit operation, labeling the button as "Update Feedback" instead of "Add Feedback" makes the function clear to users, improving usability.
Filtering by Category
Changing a feedback's category doesn't update the list under the new category filter. Double-check your filtering logic. Ensure that when a category is updated, the state or data structure that holds feedback items is also updated to reflect this change.
Dynamic Content Updating
For a smoother user experience, consider avoiding full page refreshes when changing category filter.
Implementing these suggestions will make your application more user-friendly and functional. Keep iterating and testing your features to refine the user experience further. Great work so far!
Marked as helpful
@adarsh78
Submitted
I hope this message finds you well! I recently completed this project and would greatly appreciate your feedback. Your insights and suggestions are valuable to me as I continue to improve my skills.
@tatasadi
Posted
Fantastic job on tackling this Frontend Mentor challenge! Your React application demonstrates a solid understanding of state management, component structuring, and responsive design principles. Here are some suggestions to enhance your project further:
Use REM for Sizing
Consider using rem
units instead of px
for sizing elements. REM units are relative to the root element's font size, offering better scalability and accessibility. This change helps ensure your design adapts more fluidly across different user settings.
Update State with Functional Updates
When updating state based on the previous state, use the functional update form setState(prevState => prevState + 1)
instead of setState(state + 1)
. This approach guarantees you're working with the most current state value, especially important in cases where state updates may be batched or asynchronous.
Why? React state updates are asynchronous. Using the current state directly inside setState
might not always have the latest state value, leading to potential bugs, especially when state updates are rapid or depend on the previous state.
Consolidate Image Slider Logic
It appears the logic for the image slider is repeated in both the Hero and Lightbox components. To streamline your code and adhere to the DRY (Don't Repeat Yourself) principle, consider encapsulating all slider-related logic (including navigation and image display) into a single reusable component. This new component can then be utilized wherever an image slider is needed within your application.
Creating a single ImageSlider
component allows for:
You could pass the images
array and currentIndex
as props to this ImageSlider
component, along with any handlers for next/previous navigation actions. This approach not only simplifies your application structure but also enhances the cohesion and reusability of your components.
By focusing on encapsulating your image slider logic into one component, you streamline your application's architecture, making it cleaner and more maintainable.
Center Arrow Buttons Vertically in Tablet View
For better alignment of the arrow buttons in tablet view, ensure they're vertically centered relative to the image they accompany. You can achieve this with Flexbox utilities (items-center
) or by adjusting their position with CSS to be in the exact middle, enhancing the user interface's consistency across views.
Use Max-width Instead of Width
Rather than setting a fixed width like w-[500px]
, use max-width
to allow your content to be more fluid and adapt to the screen size while still maintaining a maximum width constraint. This approach improves responsiveness and ensures your content looks great across devices.
Implementing these suggestions will not only refine your application's functionality and appearance but also enhance its maintainability and user experience. Keep up the excellent work!
Marked as helpful