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

QR Code Challenge using flexbox.

@FernJBatista

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


Challenges This is my first time ever using Git, I'm using the visual interface for now, but I can't get the image to show up when I open the live website made with Git pages.

From the design challenge itself, I struggled to put the <div class="attribution"> at the bottom of the page, while keeping the <div class="code-container"> at the center. So for now I've just separated them using the gap property to keep it looking decent.

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @FernJBatista!

Your solution looks great!

I have one suggestion:

  • When using the tag <img>, make sure to set the correct path, otherwise your code won't be able to find the image. And if your code can't find it, it won't show.

šŸ“Œ This is your code:

<img src="/images/image-qr-code.png">

šŸ“Œ And here's the update with the correct path:

<img src="./images/image-qr-code.png">

The difference is just a dot but it's enough for not showing the image.

I hope it helps!

Other than that, great job!

Marked as helpful

0

@FernJBatista

Posted

@danielmrz-dev Thank you! This helped to make the image show properly! I'm guessing I have to use "./" to select the current folder? Or is it something else I'm missing with that tiny little change?

1
Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

@FernJBatista

Exactly, you use ./folder to select it!

And if it was really useful, please don't forget to mark the first comment as helpful šŸ˜Š

Marked as helpful

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