All solutions

This challenge was a nice step up in difficulty. I had two major struggles:

1. Speech bubble

• I styled the bubble itself and the triangle as absolute elements inside of the second component, this however leads to the triangle sometimes disconnecting from the bubble at certain screen sizes. Is there a better way to do this?

1. Progress bar

• The main issue here was the white circle. I struggled to get it positioned correctly, as well as maintain it's position when resizing. I ended up absolutely positioning it in relation to the parent of the inner colored progress bar. Is there a better way to do this?

Thank you for any advice!

This challenge felt like a good way to get better at using grid and exploring the grid area feature.

The project files come with a settings.json file, what is the purpose of it?

Any advice is appreciated!

Any feedback is appreciated!

My main struggle with this challenge was the layout for the desktop page. However I ended up changing the flex order and then translating the two outer cards which worked out.

Hey!

My main concern for my solution is the background image. I used background-image with the two .svg files, but it seems a bit tricky to position them correctly so that they stay in the correct position when resizing the window. Is there a better way to do this?

Thanks for any feedback.

Hey, this challenge was fun and a bit more challenging than the others. My main question would be if there is any way to clean up my CSS? Thanks for any advice! :)

Overall I enjoyed this challenge.

I had some struggles using grid for the layout. Initially, I had set 2 grid columns, but couldn't convert these to rows using a media query, so I changed to grid-template-areas.

I also had to fiddle around with the buttons, as upon resizing the browser they wouldn't always be level with each other, so I ended up setting the container positions to relative, and setting the buttons postions to absolute. To avoid the buttons and paragraphs from overlapping, I had to set a largin margin-bottom for the p elements.

Are there better ways to deal with these issues? Does my solution go against best-practice?

Any feedback is much appreciated!

Hey, I enjoyed this challenge, but have a few questions.

• Is there a best practice when it comes to structuring the page? I find myself unsure when to use flexbox or grid.
• How can I recreate the original background image? It looks like a gradient layered over the .svg file, but I am unsure how to approach this.

Any advice or feedback is much appreciated, thanks!

My approach to this was first to set up the page's overall HTML structure, then style it using CSS based on the mobile view.

Any feedback appreciated!