Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Layout with Flexbox

P
JFā€¢ 50

@JFGEER83

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


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

I'm proud to have seen this project through to the end, and to have found solutions fairly quickly for my display problems (among others) and layout problems. Next time I'll try to do it more quickly. Maybe try Sass and/or tailwind.

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

The chanlenges that I encountered were the problem of displaying the GitHub page, I found the solution by searching on the internet. Also for the layout problems when centring the div, a search with the exact terms allowed me to make progress.

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

I'm curious to know what others think about the quality of my code, I'm sure I can improve my css style, for example. As far as div dimensions are concerned, I'm not sure that the fixed px are correct.

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @JFGEER83!

Your solution looks excellent!

I have just one suggestion:

  • Use <main> to wrap the main content instead of <div>.

Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

šŸ“Œ And unless you have a specific reason to use two wrappers, there's no need, considering that you can achieve the same result with only one. It also makes it easier positioning the elements inside.

This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

Marked as helpful

1

P
JFā€¢ 50

@JFGEER83

Posted

@danielmrz-dev Thanks for that, I've just corrected it, thanks for teaching me that!

1

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