@Kiunga1
Submitted
##First project. qr-code-component-main.
Please tell me how I can improve. My biggest challenge was Layout and Positioning: especially positioning of the QR code component. I finally managed by following the CSS Flexbox guide.
@ZubairAbid101
@Kiunga1
Submitted
##First project. qr-code-component-main.
Please tell me how I can improve. My biggest challenge was Layout and Positioning: especially positioning of the QR code component. I finally managed by following the CSS Flexbox guide.
@ZubairAbid101
Posted
Hello!!! 👋
Congratulations on completing the challenge! 🎉
There are some things that you can improve in the code,
<section>
element, use the <main>
element instead since the <section>
element is preferably used when there are multiple sections on a single webpage. Since this is a simple design with only one component a <main>
element will suffice.<body>
element a min-height: 100vh
. This will cause the align-item: center
and justify-content: center
to work properly making the component be at the center dynamically.<body>
element a fixed width. Instead set the <section>
element to a width relative to the viewport size by doing width: 90vw
. Also don't specify the height of the <body>
element as a fixed value instead let the component occupy as much height as it needs to.I hope you find this comment helpful! 🙂
Did you know that there's a mark as helpful and an up-vote option? 🤔
There's even a Follow button!!! 😁
Happy Coding!!! 💻
Marked as helpful
@lawalOyinlola
Submitted
@ZubairAbid101
Posted
Hello!!! 👋
Congratulations on completing the challenge! 🎉
There are some things that you can improve in the code,
<div>
component is not necessary. You can simply remove it. The <main>
element should be the direct child of the <body>
element.src
path for the <img>
element using event handles. Your mobile design looks good.div
element for the image in question. Give it a width
property and then set the <img>
element to width: 100%
and height: 100%
.I hope you find this comment helpful! 🙂
Did you know that there's a mark as helpful and an up-vote option? 🤔
There's even a Follow button!!! 😁
Happy Coding!!! 💻
Marked as helpful
@Kamania
Submitted
Hello there! Check out my work and provide any feedback on areas I can improve on. Thank you
@ZubairAbid101
Posted
Hello!!! 👋
Congratulations on completing the challenge! 🎉
There are some things that you can improve in the code,
<html>
and the <body>
element in your CSS file. I advise removing the <html>
tag from your styling as this will not change the appearance of the design.<img>
elements, one for the desktop and other for the mobile design. Set the display: none
for the mobile design as default. Then using media queries set it to display: block
for the mobile design at the appropriate size.min-height: 100vh
on the <body>
element. This will give you more control over how the document behaves provided the height gets larger than 100vh
I hope you find this comment helpful! 🙂
Did you know that there's a mark as helpful and an up-vote option? 🤔
There's even a Follow button!!! 😁
Happy Coding!!! 💻
Marked as helpful
@lastiwan89
Submitted
write me review for my css and also html
@ZubairAbid101
Posted
Hello!!!
Congratulations on completing the challenge!
There are some things that you can improve in the code,
<img>
element does not appear for layouts between the desktop and mobile layout. I advise creating two <img>
elements, one for desktop and the other for mobile design. Then set the display: none
for the mobile <img>
element. Using media queries set the display: block
when the screen size is that for a mobile layout.height: 100vh
try using min-height: 100vh
.display: flex
I hope you find this comment helpful!
Did you know that there's a mark as helpful and an up-vote option?
There's even a Follow button!!!
Happy Coding!!!
Marked as helpful
@Lifewithmuskan
Submitted
I'm new to web development ! Any feedback on how I can improve the code is very much appreciated!
@ZubairAbid101
Posted
Hello!!!
Congratulations on completing the challenge!
There are some things that you can improve in the code,
display: flex
, justify-content: center
, align-items:center
.width
and height
value and then use margin: auto auto
.body
element is not correct. To keep the design as close as possible to the original use the style-guide.md
file given to you.<link>
tag alongside the font-family
CSS property to match the font style with the design.I hope you find this comment helpful!
Did you know that there's a mark as helpful and an up-vote option?
There's even a Follow button!!!
Happy Coding!!!
@azzariprem
Submitted
Any question about best practices?
Like I handled color using style tag and the rest in tailwind. Does it work?
Github published website does not load images, do you know why?
@ZubairAbid101
Posted
Hello!!!
Congratulations on completing the challenge!
There are some things that you can improve in the code,
styles.css
and then use a <link>
tag to connect your HTML to the CSS stylesheet.<main>
, <header>
, <footer>
, <section>
to name a few.I hope you find this comment helpful!
Did you know that there's a mark as helpful and an up-vote option?
There's even a Follow button!!!
Happy Coding!!!
@blue-knight99
Submitted
The center issue was solved
@ZubairAbid101
Posted
Hello!!!
Congratulations on completing the challenge!
There are some things that you can improve in the code,
display: flex
, justify-content: center
, align-items:center
.width
and height
value and then use margin: auto auto
.I hope you find this comment helpful!
Did you know that there's a mark as helpful and an up-vote option?
There's even a Follow button!!!
Happy Coding!!!
Marked as helpful