Skip to content
OverviewSolutions
21
Comments
2

Bn-Bushra

@Bn-Bushra290 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

View more solutions

Latest comments

  • Bn-Bushra•290
    @Bn-Bushra

    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.
    1. 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.
    1. 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
  • Bn-Bushra•290
    @Bn-Bushra

    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