The W3schools tutorials provide "how-tos" for each property and tag used in these examples, but they do not address combining these tags and properties in various ways. I have attempted to illustrate the capabilities of a few when this is done. The content tag is not designed to be used exactly as I have on this page, but I experimented to determine its capabilities.
Each of the uses of the properties can be changed in various ways. On this page, for example, the white circles have been removed when viewed on a tablet or smartphone. The line height in the navigation section here has been increased above its normal value to make it easier to click on the links. I also placed the navigation area at the top for a narrow-screen device. Although I usually make the navigation area fixed to keep it available at all times, that is only my personal preference, and many people let the navigation area move with the page content.
Although coding for mobile devices is commonly used by HTML writers, I have used it here and linked to an example since many users are not aware that this is done. (That means it works as it should!)
If you want to begin with more basic "stuff" than I show in these examples, go to these basic concepts.
If you need a break, check out this page for what I hope is humor. You won't learn CSS or html code, but perhaps you'll get a laugh.