All solutions

What challenges did you encounter, and how did you overcome them?

Creating Equal-Width Flexbox Children

I learned that to make flexbox children have equal widths, using the shorthand flex: 1 1 50% is effective. Initially, I thought that simply using flex: 1 would suffice, as it sets flex-basis: 0% and flex-grow: 1, which should theoretically give each element equal width. However, when rendered, the image section ended up being 268px (44.67%), while the content section was 332px (55.33%), instead of both being 300px. This taught me that specifying the correct flex-basis (e.g., 50%) is crucial for achieving the desired equal-width layout when working with image.

What are you most proud of, and what would you do differently next time?

• Design tokens with CSS properties
• Using calc and rem for responsiveness
• Using clamp function for fluid typography

What challenges did you encounter, and how did you overcome them?

Using clamp function and calculating preferred value. Determine those value so it starts changing font-size when viewport width start at 360px and end at 840px

What specific areas of your project would you like help with?

I still find it hard to identify use cases for fluid typography beyond achieving responsive font sizes without the complexity of media queries.

What are you most proud of, and what would you do differently next time?

• Design tokens with CSS properties
• Using calc and rem for responsiveness

What challenges did you encounter, and how did you overcome them?

• Achieving Pixel-Perfect Design
  • Using the Pixel Perfect extension helped significantly.
• Ensuring Website Responsiveness
  • I used appropriate rem values for sizing elements, which ensures scalability based on the root font size.

What specific areas of your project would you like help with?

Would love some overall feedback on any areas where I can improve.