All solutions

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

I'm happy that I was able to approach the challenge with a clear approach. This is basically due to the experience gained from previous challenges.

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

The most difficult issue I had was center-aligning the profile pic with the name and verification to it's right. It was easier once I deployed them within a flexbox container, but I tried with limited success to do it without flexbox. Responsiveness is an issue if there's no clear direction on where media queries should be invoked, and what the screen should look like at varying widths. I overcame this by making my own mind up where it should happen.

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

Perhaps some clarity on how the screen should look at widths between the mobile and desktop designs. I'm gathering it's my own opinion at this point, but I was toying with having a different grid design at the in-between design widths. For example, a two-column grid.

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

I'm happy that I've got a fair idea of what I'm doing and how to methodically style elements. I also like that I'm using more semantic HTML, instead of divs all over the place.

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

In making the site responsive, I've learnt about clamp(), display and grid. I used a combination of flexbox and grid for alignment. Box-shadow was new to me and took time to work out, as I never knew what the effect was even called.

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

I still create spacing between an element and the element below it by using margin-bottom. It works, but I'm not sure if I should use a different method to accomplish the spacing. I'm also trying to use em and rem units more, instead of px; and I'm still not sure if I'm using them properly.

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

It was a good challenge, since I hadn't done one for a few weeks. It tends to point out all the things I don't know well. I'll research more on responsive design before the next one. I'm really looking to learn how to approach situations so I can embed my own systematic way of of solving problems in future.

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

Adding the cart icon to the button was a bit tricky. I got around this with display: inline-flex on the button element; and the (cart) tag within the button element. This worked because it center-aligned them. I had to change it in the end for responsive desktop design.

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

I'm ok with how similar the outcome is to the designs. I wasn't aiming for total perfection, just to learn how to approach the solutions. I'm trying to workout the units I should be using for responsive design rather that just hard coding px. It seemed to work out ok. This reference from Kevin Powell, seems useful: https://whatunit.com/ I didn't come across it till close to the end of my solution though.

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

Most proud of learning about list styling and how tricky it can be. Fairly happy with how well my solution resembles the design. Next time I'll be better prepared based on the experience I've gained from this challenge.

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

Styling ordered and unordered lists, and there markers. My online research first showed me I needed to remove the bullet marker and create my own to properly replicate some styles, or simply style the marker that was there. If I wasn't able to style the marker directly, then I deployed flexbox and created a marker in the html using the unicode representation. This was due to the marker not centering with the list that was wrapping to different lines.

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

The numbers for the Outfit font didn't match the design. I'm not sure why. I'm not sure the approach FEM expected me to use to style the list. The removal and recreation of bullet points using list-style-display: none; or direct styling of li::marker?

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

I'm happy with it and there isn't a need to change the way I approached it as far as I can tell. Perhaps I'll try the layout using grid if I were to do something similar.

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

I had to research how to change the quotation marks. I was able to solve this via stackoverflow.

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

I was quite comfortable with challenge.

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

The two big challenges for me were the layout design, with respect to the front card and the card behind. Also the manipulation of the SVG provided, for mobile responsiveness. I'd probably need more research about SVGs for future projects, but I still think I came very close to the design version.

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

Cropping the SVG as per mobile specification was difficult. In the end I had to manipulate the container it was in, not the properties of the SVG.

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

Is there a specific technique I should've used to crop the SVG? I feel the way I achieved it was a bit of a hack.

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

Proud of finishing; that's it's all my own input.

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

Only how to approach the designing.

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

For this challenge, I'm comfortable with what I've produced.