Bn-Bushra

Latest comments

• 

  weixin•110

  @twx0504Submitted about 1 year ago

  

  Mobile First Approach using Flex and relative units.

  2

  30
  

  Bn-Bushra•290

  @Bn-BushraPosted about 1 year ago

  Congrats on finishing this challenge. Here are my suggestions.

  Styling Challenges:

  1. Vertical and Horizontal Centering:

     • You've already used transform: translate(-50%, -50%) for vertical and horizontal centering, which is good.
     • Consider using flexbox for centering as well. It provides a cleaner and more flexible approach.

  2. Responsive Design:

     • Instead of fixed heights like height: 80dvh;, consider using relative units or media queries for better responsiveness.

  3. Width and Height Decisions:

     • Use relative units like percentages or viewport units for widths and heights to make your design more adaptable to different screen sizes.

  4. Overflow Issues:

     • Instead of setting a fixed height for the main container, consider letting it adjust based on its content. You can remove height: 80dvh;.

  5. Splitting CSS Code:

     • Your code is relatively short, but if it grows, you may consider splitting it into logical sections or using a preprocessor like Sass for better organization.

  6. Transition Duration:

     • Consider using a shorter transition duration for a more responsive feel, depending on your design preferences.

  7. Font Sizing and Units:

  • The use of rem for font size is a good practice as it allows for easier scalability. However, ensure that your layout remains readable on various screen sizes.

  8. Border Radius:

  • You've commented out the border-radius property in the main container. If you intended to use it, consider uncommenting and adjusting it based on your design preferences.

  9. Comments:

  • Your code has helpful comments, which is great for understanding your thought process. Keep it up!

  Example Adjustments:

  /* Centering with Flexbox */
  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* ... other styles ... */
  }
  
  /* Responsive Design */
  main {
    width: 90%; /* Adjust as needed */
  }
  
  /* Remove Fixed Height */
  main {
    /* height: 80dvh; */
  }
  
  /* Shorter Transition Duration */
  p, main:hover, .illustration:hover, .yellow-tag:hover, .avatar-picture:hover {
    transition: transform 0.3s;
  }
  

  Marked as helpful

  0
• 

  Beyza Arslan•30

  @beyzarslannSubmitted over 1 year ago

  

  qr code component with tailwind

  #tailwind-css

  2

  90
  

  Bn-Bushra•290

  @Bn-BushraPosted over 1 year ago

  Well done These are things I think you should note in this solution:

  • Removing the attributions before submission.
  • Editing the template README before pushing to GitHub.
  • I feel the project is pretty basic for the tailwind framework. Good understanding and use of CSS will make the usage of such framework a work over, and makes us better understand how it works.
  • Just structure the elements semantically as possible and make the class names descriptive as possible.
  • So that you will be able to add styles to the target elements easily.

  Marked as helpful

  1