HTML and CSS for Beginners by Envato Tuts on Youtube
(cont. from yesterday)
CSS Box model vs alternative model – the css box model has you set the size of elements and then apply spacing and padding, the alternative model adds the spacing and padding before setting the size of the elements
Note: when two elements with margins are connected, they will collapse into the larger margin
In CSS, boxes have both outer properties that say whether something is block or inline but also an inner display type which dictates how things inside the box are laid out
You can use {display: block} or {display: inline} to tell something where to go
You can use {position: inside} or {position: outside} to specify where something should align to (for bullets, align bullets to edge vs align text to edge)
Remember difference between absolute (which acts entirely independently), fixed (which acts independently but is fixed to the viewport), sticky (which stays in a relative position until it can’t), and relative (which works in the flow of the page)
{justify-content: space-between} adds an equal number of space between elements within a container; {justify-content: space-evenly} adds an equal number of space between and outside of the elements within a container
Flexbox css grid is a responsive and flexible way to design on a grid, worth using I think
Remember the whole hierarchy thing? Include your mobile layout below your web layout
You can also use 1 fr to specify 1 fraction to divide and space
For example, 1 fr 1 fr is two columns, 1 fr 1 fr 1 fr 1 fr is four columns
Bonus, this is responsive, adaptable, and easy to execute
You can also use {margin-left/right: auto} to center something within the viewport
Working with media queries – using @media and setting parameters allows you to write code that only applies when those conditions are met. Use in conjunction with breakpoints
Key to responsive design! Remember, remember, remember
Make sure to use alt text on all critical elements – good for accessibility and SEO
Good practice is to find websites that you like the design of and to rebuild them. This allows you to discover and recall elements, but also to understand how to execute something based on what you want the end product to look like