All comments

• 

  Chilufya• 30

  @cmmutale

  Submitted 12 days ago

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

  The responsiveness of the images. I utilized the `` to achieve the smooth transitions of images between breakpoints, without the need for additional css.

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

  There is a little shift in the right side of the card in desktop version. I reduced it by utilizing grid instead of flex.

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

  Even though I managed to reduce the shift in height of the right side of the card in desktop, the element there does not cover the entire height of the card. I assume the image has some hand in this and I am not sure how to handle it so that both grid items can have the same height.

  

  Responsive Product preview card component using CSS Grid

  1

  20

  

  Sunay Dagar• 70

  @suzzy-dszy

  Posted 9 days ago

  • Your solution closely matches what is expected great job on that, and as for the issue you have highlighted, I was having the same problem and you are right to assume that the image influences your output.

    • To have the right hand grid-items to take up more height, try using the css clamp() function in your media queries, this will allow your font to dynamically scale with the viewport width to help achieve the look that you want. You may want to read a documentation / watch a video on the property as it is a bit much to understand exactly what's happening at first.

  • If you don't mind, could you review my solution to this challenge as well? I followed a mobile first approach and when it came to achieving the required desktop looks i failed at that as my product card is really big on larger screens and alas i couldn't figure it out. Any help will be much appreciated 🙏.

  • Otherwise Good job 🙂👍.

  0
• 

  RogerTito455• 160

  @RogerTito455

  Submitted 29 days ago

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

  I am really proud of the pacience that I had doing this and how my mind think.

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

  Well, I really have a lot of problems to put the image inside the box without moving. I mean all the time image was in size that wasn't the correct

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

  I would like to know if there are other ways to make this or make it better,

  

  Simple-Omelette-Recipe Display: flex, display: block, medias.

  1

  10

  

  Sunay Dagar• 70

  @suzzy-dszy

  Posted 28 days ago

  Your solution comes close to the required design but there are some aspects which can be improved upon:

  Your solution comes close to the required design but there are some aspects which can be improved upon:

  1. Semantics: Your HTML code greatly lacks semantic elements such as main, section and footer.

     • For example, use main to wrap the entire contents within body instead of section.
     • You used the div element to define the different sections such as summary, ingredients, instructions, etc. Instead you should've used section element to define the different sections of the recipe.

  2. The left border in the table to separate the two sides puts the design out of place from what is required, however if that's your personal preference then there's no issue.

  3. If you pay close attention to the design images that are provided, you will notice that the bullet points are coloured. If you want to further improve your code to match the design you can use ::marker on the list element to do this.

  • A useful website that you can refer to is MDN WebDocs to further read up on the elements and classes that I have mentioned. Otherwise, all in all, you have done a great job. 💯

  Marked as helpful

  1
• 

  Moataz• 130

  @MoatazMohie

  Submitted about 2 months ago

  

  social links profile main using flexbox

  1

  10

  

  Sunay Dagar• 70

  @suzzy-dszy

  Posted about 1 month ago

  • Well made, but could be modified to fit the screen better to better resemble the goal image.

  0
• 

  Shayy• 10

  @darkshayy

  Submitted about 2 months ago

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

  None at this time

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

  getting used to root variables

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

  None at this time

  

  QR_Code Component

  2

  30

  

  Sunay Dagar• 70

  @suzzy-dszy

  Posted about 2 months ago

  • The solution closely resembles the required design and makes good use of semantic HTML, ensuring the code is well structured which reflects in the proper responsiveness of the site on different screen sizes.

  0