Skip to content
OverviewSolutions
7
Comments
6
Sunay Dagar
@suzzy-dszy

All comments

  • Srishti Chaudhary•170
    @itsmesrishtiSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Completing the project.

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

    There weren't really any challenges as I did the grid game recommended previously before starting the project so solution was pretty straightforward.

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

    I still struggle with using clamp(). I wanted to use clamp to position the background single quote but couldn't figure out correct clamp values so just went with one value that works for the desktop.

    Testimonials Grid

    1
    Sunay Dagar•120
    @suzzy-dszyPosted about 2 months ago

    -Your solution closely resembles the required design and scales responsively too so props to you 💯

    • Semantics are well implemented and your code is well structured and organized. -Great job overall.
    0
  • Marco•320
    @marcoberdianoSubmitted over 2 years ago

    Nice project! And this was my last newbie project :) Junior here i come ;)

    Four Card

    1
    Sunay Dagar•120
    @suzzy-dszyPosted about 2 months ago
    • Hey there, your solution looks really good and closely matches the required layout.
    • I would like to point out that; the gap size could be increased slightly, if you pay really close attention to each individual card, they have a very faint box-shadow effect applied to them. -You can use the following code to apply the effect: box-shadow: <x-offset> <y-offset> <blur-radius> hsla(<hue>, <saturation>, <lightness>,<opacity>);
    0
  • Chilufya•30
    @cmmutaleSubmitted 3 months 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
    Sunay Dagar•120
    @suzzy-dszyPosted 2 months 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•170
    @RogerTito455Submitted 3 months 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
    Sunay Dagar•120
    @suzzy-dszyPosted 3 months 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
  • Sunay Dagar•120
    @suzzy-dszyPosted 3 months ago
    • Well made, but could be modified to fit the screen better to better resemble the goal image.
    Marked as helpful
    1
  • Shayy•10
    @darkshayySubmitted 4 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
    Sunay Dagar•120
    @suzzy-dszyPosted 4 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