All solutions

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

• Using Grid CSS and make responsive design with it.
• I won't set grid-row-template property I will let the grid items take height from its content

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

• The challenge I faced was creating a responsive grid layout that adapts well to different screen sizes. In particular, one grid item needed to span two rows on the desktop, while all items had to stack in a single column on mobile, adjusting their heights to fit the content. Additionally, the grid items had varying amounts of content, making it tricky to keep the layout balanced and aesthetically pleasing on all devices.

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

-I'd appreciate help refining the grid's responsiveness, especially when it comes to ensuring the layout remains visually appealing on a wider range of screen sizes, like large desktops or tablets. I'm also looking for advice on optimising the grid for accessibility, particularly regarding the reading order of the items when they stack in a single column on smaller screens.

-Additionally, I’d like to explore how to implement a fallback for older browsers that don’t fully support CSS Grid, ensuring a seamless user experience across different browsers.

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

• Using grid CSS layout and use it to implement responsiveness to mobile and tablet.

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

• Implementing grid CSS to desktop, tablet and mobile
• Take a quick look at its explanation in css-tricks website

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

• determine which breakpoints I should work on in media queries.

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

• learning how to use clamp() function for font size to implement fluid typography
• learning how to use element in HTML to use more than image with different sizes

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

• implementing responsive for mobile screen devices
• I use media queries to achieve this

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

• Implementing responsive for Tablets, I didn't know if I should use the desktop layout or mobile layout (making photo above card content like mobile)

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

• Organization of CSS file
• Use reusable classes and components

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

• Making horizontal lines between card sections and the nutrition table
• At first, I made it with html element then discovered that it had pre-defined styles that I didn't remove, so I decided to make a border-bottom for each section inside the card and it works.
• For the nutrition table I used element and gave every display flex then divided it into two parts every part with width:50%

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

• responsive on different screen sizes

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

• organization of the code
• using semantic HTML

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

• make "ul" element take the 100% of the card using max-width
• I used the width property instead of max-width

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

• adjust spaces between text and other elements

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

• learning how to use local hosting fonts
• learning how to use box-shadow and what's every value in box-shadow property refers to

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

• using local host font "figtree" asking chat GPT how to set up a local host font

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

• dealing with responsive screens