Submitted almost 2 years ago

QR Code Component using Basic CSS Styling

Fritz• 300

@fritzadelbertus

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

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted almost 2 years ago

Hi @fritzadelbertus 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

Here are some suggestions you might consider:

It is important to update the links in this solution if the name of the repository is changed. Otherwise, your links will not work because the link on the live site has changed.
Add an h1 tag to your solution. The <h1> element is the main heading on 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>

I hope those tips will help you.

Good job, and happy coding!

Marked as helpful

Lucas 👾• 104,420

@correlucas

Posted almost 2 years ago

👾Hello @fritzadelbertus, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

The HTML structure is fine and works, and you can reduce at least 20% of your code by cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

<body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

✌️ I hope this helps you and happy coding!

Marked as helpful

Kate Dames• 250

@funficient

Posted almost 2 years ago

Hi @fritzadelbertus 👋, well done! Your solution is great.

The main difference between flexbox and grid is that flexbox is for one dimensional layouts, while grid is for two dimensional layouts, meaning it includes rows and columns. This solution only has one card, thus flexbox would be the standard choice for most developers, but using grid is by no means wrong.

The way I think of it is that grid is like a wireframe, or literally a layout grid, to help you keep all the elements aligned and in the right place, while flexbox is when I need more flexibility for a specific component (either within a grid or on its own). I tend to use grid as the main layout of a page, and the flexbox inside the grid to style the different grid areas.

Here is a summary of some really well described use cases by Jose Granja even including a bit of history and how it evolved.

Some use cases for Flexbox:

When you want to align items within a container, flexbox is a good choice using the align-items property.
When you want to evenly distribute items, flexbox will be the better choice.
When you have more complex positioning in one dimension (like a top navigation bar with options evenly distributed but a logo to the left) flexbox is the better choice.

Some use cases for Grid:

When you want the layout to have even spaces (or gaps) between the blocks grid is the better choice using the gap property.
When you want the contents to have a specific width grid is your friend.
When you want to layout a complex two dimensional area, for example the main page layout without any content in it, grid is an excellent choice.

If you want to learn more about grid, Wes Bos has an excellent free course on all things CSS Grid.

Hope this helps, and happy coding!

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