Skip to content
OverviewSolutions
6
Comments
6

NunoJDMachado

@NunoJDMachado100 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Responsive four card layout using tailwindcss

    #tailwind-css
    NunoJDMachado•100
    Submitted 3 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•100
    Submitted 4 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•100
    Submitted 8 days 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

    1 comment

  • Social links card using tailwindcss

    #tailwind-css
    NunoJDMachado•100
    Submitted 10 days 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•100
    Submitted 11 days 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•100
    Submitted 12 days 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

Latest comments

  • NunoJDMachado•100
    @NunoJDMachadoPosted 1 day ago

    It's looking great, good job! Things I would improve:

    • Place the google fonts @import at the top of the document, as per the tailwind docs (https://tailwindcss.com/docs/font-family). You can see in the dev tools console there is a warning about it.
    • Consider making the main heading an h1 tag.
    • Use border classes to make the coloured line at the top of each card instead of a div element.

    I especially liked that you created custom css classes for the repetitive tailwind classes you wanted to apply in many elements.

    Marked as helpful
    0
  • Ammar•60
    @TruAmakkuSubmitted 5 days ago
    What challenges did you encounter, and how did you overcome them?

    had responsive issued because i used grid wrong also switching h-screen to min-h-screen fixed an issue in the mobile version where i couldnt surround my div with margin.

    perfume

    #tailwind-css
    1
    NunoJDMachado•100
    @NunoJDMachadoPosted 4 days ago

    There is a mobile version of the image provided with the project resources which better fits the mobile layout.

    You should try to implement it dynamically so that it replaces the desktop version when the user screen width matches the mobile breakpoint.

    Good luck!

    0
  • P
    BlonoBuccellati•60
    @BlonoBuccellatiSubmitted 9 days ago
    What are you most proud of, and what would you do differently next time?

    In the past, I wasn’t able to implement styling that wasn’t part of the previous assignments. I believe I have learned quite a few new techniques this time. However, I still feel that the styling isn’t quite appropriate, so I hope to be able to apply more suitable styling in the future.

    What challenges did you encounter, and how did you overcome them?

    Since we couldn't style the list markers directly, we addressed it by using the ::before pseudo-element for the ul tags and a span tag for the ol tags.

    What specific areas of your project would you like help with?

    If you know any best practices for styling list markers, I would appreciate your insights.

    In this project, we needed to style list markers, but since we couldn’t style the list markers directly, we handled it by using the ::before pseudo-element for ul tags and a span tag for ol tags.

    Is this styling approach appropriate? And if there is a more suitable method, please let me know.

    If you have any insights, I would greatly appreciate it.

    Recipe page using tailwindcss, next.js, flexbox

    #next#react#tailwind-css
    1
    NunoJDMachado•100
    @NunoJDMachadoPosted 8 days ago

    It's looking good overall. Just need to work on the image which I think is the most glaring issue. If you compare with the design screenshot you'll see it is being squished/distorted. Also visibile if you resize the window to test for responsiveness. I would avoid any fixed widths/heights for the image and just let it adapt to the container size.

    As for colouring the list markers, what worked for me was to give the whole <li> the colour I wanted the marker to be, and then inside them create <span> or <div> elements to style the text colour.

    0
  • NunoJDMachado•100
    @NunoJDMachadoPosted 10 days ago

    The font family is not being applied correctly. You should use the @theme directive in the input.css file. Here is an example from the tailwind docs:

    @import "tailwindcss";
@theme {
  --font-roboto: "Roboto", sans-serif; 
}
    0
  • NunoJDMachado•100
    @NunoJDMachadoPosted 11 days ago

    Perhaps you should have an <h1> inside the <a> for semantic html purposes.

    0
  • P
    Amine•130
    @amine-can-codeSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of having published something on my GitHub account for the first time, applying the skills I've acquired from a recent Tailwind CSS course. This experience highlights that there is always room for improvement, regardless of one's expertise level. One area I could enhance is memorizing Tailwind CSS utility classes to reduce frequent checks of the documentation. However, I recognize that this proficiency will naturally improve with continued practice and application in my projects.

    QR Code Component

    #tailwind-css
    1
    NunoJDMachado•100
    @NunoJDMachadoPosted 12 days ago

    You should add node_modules to .gitignore. When someone clones your project, they will run npm install which will read the contents of the package.json file and so end up with the same node_modules folder as a result.

    Marked as helpful
    0