Skip to content
OverviewSolutions
7
Comments
4
Baki Jessy Justice Julien
@blackdreamer15

All comments

  • Kate Dames•250
    @funficientSubmitted about 1 year ago

    I'm definitely getting more comfortable with the layouts! Two questions I need help with please:

    1. How do I create the background with the curves?

    2. Is there a better way to handle the image border radius? I feel I'm duplicating the rounding on the image but it doesn't inherit the shape from the container and overflow: hidden; doesn't seem to make a difference.

    Any other feedback to make my code better would be highly valued!

    Thank you! Kate

    Order summary component with vanilla CSS

    2
    Baki Jessy Justice Julien•110
    @blackdreamer15Posted about 1 year ago

    Hey, @funficient! Great work out there.

    You do not actually need to create that illustration. It is part of the assets. In case you do not have those, The link below refers you to my GitHub where you can get those assets: pattern-background-desktop.svg and pattern-background-mobile.svg.

    Click on this link.

    Best of luck! 😊

    Marked as helpful
    0
  • Baki Jessy Justice Julien•110
    @blackdreamer15Posted over 2 years ago

    Hi @YaSh8202! Congratulations on completing this challenge. I checked your code on GitHub and have some suggestions to make.

    1. You need to add the alt attribute to the img tag to solve the HTML issue.

    2. You have to use a <h3> tag instead of a <h3> tag to resolve one of the accessibility issues. Conventionally, you have to start with a level-one heading. (that is, the h1 tag)

    3. For the semantic reasons, it will be best to change <div class="center"></div> to <main class=""></main> since it contains the main content of the page.

    4. I think the <div class="card"></div> is not really important since you can apply the styles directly to the <main class=""></div>.

    5. For the <div class="attribution></div>, it will be best to use <footer class="attribution></footer> instead to resolve one of the accessibility issues.

    Good luck with your other challenges.

    Marked as helpful
    0
  • Baki Jessy Justice Julien•110
    @blackdreamer15Posted over 2 years ago

    Hi @kermitcosts! Congratulations on completing this challenge. I checked your code on GitHub and have some suggestions to make.

    1. You have to use a <h1> tag instead of a <p class="first-text"></p> to resolve one of the accessibility issues.

    2. For the semantic reasons, it will be best to change <div class="main"></div> to <main class="main" role="main"></main> since it contains the main content of the page. Let it embed the whole main content of the page.

    Good luck with your other challenges.

    Marked as helpful
    0
  • Baki Jessy Justice Julien•110
    @blackdreamer15Posted over 2 years ago

    Hi @urrrch! Congratulations on completing this challenge. I checked your code on GitHub and have some suggestions to make.

    1. You have to use a <h1> tag instead of a <h4> tag to resolve one of the accessibility issues. Conventionally, you have to start with a level-one heading. (that is, the h1 tag)

    2. For the semantic reasons, it will be best to change <div class="content"></div> to <main class="content"></main> since it contains the main content of the page.

    3. I think the <div class="wrapper"></div> is not really important since you can apply the styles directly to the <main class="content"></div>.

    4. Also, you can increase the dimensions of the container and its items to make the whole QR code component a bit bigger.

    5. You can also add some padding to the content to add some spaces between them.

    Good luck with your other challenges.

    0