Skip to content
OverviewSolutions
9
Comments
12
SmartAce
@Smart-Ace-Designs

All comments

  • Adrian Rangel•270
    @radriann21Submitted 4 months ago
    What 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.

    Newsletter Sign-Up Astro and React

    1
    SmartAce•170
    @Smart-Ace-DesignsPosted 4 months ago

    Excellent 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 helpful
    1
  • Philipp•130
    @Obom23Submitted 4 months ago
    What 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.

    Responsive social-media-links profile

    2
    SmartAce•170
    @Smart-Ace-DesignsPosted 4 months ago

    I 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
  • James Brown•260
    @jamesbrown173Submitted 4 months ago
    What 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?

    responsive card with java

    1
    SmartAce•170
    @Smart-Ace-DesignsPosted 4 months ago

    This 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
  • Philipp•130
    @Obom23Submitted 4 months ago
    What 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.

    Responsive social-media-links profile

    2
    SmartAce•170
    @Smart-Ace-DesignsPosted 4 months ago

    This 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 helpful
    0
  • joanna broad•100
    @JoannaBroadSubmitted 5 months ago
    What 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

    testimonal grid

    1
    SmartAce•170
    @Smart-Ace-DesignsPosted 4 months ago

    This 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
  • Flóra•180
    @Glorit74Submitted 8 months ago
    What 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?

    .

    Tailwind grid

    1
    SmartAce•170
    @Smart-Ace-DesignsPosted 5 months ago

    I 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
  • Hauwa Eniola Abdulazeez•110
    @Heniola45Submitted 7 months ago
    What 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

    Responsive Product Preview Card Component Using Tailwind css

    1
    SmartAce•170
    @Smart-Ace-DesignsPosted 5 months ago

    Hello. 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
  • SmartAce•170
    @Smart-Ace-DesignsPosted 5 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
  • BarteQ•160
    @BarteQSSubmitted 10 months ago
    What 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.

    Responsive Recipe page made with TailwindCSS

    1
    SmartAce•170
    @Smart-Ace-DesignsPosted 5 months ago

    Looks 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
  • SmartAce•170
    @Smart-Ace-DesignsPosted 5 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 helpful
    0
  • SmartAce•170
    @Smart-Ace-DesignsPosted 5 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
  • modji•140
    @modjiSubmitted 6 months ago
    What 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.

    QR code using tailwind-css

    1
    SmartAce•170
    @Smart-Ace-DesignsPosted 5 months ago

    Excellent 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