CSS and responsive
What challenges did you encounter, and how did you overcome them?Nothing
What specific areas of your project would you like help with?CSS
Nice work 🎉🎉 The only little problem was where you put the attribution. It should be at the very bottom of the page not inside the card. Aside that, 👌🏿👌🏿💯
Hi
Congratulations on finishing this challenge! 🎉🎉
Your card component looks perfect. The only problem was how to center it vertically.
You can do that by giving the body a max-width, and a min-height, and then making it either a flex or a grid container.
For example, let's say the card has a class of card and this card is a direct child of the body, we can use these lines of code to center the card
body{ max-width-100vw; min-height:100vh; overflow-x:hidden; //to prevent side-scrolling display: grid; place-items: center; }
the last two lines are those that are really doing the job. If you don't like grid you can also use flex
display: flex; align-items: center; justify-content: center;
I hope this helps. ✌🏿
I am proud of the fact that i am able to use flex box to position the component in the middle of the page.
What challenges did you encounter, and how did you overcome them?The challenging aspect was how to get the component to look the same as the design since there design doesn't give the details of the dimensions used.
What specific areas of your project would you like help with?I will need help with the proper alignment of items
Hi Emmanuel. Congratulations on your completion of the QR code component challenge. Your work looks like you know what you're doing. 🎉🎉🎉
I see that your challenge is how to get the proper dimensions. The solution to that is to use the Figma or sketch files. The QR card challenge is one of the few challenges that gives you a free Figma file. You can get the dimensions in that file.
I hope this helps you.
How I rendered two components into the DOM without refresh and without reactjs.
What challenges did you encounter, and how did you overcome them?how to use an external js while using Vite. All the relative URLs break after the build so I had to write the js in a script tag in the HTML. I don't like it but I did it anyway. C'est la vie.
How do I add an external JS when I'm using Vite
Thanks, man. I forgot to remove the submitBtn variable from the js because it had no use anymore. Thank you very much for the <submit type="module" src="..."></submit> tip.
Nothing exactly
What challenges did you encounter, and how did you overcome them?I had some issues with some css like making the .card_image fill the .card to center, but I was able to complete it with some help and alot of try and error
What specific areas of your project would you like help with?Nothing exactly. just want be master my skill
HI Abdulbaki, your code had very nice semantic HTML and good CSS. One thing I that made the card image relatively easy to center was that I used the image as a background image for a div instead of an img tag. The reason why that is better is that the user will not see that "broken image icon" when the image refuses to load.
Also, the card image in the original challenge has a border-radius and your card had no shadow. Lastly, the author section was vertically centered in the original design.
Other than that, everything was pretty neat 👌
