Submitted 5 months ago

Responsive QR code page using CSS flexbox

Shaleen Chowdhary• 60

@shaleenchowdhary

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

Solution retrospective

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

I'm a React developer and didn't brush up my HTML and CSS for a while. I think I'm loosing the grip over CSS and .js concepts. I will to practice more to get the solid command on CSS and JavaScript.

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

I revised the concepts like flexbox, box model, grid, working with images, etc.

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

I would like to focus on CSS and JavaScript as of now.

Community feedback

Iryna Grytsaenko• 40

@Iryna-Gry

Posted 5 months ago

Hi. You did a great job! Here a few points to improve:

If you focus on HTML and CSS practice it's better to use semantic tags in markup, such as <main>, <section>, <h1> and other, and use less of <div> tags. Using semantic tags can help you with such framework like Next (which uses React) and semantics is really crutial there. Also it is easier to read the code if you use different structural tags and distinguish the roles between them.
<h1> is needed here for accesibility reasons (more on accessibility [here](https://www.w3.org/WAI/fundamentals/accessibility-intro/))
The component looks good, but there is no need of retyping the text (uppercase letters at the begining of each phrase needed) I hope, this feedback will help you in your development. Have a nice day, Iryna.

Marked as helpful

Shaleen Chowdhary• 60

@shaleenchowdhary

Posted 5 months ago

@Iryna-Gry Hey! Thanks for the points you mentioned, I'll definitely consider them to improve my web development. Have a nice day, Shaleen.

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