I'd like also to get inspired by quality work on the web, but inspecting websites pretty much never yields anything that resembles a readable document, HTML semantics and CSS quality are generally in a disastrous state.
Thus my question, can you suggest websites who's html and css can be considered of extremely high standards?
I can't list many safe for MDN and wikipedia.
The website should work without JS but all the interactive features, gimmicks and improving parts are done with a bit of JS and CSS trickery ;)
Code for the weblog is statically pregenerated, and the article format is markdown.
I mostly built it for fun over the holidays, and decided to keep it as a creative space. Don't care what others think of it, and will never use angular or some other overengineered babel-using framework for my personal website.
I think that's what the (old) web was about: discovery of interesting corners on the web. And I want to keep that spirit alive.
Maybe that helps point you in the right direction.
My advice: Just do your best, pick a direction that makes sense to you, be consistent with it, and be OK with changing your approach to work with a new team.
I believe many people have tried hard to do the right thing. But the truth of the matter is that HTML as a markup vocabulary is stuck at a 80's core language with a 90's vision for casual academic publishing mixed in, and then since mid/late 90's, CSS (and a gazillion of divs and spans) has been kludged on top to make up for HTML's lack of evolution and inappropriateness to describe digital content in this millenium. Yes we can kindof make it work, but it cannot be said that today's web stack is even remotely usable by actual content creators like even Flash used to be. Instead, we're churning through complex JavaScript frameworks, new languages, and entire new runtimes to exercise browsers into a workable platform for web apps with a laughable power budget.
What's left of grand visions for "semantic" HTML and structure/presentation separation, invented to lend credit to the HTML/CSS/JS trifecta after the fact more than anything else IMO, is maybe accessibility to some degree (which is at least something) and a hope for well-meant, bona fide SEO; and even the latter isn't helping anyone, and hasn't for a long time.
The fundamental flaw of the proposed structure/presentation dichotomy is that a piece of digital content should be captured close to the "intent" of its author, which in the majority of cases is very different from an 80's idea of an academic paper with section, subsections, and paragraphs.
This despite HTML being based on SGML which had always all means necessary to evolve markup in a highly structured fashion, and even encourages using your own vocabulary to map into an output/presentation vocabulary. For example, to model a sub-vocabulary for capturing a discussion thread like the one we're having here, which seems quite a natural use case for HTML - but nope, we must use hierarchical text and then pile a shit-tonne of CSS over it. Is that really "semantic", or rather a case of eternal September and embarrassing self-delusion?
One of the ways that I learn is by picking out a given HTML tag, for example, from the soup of a website's source code. And then reading the MDN page for that tag, which has information on the idiomatic ways to use it.
Professional web developers don't have time to create elaborate abstractions for the sake of making their code "semantic" and easily understood by visitors reading their website's source.
Websites are ultimately for the user agent. "Semantic" HTML and CSS were never really so. They were guidelines to create code that was way more abstract than necessary and smuggled in a lot of terminology and concepts from print media, all of which were somewhat important before there were things like Firebug and proper dev tools.