Ping Product Launch

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hey,

  There are a few solutions to your svg problem. You could use them as inline svgs (so you copy the long ugly-looking code and embed it in your html). This way you can modify them to your liking, for example target their fill property with css and by doing so their colour would change. The other way would be to use an icon library like Font Awesome. They have icons pretty similar to the ones that come with the challenge files. I did both in my previous challenges, and neither are very complicated to do ^^

  You can do a few other things to improve on your solution:

  1. The position of your error message is fine in mobile view but really off on desktop.

  2. For the title, you might want to use a heading instead of a <p>.

  3. There's no need to nest a <p> inside <button> elements, just use plain text.

  4. Your social images should be wrapped in <a> tags.

  Other than these, it looks good, so well done ^^ Happy coding!

  Marked as helpful

  1

  ---

  

  Max Kaiser•300

  @maxkaiser100Posted over 2 years ago

  @FluffyKas Wow! Those are great notes!!! Thanks so much. Will try the SVG path manipulation as I'm ahundo-p I'll come across that again and again.

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Max! 👋

  Like @FluffyKas has said to you, you can try using inline SVG and then use the svg path selector to change the color of the icon with the fill property.

  I used this trick where I did the following.

  svg path {
    fill: currentColor;
  }
  

  This way, I can just change the color of the anchor tag and like magic, the icon color also changed.

  .link:hover {
    color: red;
  }
  

  Now, some additional feedback from me.

  • I highly suggest using the correct type for the input element. It's an email input so the type should be email. The correct input type will make it easier for the mobile user to fill the form because the virtual keyboard keys changed based on the type of the input.
  • I recommend using a code formatted like Prettier to format your code otherwise write your code with consistent style (e.g. the indentation, quotes, whitespace, etc).
  • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).
  • Changing the html or root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. So, I recommend setting the font-size on the body element instead or even better on the main element instead.

  That's it! Hope this helps. 😊

  Marked as helpful

  0