Skip to content
Submitted almost 2 years ago

Build a card for beginner

Diaz Lubis•20
@diazlubis19
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

good challenges

Community feedback

  • Adriano•38,270
    @AdrianoEscarabotePosted almost 2 years ago

    Hello Diaz Lubis, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

    1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.
    2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

    Feel free to choose one of the two!

    We have to make sure that all the content is contained in a reference region, designated with HTML5 reference elements.

    native HTML5 reference elements:

    <body>
    <header>This is the header</header>
    <nav>This is the nav</nav>
    <main>This is the main</main>
    <footer>This is the footer</footer>
</body>

    The remainder is excellent.

    I hope it's useful. 👍

    0
    Diaz Lubis•20
    @diazlubis19Posted almost 2 years ago

    @AdrianoEscarabote Thank you for your advice, i'm very happy for the feedback also the advice, i will try it on my next project

    1
    Adriano•38,270
    @AdrianoEscarabotePosted almost 2 years ago

    @diazlubis19 happy coding!

    0
  • Bizzare•1,320
    @godmayhem7Posted almost 2 years ago

    nice going @diazlubis19 your code was really nice 👏👏,hear are some tips i think would help out; i went through your code and found out that most of your codes were div-tags and though it may not affect you now but later on its gonna seem like a drag when you are dealing with larger or bigger projects instead of using just div-tags all the time try using other tags in conjunction with div-tags for example: main-tag: <main></main>, header-tag:<header></header>, nav-tag:<nav></nav>, footer-tag: <footer></footer>, section-tags:<section></section> these tags are self explanatory and they help other people understand your code better,the rest of your code was okay 👌👌, hope this feedback was helpful 👍👍

    0
    Diaz Lubis•20
    @diazlubis19Posted almost 2 years ago

    @godmayhem7 thank you so much, also thank you for the feedback and advice, i'm very happy for the advice, i will try it on my next project

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord