Hi! 🖖🏻
This is my solution for QR Code Component.
If you have any suggestion regarding my code implementation, or things I can improve on in this challenge - feel free to comment. 🫵🏻
Thanks for checking out my solution!
Congratulations for completing the task! 👏👏
From my point of view, your code is impecable, you have semantic code, good positioning, perfect centering and perfect sizing of everything.
The only advice I have for you ( depends by person ) is to make folders for your stylesheets, in this way you could manage them better (This is for when you will have bigger projects)!
Congrats!
A great one, because I figured out some things.
The problem is that I haven't respected the rules of the challenge. Instead of using the QR code image provided I have created the QR code image using Grid container and Grid items. :D:D:D:D:D
I knew that I had to create a lot of divs and here is when I called ChatGPT. Asked it how to create a lot of divs with a short code (please notice I know very basic JS learnt 2 years ago). And it gave me a short script that came perfectly.
Also, I have even created those two circles inside the container of the code.
The problem I have with the project and what I don't like is that I am bad at centering. Finally did something but I am not pretty sure if it is ok. Somehow I have some centering. The responsiveness is pretty poor.
For me the project was about creating the QR code. Sorry :D:D
Thank you for reading!
Good job completing the project! I found it very funny because it's unique, congrats !
"The problem I have with the project and what I don't like is that I am bad at centering". Let me tell you my style of centering a div and I hope you will understand how to center it.
<main class = "container">
<div class="box">
</div>
</main>
In this case, you will center the CONTAINER and the styling for BOX.
.container{
display: grid;
justify-content: center;
}
.box{
width: 100px;
height: 100px;
background-color: black;
}
An alternative for grid is flex, and you use it like this:
.container{
display:flex;
justify-content: center;
align-items: center;
}
"The responsiveness is pretty poor.".
For this, you could learn some Bootstrap and it's the best for Responsive Sites.
Also, you could change the first div <div class="container"> to <main class = "container"> for better semantic.
I hope this will help you in your journey! Te salut :)