All comments

• 

  Arthur Fernandez•10

  @akibiaonsSubmitted almost 2 years ago

  Using a grid was challenging since I had not practiced using a CSS grid in the last 3 months. I kept making mistakes in the template-columns and padding which made the img longer than the description.

  

  Responsive Card Component Project

  2

  30
  

  abdulllah butt•190

  @Abdullahbutt3434Posted almost 2 years ago

  Hi @akibiaons, 👋, good job on completing this challenge! 🎉. The navbar looks very nice in your solution. I have a suggestion that might be helpful for you. you can use one div as a wrapper around your img tag, give it width and height, and set the width and height of your image auto or 100%. that will help you to resize or adjust images according to the challenge.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Ko Loy Yee•50

  @koloyyeeSubmitted almost 2 years ago

  I am doing this challenge in vanilla css, look forward to advice if you guys have any, thanks!

  

  NFT Product Card

  1

  40
  

  abdulllah butt•190

  @Abdullahbutt3434Posted almost 2 years ago

  Hi @koloyyee, 👋, good job on completing this challenge! 🎉 I have a suggestion that might be helpful for you. you can use one more div as a wrapper around your article div and give it display flex with some CSS properties to put your complete content in the center as mentioned in the challenge Try this CSS with HTML like this:

  HTML Code

  <main>
             <article>
                       your code ......
              </article>
  </main>
  

  CSS Code

  main{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100vh;
  }
  

  you can try this.

  1
• 

  Samuel•260

  @5erious5amSubmitted about 2 years ago

  Any advice is appreciated. Help a brother grow!

  

  Responsive Interactive Rating Component

  1

  40
  

  abdulllah butt•190

  @Abdullahbutt3434Posted about 2 years ago

  Hi @samuel, 👋, good job on completing this challenge! 🎉 I have a suggestion that might be helpful for you. you can use one class instead of id to data from all of these inputs using JS.

  Your code:

  <fieldset class="labels">
                <input type="radio" name="rate" id="rate1" data="1">
                <input type="radio" name="rate" id="rate2" data="2">
                <input type="radio" name="rate" id="rate3" data="3">
                <input type="radio" name="rate" id="rate4" data="4">
                <input type="radio" name="rate" id="rate5" data="5">
  </fieldset>
  

  After changes

  <fieldset class="labels">
                <input type="radio" name="rate" class="ratingData" data="1">
                <input type="radio" name="rate" class="ratingData"  data="2">
                <input type="radio" name="rate" class="ratingData"  data="3">
                <input type="radio" name="rate" class="ratingData"  data="4">
                <input type="radio" name="rate" class="ratingData"  data="5">
  </fieldset>
  

  After this change, you can get data attributes with just a few lines of javascript code. const rating = document.querySelectorAll('.ratingData');

  Marked as helpful

  0