Skip to content
OverviewSolutions
5
Comments
5
Kenisa
@KenisaRenee

All comments

  • Kenisa•90
    @KenisaReneePosted over 2 years ago

    Hi Luciano! Excellent work on finishing this solution.

    Two things to consider if you'd like to bring this a little closer to the original design.

    1. A box-shadow can be added to your <main> component. The exact code I personally used on this project was box-shadow: 0 25px 30px rgba(201, 201, 240, 0.7); but you can learn more about them from W3 Schools and come up with something of your own if you prefer.

    2. The background wave can be structured by adding the following to the body. background-image: url("./images/pattern-background-desktop.svg"); background-position: top; background-repeat: no-repeat;

    You're doing great and happy coding!

    Marked as helpful
    1
  • Alcandris•30
    @AlcandrisSubmitted over 2 years ago

    how do you measure font sizes and margins? I find it difficult to do this with a screenshot, but I'm here to practice

    Card Component using Flexbox

    2
    Kenisa•90
    @KenisaReneePosted over 2 years ago

    Hi Alcandris,

    Great work on finishing this solution!

    The style guide gives a little insight on font-size but I have yet to see any guidance on margins. I'm not sure there's a way to have exact measurements without using something like Figma or Sketch. I don't use either, so I line up my design as close to the original design as possible and do my best to guess the measurements from eyeing it when comparing side by side. Pixel perfection is impossible especially for those of us who don't have design services like Figma. The best suggestion I have is to get it "close enough." I like this article that goes into more detail on that. Other than that, I've learned to implement measurements that are more responsive than px like rem and em.

    You're doing great and happy coding!

    0
  • Kenisa•90
    @KenisaReneePosted over 2 years ago

    Hi Helen, great job on finishing your first challenge! I see you have box-sizing: border-box; and margin: 0; set for everything so good job. I'm pretty new to this too, and it took me a while to figure out the necessity of those. For me on this project, it helped to get the background just right by adding background-position: top; and background-repeat: no-repeat; under body. There might be other ways to do it, but that worked for me!

    Anyway, you're doing awesome. Happy coding!

    1
  • Kenisa•90
    @KenisaReneePosted over 2 years ago

    Hey Kevin, congrats on submitting your first solution! I see you utilized display: flex; in your CSS which works really well in this particular project, so nice work. It looks like there are just a few minor accessibility issues that can be fixed by inserting <main> for everything inside the body and surrounding your title with <h1>. Your final design is close to the original one but if you want to get it closer, you can add the box-shadow property. I learned more about that from W3 Schools.

    You're doing great! Happy coding

    0
  • Jen M•130
    @jenmurph4610Submitted over 2 years ago

    I am getting better with CSS, although aligning things the way I want still seems to take me some time of trial and error with the properties. I usually end up feeling like I did it the long way and that I am missing some much simpler method. For example in the H1 and P selectors of this project (snipped below). I would love some thoughts on if there are more streamlined methods than what I used here.

    Update: Took another look based on feedback and was able to simplify my code some. Thanks to those who provided feedback. I welcome any additional comments to improve :)

    QR Code Component

    2
    Kenisa•90
    @KenisaReneePosted over 2 years ago

    Hey Jen, congratulations on finishing your first challenge! I'm new here too, and I ran into the exact same problem you did:

    **All page content should be contained by landmarks

    Context:** `<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">J. Murphy</a>.

    </div>`

    The way I solved it was by making this a footer section instead of a div. That might be the answer to the other similar warning on your report too.

    The CSS looks good to me although I'm not a super trained eye yet. Restructuring the HTML might lend to changing the CSS a little.

    Also min-height: 100vh; has been my friend recently. Anyway, you're doing great. Keep going and happy coding!

    Marked as helpful
    1