Newsletter Sign Up With Success Message using plain JavaScript

Community feedback

• 

  Marcos Travaglini•6,210

  @BlackpachamamePosted 2 months ago

  Greetings! you have done a great job 😎

  📌 Some suggestions

  • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vh
  • Try to avoid using id to style your elements, it is best to do it through classes
  • A good tip for naming CSS classes is to use the BEM methodology.
  • You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements
  • You can add margin: 0 to your *, this will remove the default margin that comes on some HTML elements

  Marked as helpful

  1

  ---

  

  P

  kephalosk•260

  @kephaloskPosted 2 months ago

  @Blackpachamame thank you for your feedback :)

  • min-height: never thought of this. I try to keep it in mind for the next challenge
  • avoiding id: I learned in the learning path here to use id as often as I can, because you get direct access to id's with document.getElementById(). In case of css classes document.querySelector() has to traversal the dom. that takes more time. If you have 'unique' classes I would recommend using id to increase performance
  • using BEM: good point. was lazy with this lately xd
  • display: block to remove white space: omg, thank you for this tip. struggled often with that problem in the past :D
  • margin: 0 to *: wow, so obvious and I never came to that thaught. That makes totally more sense than listing up everything with h1, h2, p, etc. { margin: 0 } ^^

  Thank you for your time to help me getting better :)

  1

  

  Marcos Travaglini•6,210

  @BlackpachamamePosted 2 months ago

  @kephalosk It's a good point you make about the id, however I don't recommend it for styling. Also keep in mind that setting an id on an element doesn't prevent you from adding a class to that same element. That is, you can have both an id and a class on the same element. Using the id to manipulate the DOM with js and the class to add styles with CSS

  Marked as helpful

  1

  

  P

  kephalosk•260

  @kephaloskPosted 2 months ago

  @Blackpachamame I'm glad to hear this. I was annoyed during the last challenges that I couldn't jump directly from html-elements to the regarding css in IntelliJ, because id's do not allow that. I'm using both (id + class) from now on :)

  1