dandamudi2• 50
@dandamudi2
Submitted
- I was unable to align the QR code component to vertically align center. Could some body give suggestions to achieve that.
- How to align the component header text and body text align center? (
Mohmed elshaarawy
@MohmedElshaarawy
All comments
- Mohmed elshaarawy• 830
@MohmedElshaarawy
Posted
Hi, dandamudi2 Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding
1 - Abgail• 10
@Abgail-Diniz
Submitted
Tive dificuldade em realizar a responsividade do site, pois quando diminui a tela a imagem sai da div.
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, Abgail Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding
Marked as helpful
1 - hamc417• 10
@hamc417
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, hamc417Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
Marked as helpful
0 - bodimarci• 160
@bodimarci
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, bodimarci Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
Marked as helpful
1 - Mark Añasco• 40
@MarkAnasco14
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, Mark Añasco Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
0 - Harshang Makwana• 260
@webgeek2021
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, Harshang Makwana Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
0 - ajeet achal• 510
@ajeetachal
Submitted
We welcome any feedback you may have regarding this project. Your input would be greatly appreciated.
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, ajeet achal Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
Marked as helpful
0 @samual-keleb
Submitted
it's my first website development journey
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, samual keleb endalew a Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
Marked as helpful
0- John• 150
@Gskds
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, John Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
0 - Swapnil Pandey• 50
@whoswapnil
Submitted
It was a fun to make it.
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, Swapnil Pandey Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
Marked as helpful
0 - Sávio Tito• 10
@SavioTito
Submitted
How did you solve this problem?
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, Sávio Tito Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
0 - Taimoor Aziz• 10
@taimoor822
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, Taimoor Aziz Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
0 - Eduardo Santos• 10
@duzzk1
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi, Eduardo Santos Good job on completing the challenge!
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font size, use relative units like em or rem. The font size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here. Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
0 - Reander Agulto• 120
@reanderagulto
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hi Reabder Agulto Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here . Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding❤️
0 - j3Zxq• 10
@j3Zxq
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hello J3zxqGood job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML
Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS
Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding!
Marked as helpful
1 - Fatehbir Singh• 360
@fa7eh
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hello fa7eh . Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML :
Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page. Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information. Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io CSS :
Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here . Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport. I hope you find it useful!
Happy coding! ❤️
Marked as helpful
0 @camiloCastanoCasas
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hey camiloCastano, I came up with a solution for your question. You could add this to each of your columns:
column-1, column-2, column-3 { display: flex; flex-direction: column; justify-content: space-between; } You could also add a helper class to each of the divs instead of having to repeat yourself.
Hope this helps! Keep it up! ❤️💥
0- mrawan shawkey• 180
@r0binn3082
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Hey mrawan shawkey, I came up with a solution for your question. You could add this to each of your columns:
column-1, column-2, column-3 { display: flex; flex-direction: column; justify-content: space-between; } You could also add a helper class to each of the divs instead of having to repeat yourself.
Hope this helps! Keep it up!❤️
Marked as helpful
0 - cyanide• 20
@3xplOr3r
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Good job my friend, I wish you all the best ..🔥❤️
0 - Wiktor Nowak• 70
@wiktor-nowak
Submitted
HTML -> Is this rating element sematically correct?
CSS -> I struggled with positioning of elements during this challange. Is this one prepared good enough? I would like to learn best possible practices.
JS -> It is quite simple one, yet maybe something to be changed in order for efficiency improvement.
Thanks, and have a good day! Wiktor
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Good job my friend, I wish you all the best ..🔥❤️
0 - mohammad-kawach• 50
@mohammad-kawach
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Good job my friend, I wish you all the best ..🔥❤️
Marked as helpful
0 - Michael Njuki• 70
@mikenjuki
Submitted
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Good job my friend, I wish you all the best
0 - Ray Mcmillan Gumbo• 250
@Raymacmillan
Submitted
Hey,i just completed my challenge which was a very difficult task so if there are any suggestion on how i can improve my code,please feel free to leave comments below
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Good job my friend, I wish you all the best ..🔥❤️
0 - The Nghia• 140
@dothenghia
Submitted
This is my second project using ReactJS, and this project doesn't have too much difficulty in JS code - but the hard part is mainly in the CSS part.
- I realized a cool thing in the process, that is the difference between e.target and e.currentTarget (e.target is what triggers the event dispatcher to trigger and e.currentTarget is what you assigned your listener to) . Because before I only used e.target without knowing about e.currentTarget , but thanks to e.currentTarget I was able to fix the event handling error in this project. 🤣🥰
🤗Looking forward to receiving feedback from everyone about Animation and UI🤗
Mohmed elshaarawy• 830@MohmedElshaarawy
Posted
Good job my friend, I wish you all the best..❤️🔥
0
