ivanmvh / to-do-list-imvh

In this project we will be using webpack to create, edit, and delete tasks from a list of tasks created by the user, the main goals of this project are: Use webpack to bundle JavaScript. Learn how to use proper ES6 syntax. Use ES6 modules to write modular JavaScript.
2 stars 0 forks source link

HTML and CSS best practices Do I follow? #7

Open ivanmvh opened 1 year ago

ivanmvh commented 1 year ago

List checks:

  1. Use the tags for each element (e.g., links, titles, etc.) and use HTML5 semantic tags (e.g., header, nav) over divs.
  2. Avoid lines of code that are too long (100 characters or more). (It's ok)
  3. Be careful with blank lines and indentation. (It's ok)
  4. Do not add blank lines, spaces, or indentations without a reason. (It's ok)
  5. For readability, add blank lines to separate large or logical code blocks. (It's ok)
  6. For readability, add two spaces of indentation. Do not use the tab key. (It's ok) on some code editors, you can set the tab button to do an X amount of spaces.
  7. Close all HTML elements. (It's ok) \
    always needs \
    (It's ok)
  8. Use lowercase for elements and attribute names. (It's ok).
    • use \
      not \
    • use \
      not \
      9.Always quote attribute values. use \
      not \
      10.. Use space-less equal signs. (It's ok) use \
      not \
  9. Do not use inline styles. Keep your style definition in a separate CSS file. (It's ok)
  10. Do not overuse !important rule in your CSS style definitions. (It's ok)
  11. Always use the class attribute for multiple elements (do not use ID selector for multiple elements). (It's ok)
  12. If you want to create a CSS rule for multiple elements, use a class attribute instead. For example, instead of using color: #3498db; 3 times . (Sometimes I prefer no use so many classes).

    intro1 {color: #3498db; font-size: 10px; font-weight: bold;}

    header {color: #3498db; font-size: 20px; background-color: green;}

    banner {color: #3498db; font-size: 30px; background-image: url(images/static.jpg);}

    you can create a class and add it to all element that need to be blue. .blue {color: #3498db;} 15 . Do not commit old pieces of code as inline comments. They will make your project look messy. If you need to review a previous version of your code, you can always use git history. -- In list_todos remember to erase a debug purpose code.