Skip to content
OverviewSolutions
9
Comments
6
Csaba Hell
@hellcsaba

All comments

  • edpau•440
    @edpauSubmitted 2 months ago
    What challenges did you encounter, and how did you overcome them?

    Color Banner on each card

    Instead of using-border, I learned form @MikDra1

    • Create a Wrapper Element for Each Card: Ensure each card is positioned relatively. This allows for absolute positioning of child elements.

    • Add a Decorative Element for the Line: Inside each card, create an additional element (e.g., ``).

    • Style the Decorative Element:

      • Set the position to absolute.
      • Apply the following styles:
        • height: 3px;
        • width: 100%;
        • top: 0;
        • left: 0;
        • background-color: [desired color]; (e.g., black)

    • Positioning and Sizing:

      • Ensure the card has position: relative; to serve as a reference point for the absolute positioning of the decorative element.

    • Alternative with Pseudo-Elements:

      • If preferred, use ::before or ::after pseudo-elements to create the line: 
        .card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  height: 3px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: [desired color];
}

    This approach ensures that each card has a straight line at the top, and the use of relative and absolute positioning keeps the layout organized and consistent.

    Four card feature section using Grid

    1
    Csaba Hell•140
    @hellcsabaPosted about 2 months ago

    Hi edpau,

    I really like your solution, you did a great job. Your code is clearly understandable and you used the BEM notation perfectly.

    The only difference I managed to notice compared to the design is that your card's background color is not exact the same white.

    Happy coding!😊

    1
  • Matias Altier•130
    @matiasaltierSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    This time I tried to use the measurements provided through figma, I am quite satisfied with the result and I hope you like it

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

    I would like help with the semantics of my code and more than anything ways to optimize it

    Product Preview Card - BEM

    1
    Csaba Hell•140
    @hellcsabaPosted about 2 months ago

    Hi Matias,

    Very nice solution, so close to the design! The only difference stems form the paddings. Regarding your code, it's well-structured and readable. I saw that you used rem which is great, you can also you for width, max/min-width and height, max/min-height.

    Happy coding!

    Marked as helpful
    0
  • oduwa-A•160
    @oduwa-ASubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I was proud of the formatting in the HTML, as it made the CSS portion significant easier.

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

    The image was a toughie, and I only managed to overcome it in the desktop portion by putting the image inside the container image. On mobile, I don't know how to "grow" it to fill the whole space.

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

    The text and bullet points would be good for starters, as I had no idea how to really separate them from one another and I had no idea how to leave the bullets all the way to the left. Really please rip into this whole project and lemme know everything I can fix.

    Frontend Recipe Page, kinda complete

    2
    Csaba Hell•140
    @hellcsabaPosted 2 months ago

    Hi Oduwa,

    You did a good job for the solution, it's easy to read and understand. Unfortunately I couldn't check you live solution because the website is pending. I took a look on your code and here's what I can suggest you:

    • Try to use semantic HTML whenever is possible instead of divs. Some of the semantic like main, header, footer, article, section elements. For example you can change the recipe-page div for main.
    • For the texts you can use line-height property to make it similar to the design.
    • You used the li:marker pseudo element. There you can change the font-size which results in a different size of bulletpoint.
    • If you target the list items li and change their padding-left then it will have more distance from the bulletpoints.
    • To align the bulletpoints all the way left you can manage to do it by setting the padding-left of the ol and ul elements.

    I love that you used rem values in your code. I hope I could help you. Keep up the good work!

    0
  • Csaba Hell•140
    @hellcsabaPosted 2 months ago

    Hi Forester, I like your solution, in my opinion you successfully implemented the component based on the design. It's good to see that you used font-variation-settings and semantic HTML. The only thing that I've noticed that you could use rem values instead of pixels for margin, width, height properties (as you did for the padding).

    Have a nice day! Keep up the good work!

    0
  • Csaba Hell•140
    @hellcsabaPosted 2 months ago

    Hi Mohammed, Your solved the challenge really nice! I see you paid attention for creating a responsive design. I checked your solution in more details and from my perspective I would like highlight the followings. Your code is well-structured and easy to read which is great! However, maybe you could've use more semantic HTML elements (article, section, etc.) besides the main. You missed using :hover, :active, :focus states and a different cursor.

    Overall, I think you did a great job on this challenge with minor differences. Wishes the best! Csaba

    Marked as helpful
    0
  • Kitalphar•150
    @KitalpharSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I don't really know to be honest.

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

    Initially the QR code image wasn't visible due to a small typo in the source path.

    QR Code Component using HTML & CSS

    2
    Csaba Hell•140
    @hellcsabaPosted 3 months ago

    Hey Kitalphar!

    I've just checked your solution and I really like it! Good job! Your code is structured and easy to understand. Nice that you've used custom CSS properties. The only thing that I noticed for improvement is that you've missed the shadows of the card div. Keep up the good work!

    1