01. Semantic elements - Gr0mi4/Hello-World GitHub Wiki

  1. Read articles and learn about semantic HTML elements:
  1. Create layout for the design below. For each element use appropriate HTML tag, according to it's semantics. Consider using following tags:
  • Header
  • Footer
  • Main
  • Nav
  • Menu
  • Menuitem
  • Article
  • Section
  • P (paragraph)
  • Aside (for ad)
  • H1 (headline)

  1. There are links in the menu (each link takes all available space and they all are placed evenly). When you place the cursor above – a link is highlighted with underline. Disable it and make the hover effect like this:
  • background color becomes 30% lighter;
  • text color changes to 85% black color (rgba(0, 0, 0, 0.85));
  • all changes are smooth (use transition property). Learn how does transition work in CSS and use it properly to animate hover effect for links.
  1. Add 2 types of lists to the article text: ol and ul.
  2. Add subheadlines to the article text: h2.