Make better use of semantic h1..h6 headings for accessibility

This can help indexes and help accessibility tools navigate our site easier. Screen readers can be set to often only read headings of a page to get a quick summary. More info [FreeCodeCamp Applied Accessibility: Use Headings to Show Hierarchical Relationships of Content](https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content)

Consider the homepage for example (though we probably need to do a detailed pass over the website to fix other pages, this shouldn't be too complex I hope):

```js
const levels = [1, 2, 3, 4, 5, 6];
levels.map(lvl => document.getElementsByTagName(`h${lvl}`).length)
=> Array(6) [ 0, 0, 1, 0, 0, 0 ]
```

hows that we basically only use one `h3` and that's for "Starred Courses". Having good semantic hierarchical content could look like:

h1: ClassTranscribe (banner, logos, anything)
h2: All the sections, Starred Courses, Continue Watching, Advertising...
h3: Each course number and Title

Start by auditing the homepage and other rendered pages in the React frontend, using the issue's heading-count snippet to identify current semantics. Define the heading hierarchy for the banner, sections, and course entries, then verify that headings provide a navigable outline across the reviewed pages.

Written by the indexing model from the issue text.