Submitted 10 months ago

QR code component solution

Amogh Saxena• 20

@SaxenaAmogh

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

This is my first submission and I am open to all suggestions. Do point out my mistake so I can learn more and perform better in the future.

Community feedback

Arshad Ali Kaldane• 650

@IamArshadAli

Posted 10 months ago

Hey there! Congratulations on completing your first challenge on Frontend Mentor! 🎉

It's a great achievement, and I'm glad to see your enthusiasm for learning and improving. 🎖️

After reviewing your code, here are a few areas where you can make some enhancements to further develop your skills: 🔍

Organize Files: Consider putting your HTML, CSS, and other relevant files into separate folders to improve the organization of your project.

| assets/
|- images/
|-- image-qr-code.png
|-- screenshot.png
|-css/
|-- style.css
| index.html
| README.md

Separate CSS: Keeping your CSS file separate from the HTML will make your code look cleaner and more maintainable.

...
<head>
<link rel="stylesheet" href="./assets/css/style.css">
...
</head>
...

Use Relative Values: When sizing elements in CSS, consider using relative values like percentages, em, or rem to make your layout more flexible and adaptable to different screen sizes.

.card {
  padding: 1rem 0.5rem;
}

Keep Color Values in :root Storing color values in the :root selector allows you to define reusable variables for colors throughout your code, making it easier to maintain consistency and make global changes to your color scheme.

:root {
  --clr-red: hsl(0, 100%, 66%);
}
h2 {
  color: var(--clr-red);
}

Play with paragraph color and shadow to make your design look more identical to the challenge

.card {
  box-shadow: .1rem 1rem 3rem lightblue;
}

These are just suggestions to help you improve your skills. 🚀

There is a lot more ahead. Keep up the great work, and don't hesitate to reach out if you have any questions or need further assistance. 🤝

Happy coding! 🤓

Marked as helpful

Kevork Lepedjian• 370

@kevorklepedjian1

Posted 10 months ago

Great job! Congratulations on your journey to becoming a frontend developer. The project was excellent. I would recommend that you look into using Flex and Grid for CSS. For instance, you could apply Flex to the body, justify it to the center, and align it to the center so that the card will be centered. Other than that, well done!

Marked as helpful

Øystein Håberg• 9,450

@Islandstone89

Posted 10 months ago

To add to the advice above:

HTML:

You need a <main>. Change main_content from a <div> to a main. I would also use a class instead of ID, that's most common.
It's very important that images have alt text! This helps screen readers understand what the image shows. The alt text should describe the content, and in this example, it also needs to say where it leads.
Headings should always be in order. So, you never want to start with <h3>. Make it a <h1>.
.attribution should be a <footer>.
"Challenge by" and "Coded by" should be wrapped in a <p>.

CSS:

It's good practice to include a CSS Reset at the top. Andy Bell has a good one you can use.
Remove all fixed widths and heights. Add a max-width in rem on main_content. This prevents the card from getting too big at larger screens.
Put text-align: center on the body. The children will inherit the value, and you have one less line of code.
Font-size must never be in px. This is damaging for accessibility. Use rem instead.
Remove negative margins.
To center the content horizontally and vertically, put this on the body:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
gap: 2rem;

The gap is to adjust the spacing between <main> and <footer>.

Good luck - you got this :)

Marked as helpful

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