Submitted over 1 year ago

bootsrap

Fawziyyah-hub• 130

@Fawziyyah-hub

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

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

.it was difficult trying the get the correct width and also the colors that were used

.i don't know yet

.Yes i do. how can i balance my school n tech life

Community feedback

Ecem Gokdogan• 9,380

@ecemgo

Posted over 1 year ago

Some recommendations regarding your code that could be of interest to you.

For the font-family to work correctly, add the following between the <head> tags in HTML:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

You can center it easily, so I recommend you to use flexbox in the body.
If you want, you can also use the recommended font-family and color for the background in body:

body{
    /* background:  hsl(228, 13%, 92%); */
    /* padding: 30px; */
    /* height: auto; */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(212, 45%, 89%); // the recommended color
    font-family: 'Outfit', sans-serif;  // google fonts which is suggested
}

after using flexbox, you don't need to use margin in the #box:

#box{
    background-color: white ;
    /* margin-left: 40%; */
    /* margin-right: 40%; */
    /* width: 25%; */
    max-width: 280px;  // max-width makes it responsive & 280px is ideal for the card
    height: 69vh;
    border-radius: 19px;
}

You'd better improve the padding and width of the image in this way:

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* width: 81%; */
    width: 90%;
    /* margin-top: 30px; */
    /* padding: 14px; */
    padding: 14px 5px;
    border-radius: 16%;
}

finally, you don't need .container because the body already represents the outside of the card in this solution, you can delete .container from CSS.

Hope I am helpful. :)

Marked as helpful

Liam Frosteman Neogard• 170

@FrostemanNeogard

Posted over 1 year ago

When starting a challenge, Frontend Mentor gives you a prompt to download the starter code which is a .zip file. In this zip file there will be information about the styling used as well as assets such as the QR code image (which I can see you've used.). If you take a look at the starter code again, you'll find a file named 'style-guide.md' which contains the following:

# Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

- White: hsl(0, 0%, 100%)
- Light gray: hsl(212, 45%, 89%)
- Grayish blue: hsl(220, 15%, 55%)
- Dark blue: hsl(218, 44%, 22%)

## Typography

### Body Copy

- Font size (paragraph): 15px

### Font

- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
- Weights: 400, 700

Here you can find all the colors that you may have missed as well as font information and such.

As for the width and height of your container, often you don't need to play around with that too much. You'll see that if you just remove the width: 25%; and height: 69vh; properties on #box then the box will still look good. A div will most of the time shrink and grow based on its contents.

There's quite a lot more I could go into regarding the CSS, but I hope what I mentioned so far helps!

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage

So fix it by replacing the <section class="container"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

For example:
- The <main> element should include all content directly related to the page's main idea, so there should only be one per page
- The <footer> typically contains information about the author of the section, copyright data or links to related documents.

iMAGES 📸:

alt text is a descriptive text attribute added to an HTML image tag that provides a textual description of an image for users who are visually impaired or cannot see the image for any other reason.

The purpose of alt text is to convey the meaning and context of an image to these users so that they can understand the content and information conveyed by the image.

Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.

E.g. alt="QR code to frontendmentor.io"

PS 🥲:

You're asking "Yes i do. how can i balance my school n tech life".
Me, currently that's what i'm doing my brother. But i'm a college student

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Juan Ramirez• 170

@JuanRamirez2000

Posted over 1 year ago

Regarding the colors used.

If you are always unsure of what color an element is and you dont have the style guide as described in the other comment, you can always resort back to using chrome devtools (not sure about the process for other browsers)

Chrome devtools has a color picker that you can use to find the color of any element on the screen. You can open the chrome devtools by rght clicking and hitting 'inspect". From here in the Elements tab you can go towards the subsection called "styles"" and find the color attribute. Clicking on the color here will bring up a color picker that you can use to find the color of any element on the screen.

This is a better explanation than the one I have above. Hope it helps! https://geekflare.com/google-chrome-color-picker/

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