Submitted about 2 years ago

QR-CODE-COMPONENT

Joaotbb•190

@Joaotbb

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Melvin Aguilar 🧑🏻‍💻•61,140
@MelvinAguilarPosted about 2 years ago
Hi @Joaotbb 👋, good job for completing this challenge! 🎉

Here are some suggestions to improve your code:

The tag <div> is used to defines a section in an website. It is used to have a container styled with CSS, set special alignment or the content needs a special positioning.

You could use more the <p> tag, the <p> element is paragraph level content, usually text

<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>

Add a <h1> tag in your solution, The <h1> element is the main heading in a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; always start from <h1>, followed by <h2> and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

Solution:

<h1>Improve your front-end skills by building projects</h1>

You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies

Your body's default margin causes the vertical scrollbar to appear

Popular reset style sheets:

A modern alternative to CSS resets

CSS Tools: Reset CSS

Custom CSS Reset

.

Try to use semantic tags in your code. More information here:

With semantic tags:

<body> <main class="maincontainer"> . . . </main> <body>

Update your report to see what other suggestions there are in this solution

I hope those tips will help you.

Good Job and happy coding !
Marked as helpful
1

バレンタイン 😈•64,170

@VCaramesPosted about 2 years ago

Hey @Joaotbb, I Update your code with modern css to make it fully responsive and remove any unnecessary code:

You will want to study it and see what changes I made:

body {
    background: rgb(227, 229, 232);
  
    min-height: 100vh;
    display: grid;
    place-content: center;
  
}


.maincontainer {
    background-color: white;
    max-width: 320px;
    box-sizing: content-box;
    padding: 15px;
    border-radius: 15px;
      text-align: center;
}

.qrimage {
    width: 100%;
    border-radius: 15px;
}

.twoboxes {

    font-family: 'Outfit', sans-serif;
    padding: 0 10px 0 10px;
}

.boxone {
    padding-top: 20px;
    font-weight: 700;
    font-size: 22px;
    color: rgb(62, 59, 85);
}

.boxtwo {
    padding-top: 20px;
    font-weight: 500;
    color: rgb(107, 103, 103);
}

Happy Coding! 👻🎃

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