Submitted about 1 month ago

QR Code Component using basic HTML and CSS

contentful, semantic-ui, styled-components, web-components, pure-css

ChibugoOhanyiri•10

@ChibugoOhanyiri

A solution to the QR code component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of actually completing the challenge and making the layout look exactly like the reference image. It was my first project using just HTML and CSS, and it felt good to see something work. Next time, I would focus more on making the layout responsive, and organizing my CSS better using more reusable classes.

What challenges did you encounter, and how did you overcome them?

A major challenge was setting up Git, GitHub, and VS Code together. I kept running into authentication errors and push issues, but I learned how to use the terminal to commit and push properly, and also how to troubleshoot using Git messages. I also struggled a bit with centering the card properly and making the desktop and mobile view look the same. I wasn't able to figure it out

What specific areas of your project would you like help with?

I’d love feedback on:

Whether my CSS layout is clean and efficient

How I can improve structure or readability in my HTML

Any tips on naming conventions or organizing my files better And any beginner-friendly tips on making this layout responsive using media queries or grid!

Code

Please log in to post a comment

Community feedback

Gregor de Cillia•190
@GregorDeCillia
Posted about 1 month ago
Looks great!

According to the "design comparison", there are some small differences in the margins but that's really not a big deal. Here are some thoughts about your questions.

Whether my CSS layout is clean and efficient

I would suggest to add padding to your card that matches the difference between the card width and the image width. That way, you won't need any margins on the image and the text below the image is automatically bounded by that padding as well (text should never be wider than image for a design like this AFAIK).

You can also use display: flex to center the card on the screen. This will do the job if the card is the only direct child of your <body> element.
```
body {
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
```
How I can improve structure or readability in my HTML

My experience is that the best way is to use html only for content and outsource everything else. In particular, I would add a separate css file and import it from your <head>. If you later add javascript (not necessary here), also use separate .js files rather than <code> tags with code directly inside. Having an <h3> without an <h2> and <h1> "above" it is considered bad for accessibility. In this case, I would change the <h3> to an <h1> since it is the top-level title of the site.

Any tips on naming conventions or organizing my files better And any beginner-friendly tips on making this layout responsive using media queries or grid!

Naming is hard. For the card, I would use class="card" and use card- as a prefix for everything that goes inside the card. For example <h1 class="card-title">.

I don't think grid or flex helps with flexibility for this project. Usually, these technologies are useful if you have elements that are aligned horizontally and need to add "line breaks" at some point.

I would suggest you play around with properties like max-width/min-height and relative units (%, em). Another useful technique is using calc() and min()/max().
```
.card {
  width: 300px;
  max-width: calc(100vw - 5px);
}
```
I don't think @media queries will be useful for this project either. Getting a better understanding of the min/max/calc/% approaches is probably the best way to maximize the responsiveness for this deign.
Marked as helpful

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