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

Solution attempt at using Flexbox

@splwdev

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


Completely new to this world of web development (only learnt about Flexbox today) and having a look at some of the other solutions that people have submitted, realise how far I've got to go. Anyway, feel free to pull it apart and tell me where I've gone wrong, etc, all feedback welcome!!

Community feedback

@Aliyu-Saidu

Posted

Hi Shane Lynch, you have done a very nice job. Keep it up.

Here are some suggestions to help you improve.

  • For proper outline structure of your website, h2 should come only after h1 and h3 should only come after h2 and so on. So you may consider replacing the h2 (or h3) you used to h1. Don't worry about the default browser font size, you can always change that with css depending on your design. Read more about accessibility here (https://web.dev/accessible/?gclid=CjwKCAiA7IGcBhA8EiwAFfUDsfX-xPDXrqqo7B0vZV44epOKlmpslZ4tepkhgjL7p6-gSKHmG7Li8RoC1_MQAvD_BwE). Or read more from the links provided above (accessibility reports).

  • Your design doesn't look good on mobile. You may wish to padding say 30px on the 'body' and remove the (margin: 30px 0) you set on the 'body'. This will give an all-round space between the screen the your design on mobile devices.

  • Also set specific height for your main Flexbox container (in this case, the body) to say 100vh. This will help to properly centralise your project on the page(vertically and horizontally).

  • If have more questions, feel free to contact me.

Hope this is helpful? You may consider giving me an upvote and hitting the helpful button bellow.

Happy Coding!

Marked as helpful

1

@splwdev

Posted

@Aliyu-Saidu Many thanks for the feedback, very helpful, has definitely given me points to think about!!

0

@Aliyu-Saidu

Posted

@splwdev you are most welcome. I am glad I could be of help. Thanks for the upvote too.

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