Skip to content
OverviewSolutions
0
Comments
1
Leet Coder
@I-Nurture

All comments

  • AlexxxMasonn•100
    @AlexxxMasonn
    What are you most proud of, and what would you do differently next time?

    Most proud of: border, I was working to get the best fit for it and achieved it.

    Would do different: adding an image to the tittle tab, I was not able to make it.

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

    css flex, visited https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and had a clear guidance

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

    images within tittle tab

    HTML and CSS solution

    1
    Leet Coder•20
    @I-Nurture

    You're off to a fantastic start—well done! It’s clear you’re moving in the right direction. I went through your code and have a few ideas that might help refine it even further:

    1. Set a fixed size for the card container to keep it from expanding unnecessarily. For this particular component, max-width: 320px works well to match the design intent.

    2. Use <main> instead of a regular <div> to wrap your card. It’s a semantic HTML element and communicates to browsers (and screen readers) that this is the core content of the page.

    3. Consider using rem or em units instead of px, especially for font sizes and spacing. It makes your layout more adaptable across different screen sizes and improves accessibility.

    If you're used to working with pixels, a good shortcut is to build everything using px first, then convert it at the end using a VS Code extension like px to rem, or an online tool like cssunitconverter.

    1. Add a favicon to the browser tab by placing the following inside the <head> section:
    <link rel="icon" type="image/png" href="./images/favicon-32x32.png">

    Hope that helps — keep up the awesome work and happy coding! ✨

    Marked as helpful