All comments

• 

  HANNY• 80

  @honeyjangra2309

  Submitted about 1 year ago

  Hi Guys, Any suggestions will be highly appreciated. I have used a mixture of tailwind and custom css.

  

  Newsletter sign-up form with success message

  1

  20

  

  Brian Nelson• 150

  @briannelson95

  Posted about 1 year ago

  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);
  }
  

  0
• 

  João Magalhães• 50

  @jnhm281

  Submitted about 1 year ago

  Exercice 02_Product preview card component /Testing the basics with SASS Flex and Responsive.

  

  02_Product preview card component_SASS/Flex/Responsive

  1

  20

  

  Brian Nelson• 150

  @briannelson95

  Posted about 1 year ago

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

  Marked as helpful

  0
• 

  Younes Makhlouf• 50

  @YounesMakhlouf

  Submitted about 1 year ago

  I'm new to Tailwind CSS. Please don't hesitate to tell me what could be improved. Any feedback would be very appreciated and helpful. Thank youu

  

  Responsive solution using tailwind CSS and vanilla JavaScript

  1

  30

  

  Brian Nelson• 150

  @briannelson95

  Posted about 1 year ago

  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

  1
• 

  Carlos Tabangay• 80

  @RedDotz20

  Submitted about 1 year ago

  

  Interactive Rating using ReactJS + Vite

  1

  10

  

  Brian Nelson• 150

  @briannelson95

  Posted about 1 year ago

  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

  0
• 

  Sabri lamouchi• 30

  @sabriLamouchi

  Submitted over 1 year ago

  i find a difficult in the responsive page in the width

  

  Responsive summary-component using css flex-box

  1

  50

  

  Brian Nelson• 150

  @briannelson95

  Posted over 1 year ago

  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.

  1