Skip to content
OverviewSolutions
13
Comments
5
Melaku Alehegn
@MelakuAlehegn

All comments

  • Zeuqram24•40
    @Zeuqram24Submitted over 1 year ago

    Hi guys, it's a pleasure to be part of this community.

    I just finished my first challenge!

    Could you give me some feedback?

    Thanks in advance!

    QR code component

    1
    Melaku Alehegn•260
    @MelakuAlehegnPosted over 1 year ago

    Hello there @Zeuqram24. Congratulations on successfully completing the challenge! 🎉

    I have other recommendations regarding your code that I believe will be of great interest to you. This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors. What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers For example: The <main> element should include all content directly related to the page's main idea, so there should only be one per page So resolve the issue by replacing the <div class="main-container"> element with the proper semantic element <main> along with element in your index.html file to improve accessibility and organization of your page.

    I hope you find this helpful. Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    0
  • Melaku Alehegn•260
    @MelakuAlehegnPosted over 1 year ago

    congratulations @eniolaade02 for finishing your first challenge. I have a few feedbacks for you in order to keep you card responsive, you can add this css to center your card on the center of the page,

    .card {
width: 400px;
text-align: center;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
background-color:white;
padding:13px;
}

    this will set the position of your card into the center and keep it there whenever the screen size decreases. Apart from that your design looks elegant

    0
  • Melaku Alehegn•260
    @MelakuAlehegnPosted over 1 year ago

    Congratulations on finishing your project @jrdeveloper2 , Excellent job. I attempted to examine the mobile version of your design, and it appears that you have included some width that determines the length of the card on mobile devices. For mobile devices, the design's width remains narrower and to the left of the screen. Check the code you wrote for screen min-width: 720px. Specially this line of code

    max-width: 46rem;
    0
  • Faruk Olawale•300
    @OlawalefarukSubmitted over 1 year ago
    1. sizing was a bit difficult at first

    2.no area. i am sure

    1. no

    QR scan code

    2
    Melaku Alehegn•260
    @MelakuAlehegnPosted over 1 year ago

    Congratulations on your first project @Olawalefaruk. the design looks good and you have made it almost the same. But you can improve on the layout of the page by centering every content on the page. yours has been pushed to the left top corner of the page. you can achieve this by targeting the body and using flexbox to center everything in it. here is a sample code you can use,

    body{
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
background-color: hsl(212, 45%, 89%)
}

    this will center everything and will set the body the right color. I hope you'll find this helpful.

    Marked as helpful
    0
  • Masood Acheampong•210
    @Masood-zoneSubmitted over 1 year ago

    I have been able to build this QR component as closely as it has been given me but what I still don't have a lot of control over is the usage of 'Media queries' and what factors or basic understanding you should have about it, although it talks about breakpoints and specifying/optimizing and prioritizing screen size. I want to really know more on it.

    QR Code Component using CSS flex.

    2
    Melaku Alehegn•260
    @MelakuAlehegnPosted over 1 year ago

    I loved how responsive the page is with title media query. The only thing I think you should change is setting your card component a bit of height property. it looks shorter on your design. apart from that I found this great and clean code. I have a challenge on the width of the component since I used % as a unit of width for card component, but you make that easier by setting the width in pixes.

    0