@FluffyKas
Posted
Heyo,
This looks really good. Just a few small things to note:
-
It's better to embed the QR code image in your html. Screen readers won't take not if it's set with css as a background.
-
The fixed height should be swapped to min-height. On some screens more than a 100vh of the screen would be needed for this component to display so it's better not to lock it.
-
I believe it's a good idea to use <article> for this challenge, but then the div container for the card isn't needed. The component is the article itself.
Marked as helpful
@notabhishekrai
Posted
@FluffyKas Wow. I didn't know you could embed the QR code. Where do I find it??
Btw, isn't it better to use <main> instead of article?? Since its the main component of the page and there isn't anything other than the card?? What do you think??
Marked as helpful
@raisama21
Posted
@notabhishekrai I have only done the basic of html and css and i don't know what I am doing. I am trying to wrap my head around things its only been a month since i started. So, thanks for the feedback :)
@FluffyKas
Posted
@notabhishekrai
Just add the image with an <img> tag. ^^
<main> and <article> aren't interchangeable. <main> is used for defining a landmark region in your website. You wrap all your "main content" inside it, be it one component or multiple components, sections. But in itself <main> isn't a component, just a wrapper.If you get a bit lazy, you could style it as a component I suppose (I definitely did that in the past, lol) but probably it's best not to and just have a separate element for the actual card component, like @raisama21 did here.
It's not even important to include a <main> in a component challenge (since there are no other regions), I usually only do because issues in the accessibility report hurt my eyes >.<
@raisama21
Posted
@FluffyKas I just used the viewport height to center the design vertically, i have not really looked in to responsive design so i think it will be a good start from now on, thanks for the feedback :) It was helpful
@raisama21
Posted
@FluffyKas how do you fit the image with the background size? if you embed it with the <img> tag
@FluffyKas
Posted
@raisama21
Add this code to the image itself:
display: block;
max-width: 100%;
height: auto;
This code snippet will make sure your image resize responsively and fit the parent container ^^ Can be reused for any other image in the future (just saying this cos it took me a fair bit of time to figure it out XD)
Marked as helpful
@raisama21
Posted
@FluffyKas Thank you so much for the code, i was bit lazy to search it up for my self xD.
@notabhishekrai
Posted
@raisama21 quick question, are you from Nepal??
@raisama21
Posted
@notabhishekrai ahh yar bro Kathmandu bata ho ma
@notabhishekrai
Posted
@raisama21 lol me too dubai Rai raixa.
@raisama21
Posted
@notabhishekrai Add/DM me on Facebook https://www.facebook.com/dawa.rai.3110/
@notabhishekrai
Posted
@raisama21 check your DM bruh
