Skip to content
OverviewSolutions
12
Comments
9
P

cookie-monster01

@cookie-monster01220 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Meet Landing Challenge with CSS Grid and Flexbox

    P
    cookie-monster01•220
    Submitted 4 months ago

    • The footer background is not the same color as the design, the cyan background seems a lot darker. How could I reach the same result?

    • Is there any way to avoid media-queries on changing margins and padding? Or size of the images? I tried to use min() and calc() but did not get me the right results. So I used media-queries.

    • How else could improve my code?

    2 comments

  • Testimonial Section using CSS Grid

    P
    cookie-monster01•220
    Submitted 4 months ago

    I'm still very confused on how to use h1, when the project is either a section or just a card.

    • As per my understanding, and from previous feedback: h1 should be used as a main-heading of the whole page.

    I usually write under and hide it, is this a right practice?

    • I got a new suggestion to change my tags to in the previous project. [Previous project code: https://github.com/cookie-monster01/four-card].

    Could someone please guide me on this?

    Also, please let me know how I could improve my solution. Thank you.

    1 comment

  • Four card feature section using CSS grid

    P
    cookie-monster01•220
    Submitted 4 months ago

    • I couldn't adjust the icon size (.card__img) without using media-queries. I tried using width (89.07% ) and max-width (64px), then I also tried applying min-width (57px) with either width (100%) or max-width (64px). Can someone please help understand why it might not have worked and how could i solve this?

    • Could someone please explain why when I reduce the margin between two cards, the size of the cards reduces as well?

    2 comments

  • Order summary card using positioning

    P
    cookie-monster01•220
    Submitted 5 months ago

    I tried to use relative positioning on the card at first, but it did not work as per the design. While, the absolute positioning worked better, it hid the footer behind the card.

    It would be super helpful if someone could help me with an alternate solution or guide me on how i could improve the current solution, while maintaining the absolute positioning on card. Thank you.

    1 comment

  • Product preview card with flexbox and grid

    P
    cookie-monster01•220
    Submitted 5 months ago

    All kinds of feedback and different approaches to the solution would be helpful. Thank you.

    2 comments

  • Recipe Page focusing semantic HTML

    P
    cookie-monster01•220
    Submitted 5 months ago

    Any feedback on how I could improve the solution would be great.

    0 comments
View more solutions

Latest comments

  • P
    cookie-monster01•220
    @cookie-monster01

    Hi, I would like to suggest a few things.

    • Its better to work mobile-first.
    • You could use object-position, instead applying margins in negative on right-main-image and left-main-image.
    • Use padding on buttons instead of width and height.
    • Use rem and ems for margins and padding as they are responsive units, use px on anything that is to be set fixed.
    • Font-sizes should be written in rems, you can use clamp() for responsive font-sizes.

    Hope this is helpful. :)

  • P
    cookie-monster01•220
    @cookie-monster01

    Hey, I'm writing to you as a part of peer review:

    • use rem or em unit for margin, padding and font-sizes as they are responsive units while px is a fixed unit.

    • I applied position of absolute on pattern-quotation image, maybe you could try that, on your page it is not visible.

  • P
    cookie-monster01•220
    @cookie-monster01

    Hey, it was smart of you to use margin-left: auto on the card__img. I applied grid on the card to align the image as required. I will try to remember this next time.

    You could adjust the spacing between cards by applying place-self on .card__item.

    Marked as helpful
  • P
    Dias•140
    @adambeckercodes
    What are you most proud of, and what would you do differently next time?

    I’m most proud of the responsiveness of my project and how closely my solution resembles the original design. It feels rewarding to achieve a polished and accurate result while maintaining clean and reusable code.

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

    The mobile-first approach was new to me, as I usually start with the desktop version. It required a shift in thinking to prioritize small screen layouts first. I overcame this by structuring my media queries logically and testing frequently to ensure the layout adapted well as screen sizes increased.

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

    I would love to hear any suggestions on:

    1. Further refining the layout for larger screens.
    2. Adding subtle interactivity or animations to enhance the user experience.
    3. Improving accessibility, especially for screen reader users.

    Responsive Product Preview Card

    1
    P
    cookie-monster01•220
    @cookie-monster01

    Hi, your code looks nice. From previous card challenges I learnt that <h1> doesn't go as a heading for a card, as it is said to be the main heading for a page. So you could use <h2> instead. And in your code you have mentioned <h2> before <h1>, it should be the other way round.

    Also, interesting approach to use <span> on price and on <button>. You could you use <s> for strikethrough on $169.99.

    Marked as helpful
  • P
    Emina Hadžić•60
    @eminahadzicc
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge for me was getting the page to have no background when viewed on mobile. With some research I was able to get it there.

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

    Open to all kinds of feedback. Mostly if code is readable and makes sense. If there are things I could improve, I would love to hear them.

    HTML CSS Recipe page

    1
    P
    cookie-monster01•220
    @cookie-monster01

    Hi, a few things that might be helpful.

    • CSS reset is super helpful to remove browser built-in styles. You can look into CSS reset by Andy Bell or by Josh W Comeau.

    • It is a best practice to use max-width of 736px, instead of width.

    • In the code below you can replace <span> with <strong>. So you don't have add styles for the same. <strong> element makes the text bold. <li><span>Beat the eggs:</span> ... </li>

    • As px is a hard coded, it is a best practice to use units such as em or rem for padding and margins. And also, rem for font-size.

    • div.line can be avoided, you could give padding and then border. I also tried using <hr> for horizontal-line but I couldn't change its thickness and color.

  • P
    cookie-monster01•220
    @cookie-monster01

    Hi, I would like to share some knowledge based on whatever I have learnt:

    1. .content - use min-height instead of height. min-height basically tells you the minimum height of an element/container, allowing it grow if required. height is restrictive/fixed to the given height, I understand that you have given it a 100vh and I wonder if it makes a difference in this case? if you or someone else can explain this?

    2. I noticed that you are giving color: var(--white) on multiple elements, if you apply it on the parent element, children will inherit the color, and same goes for the font-size. This way you can avoid repeating the code.

    Please correct me if I'm wrong.

    Marked as helpful
View more comments