Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Simple QR Code Component using basic HTML AND CSS

Caleb Simβ€’ 410

@CodeLamp168

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Although very simple, I can tell I could use less CSS then I should.

If there are any shortcuts for some of the css I used within this, some feedback would be appreciated.

Community feedback

Lucas πŸ‘Ύβ€’ 104,500

@correlucas

Posted

πŸ‘ΎHello Caleb, congratulations for your solution!

Answering your question about reducing the html/css code:

I saw that you've used a <div> to wrap the h2 and the img and another <div> for the paragraph. Note that for this challenge all you need is <div> to wrap all elements, this means that inside the div will be only the img, h1 and p.

See the structure below:

<body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

For the css you don't need any class since there only one element for each kind, so you can just use the general selector to change its css as main img, h1 and p

Hope it helps and happy coding!

0

@VCarames

Posted

Good job on your project!

Here some suggestions:

From you qr-card class, remove the diplay: flex; , justify-content: center, and flex-direction: column;. There're not necessary since, by default your code is already vertically align.

Change the width: 290px to max-width: 320px.

0
Adarsh Raiβ€’ 560

@AdarshRai0

Posted

<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Caleb D. Sim</a>. </div>

This should be footer tag :::βœ¨β€οΈπŸ™Œ Eg:

<footer class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Caleb D. Sim</a>.

Hope you Understand Keep Coding Keep Growing..!!!🌊

</footer>
0
Adarsh Raiβ€’ 560

@AdarshRai0

Posted

Hi @CodeLamp168, I went through our code and I think there are some minor changes you should make Semantic tags

The direct children of the body must be wrapped in semantic tags to indicate users about the various purposes of different parts of a webpage.

For example,

<body> <header> ...header of the webpage... </header> <main> ...main content of the webpage... </main> <footer> ...footer of the webpage... </footer> </body>
0

Please log in to post a comment

Log in with GitHub
Discord logo

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