All solutions

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

There were some minor difficulties with positioning the cards, aligning them to the grid, and achieving the desired appearance. I had to review the styles several times and adapt them for different screen sizes to ensure the cards looked neat and even. Despite the challenges, this experience helped me better understand the nuances of responsive layout.

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

I encountered some difficulties arranging the cards in the desktop version.

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

During the layout process, I encountered difficulties with the images. Initially, I struggled to set up the images so that they would rearrange depending on the screen, whether it was for the desktop or mobile version. Later, once I figured it out, I needed to remove the padding for the images. When reviewing my images on different screens, I noticed that the desktop version was not behaving correctly. I spent a long time searching for a solution, and after applying the following properties: display: block; max-width: 100%; height: 100%; object-fit: cover;, everything worked correctly.

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

While developing the recipe page, I encountered a difficulty. namely, the correct display of the recipe image in the mobile version so that it occupies the entire width of the screen without unnecessary indents. There were also difficulties with centering the section-attribution block so that it is located exactly in the center on all devices.

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

Responsive design — I used relative units like rem to make the project adaptable to different screen sizes. Custom fonts — The project uses custom fonts loaded with the @font-face rule. BEM methodology — I applied the BEM (Block, Element, Modifier) naming convention for CSS classes to improve code maintainability. Tags: Responsive design Custom fonts BEM methodology