April 10, 2023 Training

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