HTML and CSS Vocabulary by vocabs: A Recommended Tool for Beginners

TL;DR

I highly recommend everyone to try out the "Vocabulary" tools from vocabs, which clearly show the meanings and roles of various HTML and CSS blocks.

• HTML Vocabulary
  • http://apps.workflower.fi/vocabs/html/en
• CSS Vocabulary
  • http://apps.workflower.fi/vocabs/css/en
• Other tools
  • http://apps.workflower.fi/vocabs/
  • GitHub
    • https://github.com/sakamies/vocabs

Why it is useful

I think the first thing beginners struggle with when they start studying HTML and CSS is figuring out which part is a tag, which is an attribute, or which part corresponds to a selector. This tool allows you to paste HTML or CSS code and click on the blocks to display what each part represents. It's amazing.

You should be able to understand how to use it as soon as you open the site.

Please give it a try!