Submitted almost 2 years ago

Build a card for beginner

Diaz Lubis• 20

@diazlubis19

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

good challenges

Community feedback

Adriano• 34,090

@AdrianoEscarabote

Posted 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:

Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.
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. 👍

Diaz Lubis• 20

@diazlubis19

Posted 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

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

@diazlubis19 happy coding!

Bizzare• 1,320

@godmayhem7

Posted 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 👍👍

Diaz Lubis• 20

@diazlubis19

Posted 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

Please log in to post a comment

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