Desktop Only Design Using Flexbox

Community feedback

• 

  Vicktor•900

  @Victor-NyagudiPosted almost 2 years ago

  Good attempt on this one.

  A couple of things to note.

  I see an index.html and index2.html file in your repository. index2.html is basically empty, so I'm assuming you either don't need it or forgot to delete it.

  If you don't need any files, it's best to delete them or not add them to GitHub in the first place. There should also only be one index.html file, so having another can confuse other people looking at your code.

  Secondly, you used a <p> tag inside a <button> here. This is what's causing the error in the HTML validation report.

  <button class="add-to-cart" id="cart-button"> <img class="icon" src="images/icon-cart.svg"
            alt="shopping cart icon">
          <p>
            Add to
            Cart
          </p>
  </button>
  

  This HTML you've written is invalid because a <p> tag is a block-level element (takes the full width of the container it's in) while a <button> is an inline element (only takes the amount it needs).

  Only inline elements e.g. <span> can be inside other inline elements, so if you wanted to wrap "Add to Cart" inside the <button> to style it differently, I'd recommend a <span>.

  If you don't need to style the text in a special way, just put it inside the <button> without a wrapper.

  <button class="add-to-cart" id="cart-button"> 
       <img class="icon" src="images/icon-cart.svg" alt="shopping cart icon">
            Add to Cart // <- No <p> tag surrounding it
  </button>
  

  Finally, your solution isn't fully responsive. As the page is resized, the image and text eventually get cropped out.

  I'd recommend looking at other people's solutions and studying their code to see how they got theirs to be responsive. I've seen a couple of good ones, so you won't need to look very hard.

  Hope all this helps.

  All the best with future solutions.

  1
• 

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Wave, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  Element p is not allowed as a child of element button in this context, prefer to do this:

  <button class="add-to-cart" id="cart-button"> <img class="icon" src="images/icon-cart.svg" alt="shopping cart icon">
          <span> Add to Cart </span>
  </button>
  

  For the user to know that an element is clickable, we need to use the cursor: pointer; property, like this:

  .add-to-cart {
      cursor: pointer;
  }
  

  The rest is great!

  I hope it helps... 👍

  0