Skip to content
OverviewSolutions
6
Comments
5
Brian Nelson
@briannelson95

All comments

  • Brian Nelson•150
    @briannelson95

    Great job completing this challenge, one tip I have is I would try to avoid using custom css and tailwind together as in larger projects this can get really messy and confusing.

    If you do choose to stick with custom css you can use css variables to handle the colors preventing you from having to rewrite the colors.

    :root {
  --theme-dark-blue: hsl(234, 29%, 20%);
}

.heading {
  color: var(--theme-dark-blue);
}
  • Brian Nelson•150
    @briannelson95

    Great job completing this challenge! Code looks good, very clean!

    Marked as helpful
  • Brian Nelson•150
    @briannelson95

    Great job completing this challenge!

    My suggestion for using tailwind and adding custom colors to tailwind is to use the extend function in the tailwind config.

    /** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./dist/*.{html,js}"], 
    theme: {
        extend: {
            colors: {
                'rating-orange': 'hsl(25, 97%, 53%)',
                'rating-white': 'hsl(0, 0%, 100%)',
                'rating-very-dark-blue': 'hsl(216, 12%, 8%)',
                'rating-light-gray': 'hsl(217, 12%, 63%)',
                'rating-medium-gray': 'hsl(216, 12%, 54%)',
                'rating-dark-blue': 'hsl(213, 19%, 18%)',
            }
        },
    },
    }, plugins: [],
}

    This will allow you to keep all of the built in color options that tailwind comes with while still being able to add custom colors

    Marked as helpful
  • Brian Nelson•150
    @briannelson95

    Congrats on completing this challenge.

    Make sure you use the correct background color specified in the design - Very Dark Blue: hsl(216, 12%, 8%). Based on the design it also looks like the background of the card has a slight gradient to it. Even though it wasn't specified in the design you can achieve something close to the gradient by doing something like

    .ratingContainer {
	...
	background-color: linear-gradient(var(--secondary-bg-color), var(--main-bg-color));
}

    In the next challenge you should try using the colors provided in hsl format instead of converting them to hex. This will give you the exact color provided in design.

    Overall, great job!

    Marked as helpful
  • Brian Nelson•150
    @briannelson95

    Great job submitting your solution! Make sure to make use of flexbox

    .card {
  display: flex;
  justify-content: center;
  align-items: center;
}

    This should help with putting your component in the center of the page.