Submitted almost 2 years ago

Responsive QR-component using Flexbox

Stacey• 30

@staceysav

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is the first project that I did myself, so any comments are more than welcome.

Community feedback

PhoenixDev22• 16,990

@PhoenixDev22

Posted almost 2 years ago

Hello Stacey,

Congratulation on completing this frontend mentor challenge. Excellent work!I see you have received some incredible feedback , if you don't mind me reiretating some of them:

You should use <main> landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image. Also the alternate text should not be hyphenated, it should be human readable.

Never use <div> and <span>alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. By adding semantic tags to your document, you provide additional information about the document, which aids in communication. For the reason stated before, in this challenge, you can use <h1> to wrap card__title and <p> for the description.

<h1 class=”card__title”> Improve your front-end skills by building projects</h1>
<p class=”card__text”> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>

In order to center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser. You can remove the unnecessary div .screen-container. You can remove position: relative ; z-index: -1

An element with width:100vw can extend below the vertical scrollbar of your browsers, inducing the apparition of horizontal scrollbars along with an unwanted side scroll. Use width:100% to the body instead will extend across the viewport but will always stop at the scrollbar.

width: 285px; an explicit width is really not a good way to have a responsive layout . Consider using max-width to the card in rem instead .

height: 470px;It's not recommended to set height to component, let the content of the component define the height.

Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

Overall, Your solution looks great . Hopefully this feedback helps.

Marked as helpful

Stacey• 30

@staceysav

Posted over 1 year ago

@PhoenixDev22 thank you for valuable feedback!

Vanza Setia• 27,855

@vanzasetia

Posted almost 2 years ago

Hi, Stacey! 👋

Congratulations on completing this challenge! 🎉

It's really important to use semantic HTML. It is because good for accessibility and SEO. This way, the assistive technologies can understand the page content. So, you swap the card__title div with h1 and card__text div with p instead. Also, swap the card div with main element to indicate that the card is the main content of the page.

Then, I recommend using the body element as the container of the card element instead of using an extra div. This way, you can create the website without any div since everything can be done with semantic HTML.

That's it! I hope this helps! 😊

Marked as helpful

Stacey• 30

@staceysav

Posted over 1 year ago

@vanzasetia thank you, that was very helpful!

Vanza Setia• 27,855

@vanzasetia

Posted over 1 year ago

@staceysav Happy to hear that was helpful! 😊

Lucas 👾• 104,560

@correlucas

Posted almost 2 years ago

👾Hello Stacey, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

I saw that you've used margins and position relative to give the container its alignment, this works but is really tricky to control all the content. My advice for your is to use flexbox to create this alignment. For example, first of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

Here's the fixes I did to your code:

.screen-container {
    /* height: 100vh; */
    /* max-width: 320px; */
    /* background-color: hsl(212, 45%, 89%); */
    /* position: relative; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: -1; */
}

.card__image {
    /* width: 100%; */
    max-width: 100%;
    /* height: 60%; */
    border-radius: 10px;
    display: block;
}

.screen-container {
    /* height: 100vh; */
    /* max-width: 320px; */
    /* background-color: hsl(212, 45%, 89%); */
    /* position: relative; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: -1; */
}

.card {
    /* height: 470px; */
    max-width: 285px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 15px hsl(217deg 8% 61% / 5%);
    padding: 13px;
    /* position: absolute; */
}

👋 I hope this helps you and happy coding!

Marked as helpful

Stacey• 30

@staceysav

Posted over 1 year ago

@correlucas thank you for your warm welcome and helpful comments! I added some changes to my code and both the result and the code look nice!

Vongai O Machingura• 80

@livvyvi3

Posted almost 2 years ago

Hi Stacey Good way to go. You may look more into CSS grids so you may apply media queries. The CSS grid is a newer standard that makes it easy to build complex responsive layouts. It works by turning an HTML element into a grid, and lets you place child elements anywhere within. The you may use media queries to control responsive component layouts for the website.

Marked as helpful

Stacey• 30

@staceysav

Posted over 1 year ago

@livvyvi3 hi, thanks for the idea! Now, I'm reading about CSS grid :^) Do you know what is better to use: Bootstrap grid or CSS grid?

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