CSS at-rule RWD curriculum explanation

I’ve started working through the courses, and ran into issues on the ‘Responsive Web Design’ lesson ‘Building a Piano’. Step 27 just says “Now you need to make it responsive. Add a @media query with a max-width of 768px.” No big deal, I just did a quick search on this forum and found plenty of links to external resources that explained what I needed to do.

But then almost immediately again on Step 32 I run into “Add another @media rule to apply if the browser window is bigger than 769px but smaller than 1199px.” This being the second thing I didn’t have context for, I started digging a bit more. Searching through the forums for “piano” showed me I wasn’t the only one running into issues with these two steps.

I also found a github issue ( #46886) about when RWD media queries are taught. There it mentions Step 66 of ‘Building a Quiz’ as the first introduction of with syntax. (It mentions one before it that was being fixed when the issue was being discussed and now has been fixed.) I went and looked at Step 66 though, and it doesn’t use the word query even once.

I’d be more than willing to post on that issue and bring into context ‘Building a Piano’ Step 32’s syntax of multiple items not being explained, but I was wondering if at-rules were explained somewhere in general, or if there was another specific one that preceded the @media rule mention, or if the media rule is the first one? If so, where? If not, then shouldn’t there be more context about at-rules the first time?

It would be awesome if you could write your comments in that issue!

Will do, was mostly just looking for clarification first, on whether the @Media is the first at-rule discussed or not, as that changes how the first instance of it should be presented.