All comments

• 

  weixin•50

  @twx0504Submitted 10 months ago

  1. What did you find difficult while building the project? As a beginner, I found styling with CSS to be particularly challenging, especially when certain styles did not render as expected. For instance, achieving horizontal or vertical centering of elements proved difficult, leading me to experiment with various solutions found on platforms like YouTube.Working on responsive design poses a challenge when resizing the screen using dev tools, as maintaining the design's integrity becomes difficult. It tends to deform and look ugly.
  2. I am uncertain about specifying width and height in my project. I struggle with deciding when to set them and which units to use—whether in pixels, rems, percentages, or viewport units. In some instances, modifying these properties produced the desired changes, while in others, it didn't. How can I navigate these issues effectively? Additionally, I've encountered issues with overflowing content when the screen size becomes smaller. Both images and text tend to extend beyond the container boundaries. To address this, I've been using overflow: hidden or overflow: scroll. However, I'm uncertain whether this is a recommended solution or if there are better practices for handling such overflow concerns.
  3. I would like to know if it is advisable to split CSS code into different .css files. Sometimes, the code becomes extremely long and challenging to locate. Is this a good practice? Thank you

  

  Mobile First Approach using Flex and relative units.

  2

  30
  

  Bn-Bushra•290

  @Bn-BushraPosted 10 months 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 10 months ago

  While writing this code, I had the most difficulty in the size adjustment and responsive parts.

  

  qr code component with tailwind

  2

  90
  

  Bn-Bushra•290

  @Bn-BushraPosted 10 months 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