All comments

• 

  Sahil Sayyad• 20

  @Sahil-Sayyad

  Submitted almost 2 years ago

  

  A QR code component created with HTML & CSS.

  2

  30

  

  Azeem Saifi• 370

  @saifion33

  Posted almost 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

  @LazyIshu

  Submitted about 2 years ago

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

  

  Order Summary Card

  1

  20

  

  Azeem Saifi• 370

  @saifion33

  Posted 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
• 

  staticish• 190

  @staticish

  Submitted about 2 years ago

  Honestly, I am not too confident with my designing. My desktop design looks decent, but my mobile design just seems whack. Do tell me how it looks, and if there are any bug please let me know.

  

  Responsive Page using css grid, react router, react query

  1

  20

  

  Azeem Saifi• 370

  @saifion33

  Posted 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
• 

  Taofeek Ibrahim Opeyemi• 50

  @Coding-Algorithm

  Submitted about 2 years ago

  What do you think of the my way of implementing add and removing from cart?

  Do you find this challenging?

  

  Ecommerce Product Page using Next Js, Tailwind CSS

  1

  40

  

  Azeem Saifi• 370

  @saifion33

  Posted 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

  This comment has received 1 replyShow
• 

  Karnapu sushanth reddy• 80

  @jiran9031

  Submitted about 2 years ago

  

  interactive-rating-component

  1

  20

  

  Azeem Saifi• 370

  @saifion33

  Posted 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

  @cristinakellyt

  Submitted 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

  102

  

  Azeem Saifi• 370

  @saifion33

  Posted 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

  This comment has received 1 replyShow
• 

  Kowsar• 40

  @Kowsar98

  Submitted 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

  60

  

  Azeem Saifi• 370

  @saifion33

  Posted 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

  This comment has received 1 replyShow
• 

  ilyasazer• 100

  @ilyasazer

  Submitted 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

  30

  

  Azeem Saifi• 370

  @saifion33

  Posted 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

  This comment has received 1 replyShow
• 

  Tanmay Patel• 40

  @Tanmay810-glitch

  Submitted about 2 years ago

  

  Interactive Rating using CSS and jQuery

  1

  20

  

  Azeem Saifi• 370

  @saifion33

  Posted 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
• 

  Seema Hodade• 50

  @snhodade

  Submitted about 2 years ago

  

  Interactive Rating Card Component

  2

  20

  

  Azeem Saifi• 370

  @saifion33

  Posted 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
• 

  Mostafa Younis• 10

  @mostafayounis01

  Submitted about 2 years ago

  

  QR code component

  1

  30

  

  Azeem Saifi• 370

  @saifion33

  Posted 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

  This comment has received 1 replyShow
• 

  Jordy Mejia Castellano• 30

  @JOM3C4

  Submitted about 2 years ago

  What did you find difficult while building the project? Which areas of your code are you unsure of? Do you have any questions about best practices?

  

  Interactive Rating Component

  1

  30

  

  Azeem Saifi• 370

  @saifion33

  Posted about 2 years ago

  Hi jordy

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

  Happy Coding

  0