Skip to content
OverviewSolutions
7
Comments
7
NunoJDMachado
@NunoJDMachado

All solutions

  • Responsive card grid using tailwindcss

    #tailwind-css
    NunoJDMachado•120
    Submitted 23 days ago

    • Not sure if any of the points above are good practice or if there is a more optimal way. Feedback on this would be much appreciated!

    • For the quotation mark image, I used the <picture> element to hide it on mobile and absolute positioning and z-index to position it properly. This caused an issue with the alt attribute on mobile because then the alt text would show up, which is not intended. To fix this I just deleted the alt tag entirely which is no good, right? Should I have made it a background image instead? I guess that would have avoided some of these issues.

    • Also used z-index to avoid the card shadows to go on top of nearby cards, which seemed a bit odd.

    1 comment

  • Responsive four card layout using tailwindcss

    #tailwind-css
    NunoJDMachado•120
    Submitted 29 days ago

    But still I notice around the tablet breakpoints that the two cards in the middle are getting more squished than the others, even though they have the same css applied. How can I fix this?

    1 comment

  • Responsive product preview card using tailwindcss

    #tailwind-css
    NunoJDMachado•120
    Submitted 30 days ago

    • What icon libraries would you recommend?

    • When it comes to hover states should I have a media query so that they are not applied on the mobile breakpoint? For example, "md:hover:bg-red-500" as opposed to just "hover:bg-red-500". Or is it irrelevant?

    • Feedback on any other aspect of the project you see fit is much appreciated.

    1 comment

  • Responsive recipe page using tailwindcss

    #tailwind-css
    NunoJDMachado•120
    Submitted about 1 month ago

    I would like some feedback on points 1 and 2 above. Although I managed something I'm not sure if there is a better approach.

    Also some feedback about the semantic tags would be helpful. I seem to be abusing <section> a lot. I thought about <article>, but these aren't really articles? dunno

    2 comments

  • Social links card using tailwindcss

    #tailwind-css
    NunoJDMachado•120
    Submitted about 1 month ago

    I'd like to know whether the use of <address> is appropriate for this case and also if I should have an <ul> and wrap the <a>'s with <li> tags the way I did. It was tricky because then the clickable part of the button was only the <a> portion so I had to set the display to block. Not sure if this is a good practice or if I should just keep it simple with a <div> and <a>'s inside.

    1 comment

  • Card with images and hover state using tailwindcss

    #tailwind-css
    NunoJDMachado•120
    Submitted about 1 month ago

    Not sure if I should be using a fixed width for the card or if the image should have a width too or some responsive css?

    1 comment

  • QR code card using tailwindcss

    #tailwind-css
    NunoJDMachado•120
    Submitted about 1 month ago
    • I would like to know whether this approach of using fixed widths is valid. I just tried to eyeball the width of the card from the design screenshot and typed some width in pixels. Upon testing it seems to be working on all screen sizes, but surely there must be a more optimal way? Is there a better practice like using min width, percentages or something?
    1 comment