Frontend Mentor | Solution qr code using CSS Grid and CSS Flexbox coding challenge solution

Vanza Setia• 27,835

@vanzasetia

Posted 11 months ago

Hi, Emanuel Bonardo! 👋

Here are some suggestions for improvements:

No <div> elements: Remove all the <div> elements. The styling of the .container and the .card__container can be merged and put on the <main> element. You do not need to wrap each element with a <div> element.
Use owl selector: For spacing between elements inside the card, you can use the owl selector (* + *). For example, you can have .card > * + * { margin-top: 1em }.
Alternative text should describe the image: Alternative text for images should not include any words that are related to the word "image". The semantic meaning of the <img> element tells assistive technologies to pronounce it as an image. So, you should describe what is the image and the purpose of the QR code.

I hope this helps. Happy coding! 👍

Marked as helpful

Tushar Biswas• 4,100

@itush

Posted 11 months ago

Congratulations on completing the challenge! 🎉

Your solution looks nice to me :)

To reset default browser styles you may also add padding: 0;

In my projects:

I always start with mobile-first workflow.
I use at least one main element for a page (entire content goes into the main, if I'm not using header & footer), and avoid divs as much as possible and use section and article element wherever I can.

<body>
<main>
All content 
</main>
</body>

I Use relative units as much as possible and avoid absolute units whenever possible.
If you are someone who is just starting out with front-end development, I strongly suggest starting with the QR code component project(which you did). Also in the challenges page you may filter by (Newbie, HTML&CSS) sort by (easier first) to select projects that will help you solidify your foundation. To avoid any potential knowledge gap⚠️ please first solidify HTML, CSS, JS fundamentals and then move on to any framework or library.
I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:

📚🔍 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.

📚🔍 11 important HTML topics where I discuss about my thought process and approach to convert a design/mock-up to HTML along with important topics like block and inline elements, HTML Semantic Elements.

I hope you find these resources helpful in your coding adventures! 🤞

I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻

Keep up the fantastic work and happy hacking! 💪✨

Marked as helpful

Vanza Setia• 27,835

@vanzasetia

Posted 11 months ago

@itush

Hi, Tushar! Nice articles! 👍

Tushar Biswas• 4,100

@itush

Posted 11 months ago

@vanzasetia

Hello Vanza!

Thank you very much 🙏 for recognizing my work, this is truly inspiring😁

Happy to connect...

Vanza Setia• 27,835

@vanzasetia

Posted 11 months ago

@itush

Sure! It is great that you wrote what you learned and shared it with people. 🙂

By the way, in your HTML article, you say that HTML is not a programming language. How about watching the following video?

A video from Heydon Pickering answering questions about HTML — Is HTML A Programming Language? (Webbed Briefs)

Tushar Biswas• 4,100

@itush

Posted 11 months ago

@vanzasetia

Interesting! I see the merit in the argument. However, presently, in a tech round MCQ, I'll select 'HTML is a programming language' as false.
Giving instructions to the computer is not enough to gain the status of a programming language. As I understand it, the ability to create interactive and complex functionalities, algorithms, and manipulate data is mainly required.
This is a very good topic for a dissertation or a friendly debate.
Hypotheses, ideas, and concepts keep changing over time. And I keep an open mind.

Cheers!

Solution qr code using CSS Grid and CSS Flexbox

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community