Skip to content
OverviewSolutions
11
Comments
18
Azeem Saifi
@saifion33

All comments

  • Azeem Saifi•370
    @saifion33

    Hi Sahil.

    Your solution is nice, however there is some issue if you want to improve check following tips.

    1. Wrap <div id="box"> into <main> tag.

    2. Use h1 tag instead of h2 and there is no need of <b> tag <h1 class="Highlighted-text">Improve your front-end skills by building projects</h1>

    3. You have separate stylesheet so don't set image height and width with inline css <img class="img" src="images/image-qr-code.png" alt="image-qr-code" > set image height and width in style.css

    4. Don't use <br> tag because isn't best practice.

    5. Remove ```<div class="footer"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://github.com/Sahil-Sayyad/QR-code-component">Sahil Sayyad</a>.

    </div>``` it's not importent
    1. Don't center div like this margin-top: 100px; and margin-left: 490px;

    For more reference see my solution

    I hope you find this helpful

    Happy Coding😊

  • Azeem Saifi•370
    @saifion33

    Hi jyoti.

    Your solution looks nice, but there is some accessibility issue.

    1. Wrap your card into <main> tag.

    2. Use at-least on <h1> tag.

    3. Increase size of card little bit

    4. Use meaningful class name. Like class="button-1" instead of class="bu1".

    I hope you find this helpful

    Happy Coding 😊.

  • Azeem Saifi•370
    @saifion33

    Hi staticish.

    Your solution is nice, but there is a bug in search.

    1. Search not work if we search for a country without region filter.

    Design related suggestion

    • Show only 4 country card in one row that would be better.
    • On card hover card scale is big , it would be best if you make it little bit small
    • If light mode active show Dark Mode instead of Light Mode on Navbar

    I hope you find this helpful.

    Happy Coding 😊

  • Azeem Saifi•370
    @saifion33

    Hi Taofeek Ibrahim.

    your solution is nice.

    There is some bugs .

    1. Item add into cart on + button click. Item should add on card only when we click add to cart button

    2. Item removed from cart on - button click . Item should remove only when click on delete icon

    3. When there is one item in cart and we click on - button , then item count is 0 but there is still 1 item in cart

    4. When we open page on mobile device there is button for change image and Navbar close button not working.

    Hope you solve that bugs.

    I hope you find this helpful

    Happy Coding 😊

    Marked as helpful
  • Azeem Saifi•370
    @saifion33

    Hi Karnapu.

    Your solution is awesome. But there is some HTML and accessibility issue.

    1. Wrap <div class="container"> into <main> .

    <main><div class="container">your code</div></main>

    1. Change button id you used same id for every btn <li><button class="btn" id="btn_3" type="submit">1</button></li>

    change it like btn_1 btn_2.

    I hope you find this helpful

    Happy Coding 😊.

  • Azeem Saifi•370
    @saifion33

    Hi cristina.

    Your solution is awesome, you done something new. That's appreciable.

    But i don't understand why you use href attribute with buttton.

    <button id=`btn-change` href=`#`>Change</button> that's not allowed in HTML.

    Happy Coding 😊

  • Azeem Saifi•370
    @saifion33

    Hi Kowsar.

    Your design is nice. Just increase card size little bit.

    My suggestion to you don't use react for simple and small project , this card can be make only html and css.

    you can see my solution of qr code component for reference.

    I hope you find this helpful.

    Happy Coding 😊

  • Azeem Saifi•370
    @saifion33

    Hi ilyasazer.

    You overall design is great .There is only one accessibility issue you should use atleast a level one heading

    so use <h1> tag instead of <p> tag.

    <h1 class="p1">Equilibrium #3429</h1>

    Happy coding.

    Marked as helpful
  • Azeem Saifi•370
    @saifion33

    Hi Tanmay.

    Your solution looks great. There is some accessibility issue if you want to improve here is some tips.

    1. Wrap <div class="rating-state"> into main tag <main> <div class="rating-state">your code</div></main>

    2. Use <h1> tag instead of <h2> tag. <h1 class="question"> How did we do?</h1>

    I hope you find this helpful.

    Happy Coding

  • Azeem Saifi•370
    @saifion33

    Hi sheema.

    Your solution is nice. If you want to improve here is some tips.

    1. Wrap <div class="container"> main tag <main><div class="container">your code</div>

    2. Use Overpass font family that is mention in style-guide.md. for <h1> use font-weight 700 and for <p> use 400 font- weight

    3. In style.css instead of .container ul li button use .button directly and add cursor:pointer property

    I hope you find this helpful.

    Happy Coding

    Marked as helpful
  • Azeem Saifi•370
    @saifion33

    Hi Mostafa.

    Your solution is nice. If you want to improve here is some tips.

    1. Wrap section in <main> tag. <main><section>your code</section><main>.

    2. Use <h2> tag instead of <p> for title <h1 class="para">Improve your front-end skills by building projects</h1>

    3. Use <p> tag for description instead of <span> tag <p class="para2" >Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>

    4. Increase size of section

    Marked as helpful
  • Azeem Saifi•370
    @saifion33

    Hi jordy

    Your solution is perfect . If you want to improve little bit decrease border-radius

    Happy Coding

  • Azeem Saifi•370
    @saifion33

    Hi molly

    Your solution looks great , however there are some issue like no heading tag inside section

    wrap your section into main tag <main><section class="order-card"> your code </section></main>

    and use h2 tag inside section, instead of <strong>

    <h2 class="order-title">Order Summary</h2>

    Marked as helpful
  • Azeem Saifi•370
    @saifion33

    Hi Achinta your solution is nice. If you want to improve accessibility

    replace <div class="card"> to <main class="card"> your code </main>

    Happy coding

    Marked as helpful
  • Azeem Saifi•370
    @saifion33

    Hi farhaan your solution working well, but there is some issue .

    if you want to improve here is tips

    use - insted of space in a tag <a href=`/countries/Antigua and Barbuda`>

    like <a href=`/countries/Antigua-and-Barbuda`>

    Marked as helpful
  • Azeem Saifi•370
    @saifion33

    Hi poncho your solution in perfect .

    If you want to improve here is some tips

    Replace <p class="bold">Improve your front-end skills by building projects</p> with h1 tag

    <h1 class="bold">Improve your front-end skills by building projects</h1>

    Happy Coding

  • Azeem Saifi•370
    @saifion33

    Hi MazzCode

    Your solution is perfect and well designed.

    Here is some following tips to improve.

    Replace <div class="wrapper">your code</div> to <main class="wrapper">your code</main>

    add alt attribute on img tag

    <img class="eye" src="/Media/images/icon-view.svg" alt="eye icon">

    <img class="cube" src=" /Media/images/image-equilibrium.jpg" alt="equilibrium image" >

    Remove attribution div

        Coded by <a href="https://github.com/MazzGuille" target="_blank">MazzCode</a>.</div> 

Happy coding
    Marked as helpful
  • Azeem Saifi•370
    @saifion33

    Hi Your solution in nice.

    Here is some tips to improve little bit

    wrap your card class in main tag

    <main><div class="card"> </div></main>

    Delete attribute div

        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Nayantha Yasiru</a>.
  </div>```
    Marked as helpful