All solutions

I struggled with getting that quote image to be in that first card. I cannot figure it out for some reason, and the resources I used with ways to do it wouldn't work either. Would love some advice on that!

I managed to create the desktop layout as it shows, but I feel there must be a better way than the way I did it. Would love to know how some of you might've done it.

This one was pretty straightforward. I picked this one for that reason to see how efficient I've gotten with using vanilla CSS. Using no references for this one, I built the webpage in a way I feel comfortable with in regards to the design photos.

I don't really have any questions for this one, but any advice is always appreciated!

Making this responsive took a lot more thought that I expected. I struggled with the layout of the comment cards and the ratings quite a bit. After a lot of trial and error I managed to figure out using grid and flex together can work. Still not entirely sure how technically correct this is, but it seems like it works! The responsiveness isn't flawless, but a priority goal was to prevent any overlap of elements on the webpage.

The HTML and CSS checked out valid (I need to remember accessibility and add the alt="" to the images...) but I would really like to know if I used flex and grid in an efficient way. How can I use them better?

This was the first time I completed a challenge within only a few hours with little issue. A bit of a turning point in how I feel about my progress and I'm pretty excited about it.

I would like some advice how I could do this without Bootstrap. Is Bootstrap an acceptable end all framework for a project in the professional space? I feel like in Coursera it said it was good for prototyping.

Also, would appreciate any help on unnecessary code, better alternatives, or mistake fixes. Thank you!

Edit: I did have some issues 😅 I made some fixes because I didn't look at the desktop example before submitting.

I also fixed the width of the cards to look more like the design. Ran out of generations though.

I had an issue with getting the right box to overlap with the left. I was able to get it fine for the mobile view but the desktop view did not work so well.

I used this challenge as more of a learning challenge. There were new concepts in here, and I wanted to learn better practices based on a professional. I watched Kevin Powell as a guide, and it was incredibly helpful. I feel much more confident in my markup now. I learned to create a responsive webpage for mobile and desktop using flexbox and grid. Using <picture> is a great tool to add multiple img files that can be used for different screen sizes. I learned better ways of organizing elements too.

This challenge tested me quite a bit with figuring out how to make it responsive. I realize that vertical and horizontal card are the same and it depends on the width of the screen and the max-width you set. I spent quite a bit of time trying to make two separate "cubes" to put next to each other, but I learned quickly they did not maintain interaction how I intended.

I'm still struggling with bringing the contents into the center of the page. For the last challenge I was given helpful advice of removing padding and margin to utilize the flexbox potential. It worked for that one, but for this challenge I could not figure it out.

I would love some advice on that.

Edit: With some helpful advice (a reminder as well) I got it centered! Should stick in my head this time.

I'm having a hard time keeping everything directly center in the webpage. I also feel that my html isn't technically accurate and would like to hear how I can make that better.

How could I have made the content stay in the center?

What would make my markup technically accurate?