I’m a python SW engineer with a basic understanding of HTML, CSS, and JS, and I’m looking to learn responsive design. I’ve seen JS frameworks come and go so quickly that I’d like to buckle down and learn more fundamentals of CSS and vanilla JS that don’t involve SPA frameworks, React, Angular, SCSS, etc.
I’ve used Bootstrap with Flask, but Bootstrap doesn’t offer enough control for my liking.
So, I’m trying to seek out any learning resources that don’t rely heavily on a superset of JS or CSS and instead focus heavily on web standards that work across browsers and platforms.
I’ve seen MDN and W3Schools, but those are mostly a string of disconnected docs. I was hoping for a more cohesive course or book / video series.
Any suggestions welcome, and if I’m going about this the wrong way, don’t hesitate to tell me.
There's not a single solid answer along the lines of web standards as there's really not a web standard for how to DO responsive design. ... welcome to the land of front end development, where everything has 20 answers and none answers your question exactly... ;) Everyone will now probably point you towards more general CSS courses, and now I will too ;)
You've gotten a taste of being responsive with Bootstrap, with columns collapsing on top of each other at various breakpoints. Honestly IMO if you don't want to go down the rabbit hole, a good CSS framework like Bootstrap (or others) will fit the needs of most folks as far as responsive layout goes.
Otherwise responsive design isn't just layout changing with size, it can also be loading different images (smaller sized images if the screen is small) and etc. Then you're well into various CSS topics.
I suggest looking into more general CSS topics / courses that cover responsive design.
I really like https://frontendmasters.com/, they might not have a class just for what you're looking for, but there are some that cover much of what you're asking:
Worth keeping in mind that this is not really the dichotomy. The supersets of JS and CSS do work across browsers and platforms, because they are compiled down to JS and CSS.
If you're just wondering what to do to learn responsive design, first step would just be to read docs for the @media query [1]. Also, learn flexbox. Maybe you will want to learn some of the other new CSS constructs (grid, columns) if you don't care too much about backwards compatibility.
If you've done all that and still want to learn more, next step would probably be to deconstruct an existing library like Bootstrap or something that targets the platforms you want to.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queri...
Flexbox froggy https://flexboxfroggy.com/ is a good learning game for understanding flexbox
And Grid Garden https://cssgridgarden.com/ does the same for css grids.
Understanding both those is pretty core to understanding modern responsive design.