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?