Most people don’t retain what they learn by reading alone. It is only until they put it into practice, that’s when the real learning begins. When you see the mistakes in the code you write then you are able to see what you did wrong after it gets corrected. It is unlikely that you will make the same mistake twice after you troubleshoot and learn how to fix it. Reading is a good way to get started but writing code is more productive.
I understand the benefits of hands-on coding, but reading a well-written book (e.g. SitePoint) helps to give you a good 20,00 foot view. And if well-written, will give you a good roadmap.
While I find the MDN helpful once I understand broad concepts, it is only so-so for learning new things like Flexbox. (A SitePoint book would teach me the What, the Why, and the How with examples. MDN not so much so.)
But what about books from 2015-2017?
They says HTML 5 and CSS 3.
Also, to my OP, do you have any thoughts on what is the best way to tackle things?
To clarify, I guess I need a gameplan to tackle a few things.
First, like the mockup above, I need to create an abridged shopping cart of sorts, which gives a customer a high-level visual of what they are about to buy.
In simple terms, I personally see this as a series of Item rows which include a product thumbnail and a product description which is made up of a Descrption, Price, and Short Summary.
@coothead and others helped me learn a little about Flexbox and inline-block, and I have samples that work just fine. But when I asked for help with those, it was a single product, whereas for my Checkout page I need code that will scale to handle as many products as the user is buying. (Maybe I just wrap my singular code in divs? Maybe in an HTML table? Maybe in a CSS table? Other?)
Because the rest of my finished code-base is not responsive, I am not necessarily coding things responsively for my e-commerce module, but I am trying to plan for v2.0 which I hope to start on later this year.
So if I can easily implement something now that will be responsive later that is a plus.
Any suggestions on approaches that would work better for this 1st part would be help, understanding that many approaches could work.
Secondly, I need to build things like a proper Shopping Cart which again is really made up of rows of Product Details in the cart.
The difference here is that there are more parts, including Thumbnail, Product Name, Price, Quanity, Add/Remove buttons, Product Description.
In the old days, an HTML table seems like teh way to go, but I’m not sure what a more modern approach would be?
@coothead hinted at CSS Tables - which maybe I can find in one of my SitePoint books? - but there there are things like Inline-Block, Flexbox, DIVs, etc.
Any hints on which are better and worse approaches on this to be modern and mobile?
Not necessarily looking for code, but just enough of a sense of where to begin and start researching.