@gayathri-v1Submitted 2 months ago
Latest solutions
Interactive rating component with Astro and Tailwind CSS
#astro#tailwind-cssSubmitted 16 days agoNothing at this time.
Tip calculator with Astro, Vue, Tailwind, and Nanostores
#astro#tailwind-css#vue#typescriptSubmitted 20 days agoCSS layout.
Astro framework with Tailwind CSS, Vue islands, and MongoDB backend
#astro#tailwind-css#vue#mongodbSubmitted 2 months agoMy CSS is a mess. Probably needs some cleanup and elimination of unused or redundant styling.
Newsletter sign-up built with Astro, Zod, and Tailwind CSS
#astro#tailwind-css#zodSubmitted 8 months agoI used margin to place the button in the success message at the bottom. It seems to me that there should be a better way to do this instead of using a huge margin value that I eye-balled to get right. Should I be able to use something like grid or flex to automatically position it at the bottom?
Article Preview Card using Astro and Tailwind CSS
#astro#tailwind-cssSubmitted 8 months agoThe share button - changing colors on click and centering it in mobile mode.
Testimonials Grid Section built with Astro and Tailwind CSS
#astro#tailwind-cssSubmitted 9 months agoNothing at this time. But I am very open to suggestions and constructive criticism.
Latest comments
- @Smart-Ace-DesignsPosted 16 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 21 days ago@Smart-Ace-DesignsPosted 20 days 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 4 months ago@Smart-Ace-DesignsPosted 2 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 2 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 2 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 8 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 8 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 8 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 8 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
