* Use `div, span, ul, li, a html tags` to group page content  
* Use `flexbox` to position html elements of the page  
* Use `relative`, `absolute` positioning to align elements relative to other elements on the same page  
* Use viewport sizing convention to define the size of container such as `100vh`   
* use css calculation method to define the size of container such as `calc(100vh -80px)`  
* use css calculation method to defind input field border-radious such as `calc(0.5 * 44px)`    
* use `bottom: 0` to auto align the footer to bottom of page regardless of how large or small the element container above it is by assigning relative positioning to the container above it and absolute positioning in the footer container.  
* Remove all pre-defined/hidden CSS margin and padding  
* Use `justify-content: space-between` and `list-style-type: none` to align two lists of two items in one row with one list on left and one list on right.
* Use `.hover` to change how an image or link looks as we move mouse pointer over it.  
* use `cursor: pointer` on `.hover` to change mouse pointer to hand pointer.  
* use `input:focus::-webkit-input-placeholder {color: transparent}` to clear placeholder text in search inputbox
* use `[type="search"]::-webkit-search-cancel-button`to remove default search input box (clear) icon
* use '[type="search"]::-webkit-search-decoration` to clear any default search input box settings
* use `padding-right = 50px` to avoid overlap of microphone icon with user input search string