@abizmoSubmitted over 1 year ago
SmartAce
@Smart-Ace-DesignsAll comments
- @Smart-Ace-DesignsPosted 12 days ago
Looks good. Site is fully functional and responsive for all screen sizes. I see aria properties assigned. The only thing that appears missing is the ability to allow the user to use the keyboard (tab key) to navigate the FAQ items. I think once you add that, it should be perfect. For my solution, I made each one of my FAQ questions nested in a <button> element, which includes keyboard navigation out of the box. I am not sure if that is the best/correct solution - but it seemed to work for me. Something you might want to try... :)
Good luck and excellent work.
0 - @gayathri-v1Submitted 3 months ago@Smart-Ace-DesignsPosted 29 days ago
Hello. Looks like you are missing a few things in your solution...but is a good start. Here are a few items to work on to get to the final state:
- When clicking a ratings button, it should set the background color to orange to indicate that it has been selected.
- After clicking the submit button, you should see the rating that was selected in the "You selected x out of 5" message. Currently, that value is missing.
- For accessibility purposes, use the "aria" attributes to indicate that the "Thank you" section is hidden, etc. I am not sure if this is absolutely needed, as I am just learning about "aria" myself...but it might be something you want to investigate.
Keep at it and hopefully you will arrive at the correct solution. :)
0 - @PaiKai-LeeSubmitted about 1 month ago@Smart-Ace-DesignsPosted about 1 month ago
Hello. Congratulations on completing the project. I don't know much about React (I typically use Vue instead), so I cannot really comment too much on your React code. However, for the most part it does look like it works and is functional.
A few suggestions I have visually include:
- Keep the button disabled until all the data in input into form.
- Lower the form and top image a bit. It looks a bit high compared to the design screenshot.
- Remove the default "1" from the party size...and leave it blank.
- Clear out the error message when the reset button is clicked.
Otherwise, it looks really good...good job!
Marked as helpful1 - @FaojulazimSubmitted 5 months ago@Smart-Ace-DesignsPosted 3 months ago
This looks excellent. I did not see any issues with it other than when you click daily it should say "Yesterday" or monthly it should say "Last Month". Currently is says "Last Week" for all three (although your screenshot seems to be somewhat correct - it shows "Last Day" for daily - but the live web still shows "Last Week).
The responsiveness look correct at all screen sizes. I like the added touch of changing the colors of the cards on hover.
Overall a very good design and recreation of the specifications.
Marked as helpful0 - @LincolnBollschweilerSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Making best guesses for what the Figma may have said (no FEM pro license).
What challenges did you encounter, and how did you overcome them?Wondering if the Figma may have had another page for the ellipse on each activity card. I just made it look clickable but no action assigned.
@Smart-Ace-DesignsPosted 3 months agoThis looks really good. I did notice a few issues that I can point out that you might want to address.
-
Instead of saying "Previous" is should say "Last Week", "Last Month" or "Yesterday". I missed this too in my own solution and just happened to catch it at the end of the design :)
-
In your mobile screen size, I noticed "Daily, Weekly, Monthly" links are still stacked vertically. I believe this should be side-by-side in the mobile view. You can use media queries and flexbox to set them to be "flex-direction: row" instead of "flex-direction: column".
Everything else looks really good. Excellent job!
Marked as helpful0 -
- @radriann21Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
Proud to have completed this project using React!
I was able to simulate some of the behaviors needed to give the impression of a real newsletter. It would be different not to use Astro, as in reality, there was no need to use it. However, it was a good choice to see how to work with integrations within the framework.
What challenges did you encounter, and how did you overcome them?No particular challenges. I had a moment of confusion when using the valid state for rendering the success message.
@Smart-Ace-DesignsPosted 9 months agoExcellent job getting this solution completed. One thing I noticed in your solution is that it is missing the "checkmark" images to the left of your list. I am guessing that was just an oversight and you will be adding them later. I noticed you used Astro with React components. I like that idea. I used Astro for my solution as well and went with Astro Actions and Zod to do the validation which worked pretty good.
Marked as helpful1 - P@Obom23Submitted 9 months agoWhat challenges did you encounter, and how did you overcome them?
Again some issues with the responsive design, I used max-width and max-height for the container inside the body, but I don't know if thats the best way to solve it.
@Smart-Ace-DesignsPosted 9 months agoI incorrectly mentioned that the avatar should be hidden in mobile mode - I rechecked the design image and it is not hidden. Sorry about that - disregard my previous comment. I must have been thinking of a different design problem. :)
1 - @jamesbrown173Submitted 9 months agoWhat challenges did you encounter, and how did you overcome them?
Like, knowing how to make the div element float for the share options in the larger view sizes. I had to use a different element instead of the same one from the mobile size. Is this best practice?
What specific areas of your project would you like help with?As above, and the best way to float a div element?
@Smart-Ace-DesignsPosted 9 months agoThis looks really good, although a bit tall. I too was unable to get the the button change colors on click. If you find a solution to this eventually, I would be curious to know how you did it. I see in mobile mode you got the share button to line up properly when clicked- and it looks really good (that was another thing I got stuck on). Good job on that.
1 - P@Obom23Submitted 9 months agoWhat challenges did you encounter, and how did you overcome them?
Again some issues with the responsive design, I used max-width and max-height for the container inside the body, but I don't know if thats the best way to solve it.
@Smart-Ace-DesignsPosted 9 months agoThis looks really good - excellent job! A few suggestions I can provide: update the responsive design for small screen sizes so that the avatar is hidden by using a media query (or breakpoint if using Tailwind); you also might want to make the width a bit wider so that the quoted text fits on one line.
Marked as helpful0 - @JoannaBroadSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
i think i need to look at flex as much as grid
What challenges did you encounter, and how did you overcome them?i struggled to get every thing sat next to each other properly
What specific areas of your project would you like help with?grid and flex
@Smart-Ace-DesignsPosted 9 months agoThis looks really good but I would suggest adding some margin (or some other technique) at the top to bring down container to be more in the center of the screen. I also like your custom footer - very creative! Excellent job.
0 - @Glorit74Submitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
I made a desktop view with grid in tailwind
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@Smart-Ace-DesignsPosted 9 months agoI see you used flex for your internal stacked card layout in desktop mode. I did the same thing...so it is nice to see others doing the same. I was not sure if I was doing it correctly. Everything looks really good...nice job.
0 - @Heniola45Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
Experimented with Tailwind CSS for the first time, and thoroughly enjoyed the experience!.
What challenges did you encounter, and how did you overcome them?Nil.
What specific areas of your project would you like help with?Nil
@Smart-Ace-DesignsPosted 9 months agoHello. Nice work on your first attempt with Tailwind CSS!
One suggestion I can offer is how you handled spacing "Perfume":
<p>P E R F U M E</p>Instead of hard-coding the spaces between the letters you can use the "tracking" CSS class instead, which adds spaces for you:
tracking-[.35rem]In my case I had to specify and exact value by using the "[ ]" syntax to get it to look as close as possible instead of using one of the pre-defined values.
https://tailwindcss.com/docs/letter-spacing
You can also use the "uppercase" class to force the characters to all uppercase for you. I am not really sure of the advantage to using that instead of using typing all uppercase, but that is what I have seen other people do in some tutorials and it seems to be "best practice".
https://tailwindcss.com/docs/text-transform
0 - @fitalvojosephineSubmitted 9 months ago@Smart-Ace-DesignsPosted 9 months ago
Looks excellent! My only suggestion would be to add responsive design to it (image should be flush with no padding/margin at mobile screens).
0 - @BarteQSSubmitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
I'm happy that I was able to finish the project using Tailwind for the first time and still relatively quickly and close to the design.
What challenges did you encounter, and how did you overcome them?Nothing major.
What specific areas of your project would you like help with?None.
@Smart-Ace-DesignsPosted 9 months agoLooks good. I struggled with the table portion of the challenge - I noticed you went with a UL instead of a table. I was looking at using spans, a CSS grid and then ultimately went back to my original choice of using a table - but never considered using a UL. I wonder if the UL option is an easier solution than what I used...
0 - @BlizzmasterSubmitted 10 months ago@Smart-Ace-DesignsPosted 10 months ago
Hello Adrian,
This solution looks really good!
Some minor feedback I can provide it to add some media queries to your solution to meet the mobile design requirements. The avatar should be hidden when in mobile mode.
Good luck!
Marked as helpful0 - @TinoweiSubmitted 10 months ago@Smart-Ace-DesignsPosted 10 months ago
Looks really good. My suggestion would be to to add the hover pseudo-class for the "HTML & CSS foundations" text so the the color changes to yellow. The design screenshot (active-states.jpg) shows it yellow when the mouse hovers over it.
0 - @modjiSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I'm getting more and more confortable with tailwind-css. I am pleased on how it turned out but I am not a 100% sure that it's a perfect copy as to the Figma file.
What challenges did you encounter, and how did you overcome them?I'm still not really confortable with Figma, I have enough knowledge to use it but sometimes it slows me down
What specific areas of your project would you like help with?Definitely learning Figma and getting confortable with it. There's also many ways to do this challenge; therefore, looking to see how others have done it.
@Smart-Ace-DesignsPosted 10 months agoExcellent use of tailwind.config.js to extend the colors, font family, and font size. I did the same thing, although I missed the font size in my solution.
For some reason, the screenshot it took of my solution does not match my actual solution...so I am not sure why that is happening. Perhaps the same thing happened for you?
Good luck with continued coding.
0
