Skip to content
OverviewSolutions
9
Comments
6
Jared Peters
@jrddp

All comments

  • Jared Peters•120
    @jrddp

    This is really close to the original! Nice job. I love how you used the opacity overlay to compare them, although I would get rid of it for the final version.

    For the mobile version, there appears to be a pink background on the sides when the width is large enough. This can be solved by simply setting the background of the body to white or having the recipe card take up the full screen on smaller media queries.

  • Jared Peters•120
    @jrddp

    Looks great!

    Potential improvements:

    • Increase the size of the image to match the original proportions.
    • Use 'font-bold' to make the text bold in the header and location.
    • Use 'transition-colors' on the buttons to create a smooth transition for the hover effect.
  • P
    Karsten Løgstrup•170
    @logstrup78
    What are you most proud of, and what would you do differently next time?

    I dont know what im most proud of. Maybe that it is one of the first with Tailwind

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

    Remembering all the tailwind shorts

    Social links

    #tailwind-css
    1
    Jared Peters•120
    @jrddp

    Tailwind is awesome!

    I suggest putting all of the buttons together in a div for easier styling control and better organization. Then, instead of using py-2 to space elements, you can use "gap-y-2" which will automatically add spacing between the elements without having it affect the top or bottom padding.

  • Jared Peters•120
    @jrddp

    If you want to align the secondcontainer, add these to the maincontainer in your CSS:

    • justify-content: center;
    • height: 100vh;

    This will set the maincontainer to take up the full screen and then center the inner items on the y-axis.

    Also, the button colors are grey 700 in the style guide. It seems like every color they use is always one of the ones in the style-guide.md file.

    Nice work 😁

  • Jared Peters•120
    @jrddp

    I used this as a reference to figure out how I could have have styled the ordered list. This looks very close to the original! The code also sufficiently uses semantic elements. Nice job!

  • Jared Peters•120
    @jrddp
    • use a <main> tag instead of the outermost div to denote the main content
    • use lowercase "Slate" when extending the tailwind theme or use another name to match lowercase convention. (Using "slate" is valid it will simply override the default values)
    Marked as helpful