Submitted 3 months ago

Responsive QR code page using html/css

Gary Alvarado•40

@Denilson15

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm most proud of the fact that this is my first real html and css project. Trying to build to recreate something with very little experience was challenging but it gave me the opportunity to mess around with different tags and styles and see how things worked. Next time I will try to make better choices in the tags that I use, I think when I began the project I was throwing "ID" in the mix a lot even though it wasn't best use case for it.

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

I had learned a majority of the CSS basics a day prior to starting this project. Prior to this I had really only worked with C++ and a little bit of JS which are completely different so trying to implement what I learned was a bit challenging given my lack of practice. I overcame those challenges by asking others in the Frontend Mentor community and looking up videos on youtube to better my understanding of specific styles.

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

I think the two main things I would like help with is understanding when to use certain tags and also just a more thorough break down of how to use specific styles.

Community feedback

P
Emil Raubach•140
@emil-raubachPosted 3 months ago
Hello,

Nice job on the qrcode challenge!

A few minor suggestions that might be helpful:

Rather than use an inline-style sheet use a separate file (style.css) and place a link in the head of the html file. This helps keep the structure of the document and styling separate.

Looks like you have a typo in the <body> for the min-height property.

Good luck on future challenges!
Marked as helpful
0
P
Theo Harris•360
@Theosaurus-RexPosted 3 months ago
Hey @Denilson15, this is great for a first project considering you only learned CSS basics a day prior!

I'd honestly say you've done a good job using the right tags for this project! A <h1> makes sense for the top text and a paragraph is perfectly suitable for the body text :)

One pointer that will make your code for accessible for folks with vision impairments that may be using assistive technologies - when we have an image of a QR code on a page, best practice is to add the alt attribute with a description of where the QR code links to, e.g. alt="A link to the Frontend Mentor website". Generally you also want to provide an alternate way of accessing the content the QR code points to, as well, but the design here doesn't include that.

Anyway, great job, and I hope you enjoy the switch from C++ to the wonderful world of frontend web!
Marked as helpful
0
Gary Alvarado•40
@Denilson15Posted 3 months ago
@Theosaurus-Rex thanks this is very insightful, I will make sure I incorporate that on projects moving forward!
1

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