What challenges did you encounter, and how did you overcome them?
When resizing the window, instead of having the hero images resize, I made them behave like in the Figma design, where they stay the same size and are evenly cropped from both the left and right sides. I used flexbox to ensure that the hero images disappear equally on both sides as the window is resized.
But I have to wrap the hero content in an extra div for better control. Please kindly comment on my approach, is there anything I can do better?
What are you most proud of, and what would you do differently next time?
I used grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); and grid-auto-rows: auto; to achieve a smoother transition between mobile and desktop views. This approach allowed the grid items to resize dynamically, providing a more responsive and flexible layout.
What challenges did you encounter, and how did you overcome them?
The only little challenge was ensuring that the grid layout maintained a clean and responsive design across different screen sizes.
What specific areas of your project would you like help with?
I would like to get general feedback on whether there are better solutions for this type of layout. I'm curious to know if I made any mistakes or if there are more efficient approaches to achieve the same result. Any suggestions for improving the structure, responsiveness, or overall code quality are welcome.
Excellent work, nice and smooth layout, very good semantics with use of minwidth, rem, gap. You could add the svg quot in the violet testimony (with a bg-img and bg-position)
Very good result, I would recommend using grid to avoid having so many complications with the positioning of the cards, creating 3 template grid and aligning the elements to the center you can achieve it
What are you most proud of, and what would you do differently next time?
Minha primeira tentativa usando a metodologia mobile-first completada com sucesso. Melhoriaria alguns erros e tentaria deixar o código mais limpo.
What challenges did you encounter, and how did you overcome them?
Tive muita dificuldade de começar criando o layout para mobile, tive problemas com flex-box com relação a vh e %, algo que eu tenho dificuldade de aplicar na prática. Tentei de diversas formas contornar os erros fazendo pesquisas e pedindo feedback de um colega da área.
What specific areas of your project would you like help with?
Gostaria de saber o que devo melhorar em relação a layout, uso de % e vh em alturas e larguras dos elementos.
You got a very good result, what I would recommend is to give it a max-width with the width given in the figma files for each layout.
With that and a gap in your .section-info to give it a spacing between each element it would be practically the same
Nice result, The designs are almost the same.
If I had to recommend something, I would tell you that in the nutrition section you can make the nutritional table with <table>, take advantage of
the <caption> for the title and make rows with <tr>
What are you most proud of, and what would you do differently next time?
From first-time use of sass and gulp
What challenges did you encounter, and how did you overcome them?
I had difficulty understanding bem methodology. Further, I don't fully understand name creation and whether there are any generic templates. Similarly with sass, but somehow managed to get it all working.
What specific areas of your project would you like help with?
W zasadzie we wszystkim zaczynając od html i css, a kończąc na gulp i sass.