All solutions

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

I am proud that I was able to complete a Junior challenge. All of the completed challenges before this one have been Newbie level challenges.

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

I had some challenges with properties on the default desktop view interfering with the mobile layout. To fix this, I put all of my desktop properties in a media query to have them only activate at a certain viewport width.

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

I struggled with aligning the avatar images next to the two blocks of text, and ended up just using a margin to do it. I tried giving the img elements display: inline-block and vertical-align: middle but they didn't move at all.

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

n/a

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

I had challenges with aligning the two cards on the far left and right sides of the screen, but in the end I used transform:translate to align them correctly.

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

Was the method that I used to align the left and right cards viable? Was there a better option? It feels kind of hacky.

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

I didn't struggle nearly as much as I thought I would when I had to transition from the mobile layout (which uses block-level elements) to the desktop layout (which uses a grid layout), and so in that regard, I am pretty proud of myself.

I struggled a bit with keeping my CSS code clean and minimal and trying not to write any unnecessary duplicate selectors in my media query that controls the desktop layout.

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

I struggled a bit when I initially started working on the desktop layout because elements were all over the screen haha, but once I gave the wrap class display: grid everything seemed a little more formatted and easier to work with.

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

Is there any way I could make my CSS code a little smaller while keeping it easy to read? I feel as though 90 lines for a project of this size is quite a bit.

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

I feel like I'm getting better at writing less bloated code.

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

I had some issues with the sizing of margins and padding on certain elements because I was using px, but came to find that if I used em units it would make my design appear more consistently sized.

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

I feel like the avatar image at the bottom of the card is not aligned horizontally with the text, and I'm not sure how to fix that. I've set the img element to have vertical-align: middle; but I'm not sure what else to do other than that.

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

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

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

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

What am I most proud of? I used my intuition to decide on using a grid layout for structuring the buttons. This is probably a really common practice in the workplace but it was my first time correctly using a grid layout. I also wrote some JavaScript in this project without the help of anyone else, which is something new to me because I'm very new to JavaScript.

What would I do differently next time? I think next time I would use input tags with a type of radio instead of button tags to create the clickable elements for selecting a rating. This might have solved a few issues I was running into while attempting to make the button tag function as a radio.

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

Question. For a project like this, would it have been more optimal to create two different states on the same page and use CSS to hide or show those two different states - or would it have been more ideal to create two separate HTML pages with one state each?

I chose the former method, but I'm curious what other people would have done and why!

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

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

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

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

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

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