Skip to content
OverviewSolutions
11
Comments
18
Azeem Saifi
@saifion33

All comments

  • Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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😊

    0
  • Jyoti•40
    @LazyIshuSubmitted about 2 years ago

    😟 Size problem. I would be glad to have your suggestions.

    Order Summary Card

    1
    Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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 😊.

    0
  • Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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 😊

    0
  • Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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
    0
  • Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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 😊.

    0
  • Cristina Kelly•140
    @cristinakellytSubmitted about 2 years ago

    Hi, guys!

    This is my solution to this challenge. But if you take the closest look, you'll see that it is a bit different from the one proposed.

    Since I am learning Javascript I used this challenge to practice it. I know that are some challenges here that have Javascript, but using this one wasn't in my plans when I started doing it. It turns out to be something bigger than what I expected, and I still have some ideas to implement, but since I can not see the final version of it yet I decided to publish it already before it differs a lot from the website challenge. But I will keep using this template to practice some Javascript.

    I know that the CSS file is too big, because of it, I will use SASS instead so it will be easier to maintain.

    This is what I implemented:

    • Change between dark and light mode
    • Interact with the 'Change' button on the card to select the type of the plan (Annual Plan or Monthly Plan) and therefore see its price -Click on the 'Proceed to Payment' button and go to a checkout pop-up where the user could enter their details and change the Billing Cycle -Go back to the card by the 'Back' button

    The dark mode was inspired by some solutions from @correlucas who makes very creatives ones

    All feedback is appreciated!

    Responsive card and checkout pop-up with VANILLA JAVASCRIPT/CSS

    4
    Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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 😊

    1
  • Kowsar•40
    @Kowsar98Submitted about 2 years ago

    Hi

    This is my first template project and I want to build some others. Please check my solution and tell me if this is correct enough and acceptable or not. I tried to be precise in estimating sizes in pixel correctly but I'm not sure it is true or not. I appreciate if there is a determined way, inform me that.

    thank you for your response in advance

    QR Code with react

    1
    Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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 😊

    0
  • ilyasazer•100
    @ilyasazerSubmitted about 2 years ago

    Hello, Frontend Mentor community. This is my solution to NFT preview card component challenge.

    Happy to hear feedback and advice!

    NFT preview card component

    2
    Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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
    0
  • Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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

    1
  • Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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
    0
  • Azeem Saifi•370
    @saifion33Posted about 2 years ago

    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
    0
  • Azeem Saifi•370
    @saifion33Posted about 2 years ago

    Hi jordy

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

    Happy Coding

    0