All solutions

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

I managed to use transitions for hovering the cards, BEM notation and also a layout for tablet view.

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

It was difficult to make the layout for the desktop design. I used to CSS Grid Garden resource that was provided in the learning path to get familiar with grid properties. Then I could easily implement the layout.

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

This is my first project where I used Block Element Modifier (BEM) convention and Mobile-first workflow. In my opinion, the project was too small for experience the benefits of BEM but it was a good opportunity to get familiar with the concept.

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

In desktop view at the bottom of the image I could see 4pixels of the background. After some research I managed to resolve it by setting the display to block. Moreover, previously I followed desktop-workflow and now it was more difficult to do the other way around, especially the alignment of the screen sizes.

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

I learnt how to use ::marker pseudo-element for styling list items and :not, :last-child pseudo-classes. During the development I gained experience using tables and customizing their style. At the end it was inconvinient to meet the requirements of responsiveness for mobile view because of the image of the recipe. Probably in my next project I will work with mobile-first workflow.

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

At the end it was inconvinient to meet the requirements of responsiveness for mobile view. The reason for that is the recipe-image in mobile view fills up the entire space till the end of the top part of the screen. I set a 2.4rem padding on the article which was perfect for the desktop view. However, in mobile view it's a problem for the image. I don't think I did a nice solution for the mobile view but I solved it by adding a wrapper div for the image and set padding for every section.

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

Is there a best practice for the recipe image's responsiveness? I mean mobile view full (top) screen and desktop view (with padding).

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

I'm most proud of that simple transition that I've used for the links because it was the first time I applied transition.

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

At first I wanted to use buttons instead of anchors. After some trying and searching on the internet I realized that it's better if I use anchors. (ofc because they are for links)

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

I'm happy that I used semantic HTML5 in my solution whether I'm not a 100% sure that I used it at the best. Moreover, I learnt that the max-width css property can have fit-content value which can be useful for my future projects. Maybe next time it would be nice to try out the mobile design first approach.

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

I didn't know how to make the learning category tag's background properly. After research on the internet I found the fit-content value.

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

I used semantic HTML5 markup, however I'm not sure in my solution. Would it be better to include the blog-image in the content section?

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

I'm most proud of that I could make a pixel-perfect solution based on the Figma design files.

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

I had problem with setting the width of the component because I used the default box-sizing. After some research I realized that it's better to use border-box value for the box-sizing attribute.