My solution gets rendered exactly as it should. I am personally happy with my solution but due to a lack of experience I am grateful for critique! Please let me know if there is a better or more efficient way to do this!
I know that the ID selectors in my index.css file are repetitive but I just copy and paste the ruleset and don’t find that this took me too much time.
Furthermore, please let me know if my use of the span element for the price tag in each section is correct.
My last specific question is: In the HTML lessons we learned that one should always prefer a more semantic element over a less semantic one (e.g. section element and div element). Still in the solution provided by codecademy the div element was used. Is there a reason for it?
I know that the ID selectors in my index.css file are repetitive but I just copy and paste the ruleset and don’t find that this took me too much time.
For one I’d say always go with class selectors unless you have a very good reason to use ID selectors (it will transport to other layouts better and save complications when things grow).
On that same topic, making the habit of choosing these good-practice concepts on simple projects help one apply it later to bigger projects. It’s a hard mindset to flip “on” if one isn’t constantly looking for efficient methods to coding. The time one saves in the short term is very small compared to the time that is saved in the long term with solid principles.
Just my constructive 2 cents. Time-crunched projects are a different story, but with no urgency I’d always err on the side of slower but more solid.
I think with div’s it’s down to pragmatism, if your site needs to be accessible, it should be semantic. If not, div’s are ok (especially on independent projects).
When learning, it’s always best to go as semantic as you can but for churning out a quick prototype later it’s not something that necessarily has to go into the first sketches (again, depending on context).