Ehsan Tatasadi
@tatasadiAll comments
- @yazid78Submitted 2 months ago@tatasadiPosted about 1 month ago
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- Every page should have an
h1
tag, as it's essential for accessibility and SEO. If there isn't a visible one, you can add a hiddenh1
using a screen-reader-only class (likesr-only
) to improve accessibility for screen readers. It helps users and search engines understand the main focus of the page. - In this case, the most logical hidden
h1
could be something like "Newsletter Sign-Up." You can keep it visually hidden but readable for screen readers.
- Every page should have an
-
Use proper button text
- There's a small typo in the button text: "Subscribe to monthly newletter" should be "Subscribe to monthly newsletter."
-
Form validation
- You’ve already included a "Valid email required" message, but it could be enhanced with proper ARIA attributes to help screen readers understand the form's error state. For example, using
aria-live="polite"
on the error message span would announce errors in real-time.
- You’ve already included a "Valid email required" message, but it could be enhanced with proper ARIA attributes to help screen readers understand the form's error state. For example, using
Keep up the great work! You're almost there, and with these tweaks, the code will be even stronger!
0 -
- @javiIT10Submitted 4 months ago@tatasadiPosted about 2 months ago
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 emptyhref=""
attributes. Make sure to add proper links or use#
as placeholders to prevent unexpected behavior. -
Transition on
lg:pl
Class: Thelg:pl-[8px]
class in the<main>
tag is missing a closing bracket, which breaks the class. This should be corrected tolg:pl-[8px]
. -
Use
rem
Instead ofpx
: Many of your spacing and font-size values usepx
units. It's recommended to userem
instead ofpx
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 descriptivealt
attributes. Instead of justalt="icon-facebook"
, use something likealt="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!
0 -
- @ownedbyanonymousSubmitted about 2 months agoWhat 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.
@tatasadiPosted about 2 months agoGreat 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 appropriatearia-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!
0 -
- @edpauSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I learnt to use a switch case for grid layout
- Using a switch case for grid layout customisation is effective when different grid areas need unique positioning based on index or other dynamic factors. It allows me to conditionally assign CSS grid classes to components, enhancing flexibility.
- Each testimonial requires a distinct placement, so using a switch statement makes it easy to control the layout by assigning specific Tailwind CSS classes to each element based on its index. This method keeps the logic clear, avoids redundancy, and ensures that I can handle changes dynamically with minimal code repetition.
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.
@tatasadiPosted about 2 months agoGreat job on completing the challenge! I have just one suggestion:
- The
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 helpful0 - @MarcWebDevSubmitted about 2 months ago@tatasadiPosted about 2 months ago
Good job on the implementation, it looks solid overall! Here are a few suggestions to improve the code:
- Instead of using fixed widths like
w-[540px]
for your paragraphs or cards, use responsive widths likemax-w-[540px]
orw-full
with padding. This will make the layout more fluid on various screen sizes. - Avoid using hardcoded values like
w-[350px]
andh-[250px]
for the card containers. Consider usingflex-grow
,flex-shrink
, or relative sizing units (like percentages orvw/vh
) to make the design responsive and flexible. - For the mobile view, you could simplify the use of custom media queries like
max-[580px]
. Consider using Tailwind's built-in breakpoints (sm:
,md:
, etc.) for consistency and cleaner code. - Be mindful of the repetition in card component styling. You could extract the common card structure into a separate component and pass props to keep the code DRY (Don't Repeat Yourself). This will make future maintenance easier.
Keep up the great work!
Marked as helpful1 - Instead of using fixed widths like
- @Ajaya-RajbhandariSubmitted about 2 months agoWhat 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
anduseEffect
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.
@tatasadiPosted about 2 months agoNice effort on completing the challenge! Here are a couple of things to improve:
- The design isn't mobile-friendly. On mobile sizes, the picture should be at the top, similar to the design. You can achieve this using media queries.
- The link to your source code leads to a 404 page, so I couldn't review it further. Please fix the URL so others can view your work and give more feedback.
Marked as helpful0 - @Zak-aden1Submitted about 2 months agoWhat 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 :(
@tatasadiPosted about 2 months agoGreat effort on completing this challenge! Here are a few suggestions to improve your solution:
- Avoid using
h-full
, and opt formin-h-screen
instead. This ensures the content adapts better on devices where the height may exceed the viewport, preventing overflow issues. - It's better not to set fixed widths for your containers. Instead, use flexible units like
max-w-full
or percentages, which will make your layout more adaptable across different screen sizes. - Try to avoid using
<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. - It seems the design isn't optimized for mobile. Consider using Tailwind's media queries (
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.
0 - Avoid using
- @Rahmonbek-0001Submitted about 2 months ago@tatasadiPosted about 2 months ago
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 usemin-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]
andh-[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
) ormax-width
to allow your layout to adjust gracefully.
Keep up the great work, and these tweaks will make your solution even more polished!
1 -
- @nowshadjaman21Submitted about 2 months agoWhat 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
@tatasadiPosted about 2 months agoCongratulations 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:
- For the card, consider using this box-shadow:
8px 8px 0 0 black
. This will give it a bit more depth and stay true to the design. - You could adjust the paragraph color to a darker gray or black with
opacity: 0.5
to align better with the design's intended contrast.
Great work overall! Keep it up!
Marked as helpful1 - For the card, consider using this box-shadow:
- @sidr467Submitted 6 months agoWhat 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.
@tatasadiPosted 6 months agoGood 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, usemin-height: 100vh
.
Keep up the great work!
1 -
- @OlatoyanSubmitted 8 months ago@tatasadiPosted 8 months ago
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 helpful1 - @adarsh78Submitted 9 months ago
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.
@tatasadiPosted 9 months agoFantastic 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 ofpx
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 ofsetState(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:- Centralized management of the slider's state and behavior.
- Easier maintenance and updates to the slider logic.
- Reduced complexity and redundancy in your codebase.
You could pass the
images
array andcurrentIndex
as props to thisImageSlider
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]
, usemax-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 helpful1