All solutions

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

For the nutrition section below, I struggled to get it right, and it still isn't that good. Maybe it's because I didn't use a grid. I always use flexbox for everything.

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

For the nutrition section below, I struggled to get it right, and it still isn't that good. Maybe it's because I didn't use a grid. I always use flexbox for everything.

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

Throughout the project, I performed well overall, but I faced a challenge with the social media buttons. Initially, I used flexbox, which resulted in an imbalance with the buttons—some were larger and some smaller, differing by a few pixels. This issue arose because labels like 'GitHub' have 6 characters, while 'Frontend Mentor' has 14, causing the buttons to have varying widths. To address this, I switched to using CSS Grid. Although I'm not very familiar with Grid, I created 5 separate divs, and in the end, I achieved the desired result. I’m not sure if I used Grid in the best way, but it worked.😅

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

I encountered the challenge of not correct the discount line in front of it, making it impossible to get it right for me. Additionally, I struggled to find the appropriate font family for the 'perfume' label spacing.

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

box-shadow ...

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

I would like help with optimizing the centering techniques using Flexbox. While I managed to center the QR code component and its accompanying text, it took a lot of trial and error to get it right. I believe there might be more efficient or effective ways to achieve the same result.

Additionally, I would appreciate guidance on improving the responsiveness of the design. Ensuring that the layout looks great on various screen sizes and devices is always a challenge, and any tips on best practices for responsive design using Flexbox would be incredibly helpful.

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

none

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

Alot

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

I would appreciate help with adding a background image to the body element. Despite using various properties, I was unable to achieve this. Additionally, I struggled to add a border radius to only the upper part of the image and found it very difficult to center everything. Any advice would be greatly appreciated. like i'm beginner si this was veru tough project i ever done, i only use flex box maybe thats why

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

I'm proud because when I see junior challenges, I can handle them even if they're a bit easy. As a beginner, it might take me a bit more time, but I'm getting there.

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

I faced the challenge of centering the profile image, and it was also hard to center the text for likes, followers, and posts.

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

centering the img/ the bottom text/

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

Proud of: I am most proud of successfully centering the QR code component using Flexbox. It was a challenging task to ensure that the component was perfectly centered both vertically and horizontally within the viewport. By experimenting with various Flexbox properties and margin settings, I was able to achieve a clean, centered layout that looks great on different screen sizes.

Do differently next time: Next time, I would focus on improving my understanding of CSS Grid in addition to Flexbox. While Flexbox worked well for this project, CSS Grid could offer more flexibility and control for more complex layouts. I would also invest more time in refining the responsiveness of the design, ensuring that it not only looks good on different devices but also maintains optimal performance.

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

One of the main challenges I encountered was centering the QR code component along with its accompanying text. Initially, I used a single main div to center everything, but this approach inadvertently centered both the image and text together, which wasn't the desired outcome.

To overcome this, I realized that separating the image and text into different div elements would give me better control over their individual alignment. I then used a main div to apply Flexbox properties, ensuring that the overall container was centered within the viewport. By nesting the individual div elements for the image and text within this main div, I could apply specific styling and alignment rules to each part independently. This allowed me to achieve a more precise and visually appealing layout.

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

I would like help with optimizing the centering techniques using Flexbox. While I managed to center the QR code component and its accompanying text, it took a lot of trial and error to get it right. I believe there might be more efficient or effective ways to achieve the same result.

Additionally, I would appreciate guidance on improving the responsiveness of the design. Ensuring that the layout looks great on various screen sizes and devices is always a challenge, and any tips on best practices for responsive design using Flexbox would be incredibly helpful.