Use the HTML5 and CSS3 aware html checker at https://jigsaw.w3.org/css-validator/
https://validator.w3.org/nu/#file (HTML Only)


Learn how to control relative sizing of elements with calculated values, eg set a dynamic font size range for different media width breakpoints.
Use min() max() and clamp() css math functions
https://web.dev/articles/min-max-clamp





THE DISPLAY PROPERTY
The display property has many useful options, eg display:inline-block.
See https://www.w3schools.com/cssref/pr_class_display.php
Use display:inline-block; to apply spacing and positional rules eg width, height, margin, etc to an inline element, eg span, code, p, etc...
For example create fixed width paragraphs or set the height of a span.
To show/hide responsive elements use display:block and display:none.
@media (min-width: 500px) {
 #banner_image_div {   display:none;  }
}
The above code example is a code tag displayed as inline-block with margins and padding.





PRE - a heredoc for html
See https://www.w3schools.com/tags/tag_pre.asp
pre cannot be used within a paragraph.

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks




window.matchMedia - Javascript program control by viewport width
if (window.matchMedia("(max-width: 600px)").matches) {
 // if the current display is 600px or less then do stuff  
}





Class css manipulation with javascript
See https://www.w3schools.com/jsref/prop_element_classlist.asp
See https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
for general information on manipulating classes of an element.
Sometimes elements don't always respond to javascript class changes as you'd expect.
Programatic class manipulation as a means of applying styles can quickly become complex and buggy - see "Javascript parse elements by class tag" below.
Create a style with the required attributes....
style>
 .hide_flexbox {
  display: none !important;
 }
/style>
Then apply the style..
document.getElementById("my_flexbox").classList.add('hide_flexbox');
and to remove it...
document.getElementById("my_flexbox").classList.remove('hide_flexbox');





Javascript parse elements by class tag
See https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
It is possible to parse elements by class and it is legal to create an empty css class and tag elements with it so they can be manipulated as an array of elements.
For example, menu items or layer switching disparate elements.
This is very useful for simply changing limited style params of elements without developing a complex chain of class swapping.
Why use an empty class? - you don't have to, you can treat any class as a group of elements in an array. However with an empty class
you can sensibly separate style characteristics from program flow and you can lump elements of multiple style classes under one tag class.
const my_tagged = document.getElementsByClassName("mytag");
for (let i = 0; i < my_tagged.length; i++) {
 my_tagged[i].style.backgroundColor = "red";
}





console.log - debugging javascript
Remember to use this!!
Tip - use outerHTML to see what an element is doing
console.log(document.getElementById("my_element").outerHTML);





Event Bugs - Stopping Event Propagation
See https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-propagation.php
I don't understand why I've never encountered this before but....
Apparently an event doesn't get spent after the handler is run. The event propagates to the parent object and back up the dom tree.
eg you have a clickable image within a div and your event handler handles the onClick BUT the event is not spent and is then passed up
to call the onClick event handler attached to the parent div. If the handler attached to the parent handles this type of event (very likely with onclick) it will be triggered.
To stop this add 'event.stopPropagation();' to the event handler attached to the image.
Then once the event is handled it is spent.
Since event propagation can potentially cause huge amounts of untraceable buggery it may make sense to always stop propagation
in all event handlers unless you specifically have a reason for an event to propagate
function test_event_propagation(){
 event.stopPropagation();// add this line to prevent propagation
 console.log('This event will not propagate!!!');
 // rest of my function here....
}
NOTE : To stop a container div capturing onlcick events from child elements add onclick="event.stopPropagation();" to the child element inline
eg < input type=text onclick="event.stopPropagation();" onchange="do something"> allows the text input onchange event to be captured without triggering the parent's onclick handler.





Use an HTML/CSS validator
See https://validator.w3.org/
Bad html/css can result in hard to trace quirky bugs. Also google marks down poor sites.
The W3C validator is html 5 and css3 capable.





Javascript Array - Methods and Parsing
See https://www.w3schools.com/js/js_array_methods.asp
See https://www.w3schools.com/js/js_array_iteration.asp
I keep forgetting this stuff.





CSS Calculated Values
See https://developer.mozilla.org/en-US/docs/Web/CSS/calc
left: min(270px, calc(100% - 60px));