All solutions

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

This one was not very challenging. I think got my solution to be reasonably close to the design.

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

Using my custom image, I had to ensure that its aspect ratio was 1:1, otherwise there were weird cropping issues. I'm wondering if there is a better way to make a circular avatar from images that do not have an aspect ratio of 1:1. I was not able to get the padding 100% right. It seemed like the desktop version had more padding than the mobile version. I tried to make it responsive and get the padding right at both sizes, and while I was able to make it responsive, I was not able to get the right padding values at the mobile and desktop sizes.

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

• Could the social links be organized using an unordered list `` for better semantic structure, considering these are grouped links?

• Would display: grid have been a better choice for styling the social links card?

• Is the use of vh units in the padding (clamp(1.5rem, 3.5vh, 2.5rem)) appropriate for providing smooth responsiveness on all screen sizes? Would an alternative unit like vw provide better consistency?

• Are the focus states (outline: 3px solid var(--clr-text-secondary)) on links clear and distinguishable enough for keyboard users?

• Should the focus state be visually different from the hover state to better distinguish between mouse and keyboard interactions?

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

This one wasn't super challenging. I am just proud that I got my solution to be reasonably close to the design.

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

The main challenge in this one was getting the font sizes to be responsive without media queries. I ended up using the clamp() function to achieve responsive typography and card sizing.

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

1. While clamp() seemed to work well in this case for implementing responsive typography and layout, I would like to explore additional techniques for handling responsiveness. I would appreciate feedback on how to better handle extreme screen sizes (both small and large) and ensure that the design remains visually appealing across all devices.
2. While I tried my best to ensure the project was semantically structured and included basic accessibility features (like alt attributes), there’s always room for improvement. I’d like feedback on how to improve the accessibility of my card component, particularly for users who rely on screen readers or keyboard navigation.
3. Although the typography is responsive, fine-tuning font sizes, line heights, and spacing for optimal readability can be tricky. I’m seeking feedback on how to fine-tune typography and spacing for better readability and visual hierarchy across different devices.
4. I'd like feedback on my uses of grid on the blog preview card itself to control the layout of its child elements.
5. I'd like feedback on my use of flexbox for the author element.

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

I was able to get the component to look pretty similar to the design.

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

The main challenge with this one was making sure the image was an appropriate size and was not overflowing its container. Setting the image to block display and giving it a max-width of 100% took care of the sizing issues. Using auto margins for the image made sure it was centered.

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

1. I would like feedback on the choice of my html elements and structure. Specifically, I would like to know if I chose the correct semantic elements.

2. In order to center the component in the body, I had to add this css rule:

   html, body {
       height: 100%;
   }
   

   I am not sure why I had to do this, even when I made the body display: flex and used center for justify-content and align-items.

3. Was it appropriate to give the body a flex display to center the component?

4. Did I properly size the component?