All solutions

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

Getting the colored highlight at the was more difficult than anticipated, but I managed to create that look by using pseudo-elements. I also used data-values to change the colors of them. Since I wasn't sure what box-shadow color was used in the template I decided to also use the data-value for the color. I think it came out good!

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

What I wrote in the previous section pretty much, pseudo elements are pretty useful I guess!

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

I decided to use clamp() for setting my header font-sizes, but it took a lot of tweaking to get right. I think I don't quite understand how to use clamp() yet, maybe someone can explain some best practices!

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

I think I did a good job starting from the mobile design and adjusting the desktop design afterwards. I did this layout with flex, but I think grid would have made things a bit easier when swapping from mobile to desktop.

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

I had a huge space at the bottom of the product information when on desktop, I bandaid fixed that by adjusting the flex-gap, but again, using grid would probably have solved this more elegantly. In general the spacing was quite weird to get right, in the end I didn't really bother to make things pixel perfect, especially because I wasn't working with a figma file.

I had some issue with the button shopping cart picture, but I managed to solve that using a pseudoelement. The problem that persisted was that it wasn't really centered, but I found out that you could use the image as a background instead of putting it in the content of the pseudoelement, that way it became centered.

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

Is it possible to use flex to fill up the right area (-> the product information) dynamically, without having to use gap and fixed heights and eyeballing it to get it right? I know it is possible with grid, but would really like to know if it is possible with flex.

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

I figured out the layout quite fast and completed the project in a relatively short amount of time. This time I styled a lot of base elements instead of using classes, I didn't really like doing that and will for sure use classes again next time.

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

Styling the lists and tables was pretty annoying, especially with the spacing. I figured out some stuff as well, like using li::marker to only style the list markers. For the table I had to use all kinds of shenanigans like using text-indent and randomly changing padding, didn't feel very elegant. I also encountered some issues with the element in regards to changing its color, I overcame that problem by styling the border-color of it and only enabling the top border (so that the line is only 1px instead of 2px).

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

I used a utility class for my flex layout, I think it worked really well but I'd like to know if stuff can be improved. For example I put the image and the first heading + paragraph into 1 div called hero, not sure if that is optimal. Because of this I also had some issues with the mobile page, where I had to change the margins of the first heading and paragraph manually instead of just changing the image.

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

This was my first project without a figma file, but I think I managed to copy the design quite well even without it.

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

Setting the right margins in a display: flex was an issue for me, also sizing the buttons correctly. I tried to just use the gap property but it didn't really work, so I just eyeballed the margin on the different list items.

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

I want to know how to size the buttons without hardcoding them. In my solution I assigned a set value to the padding of the buttons, instead I want to know if I can just "stretch them" without assigning values.

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

Everything went well. I managed to utilize flexbox quite well I think and didn't have much trouble at all getting the layout to work. I think I was too fixated on getting things pixel perfect, especially with the font sizes and line heights.

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

I had some trouble with the author part at the bottom of the card, I was using flexbox. What worked in the end was wrapping every part (i.e. the image and the name) in a separate div, as well as wrapping these divs in one big flexbox div (i called it author in my project). By doing that I could simply position the author div and didnt have to worry about any margins or padding of the content affecting the layout.

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

The background of the small "Learning" tag below the image overlapped with the margin I put on said image. I didn't know how to fix it in a way that made the margins correct like in the figma file, so I bandaid fixed it by adding the amount of padding at the top of the "Learning" tag to the bottom margin of the image. Not too satisfied with that.

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

This thankfully went pretty smoothly! I estimated 2 hours for this Project, it took 45 min with no major hickups.

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

I tried to wrap my img with a div and use it in a flexbox context, which didn't really go well, or at least wasn't intuitiv. I decided to remove the div and use the img as one flexbox row.

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

I don't feel to confident in the way I used margins, maybe there is a better solution. I also don't know if the flexbox approach I used was correct, as in not wrapping the img in a div and just using it as is.