ANIMATED TITLE

rem = relative to the setting of the user's browser - html (usually 16px by default)
vw = viewport => scales proportionnally to width of viewport
ch = limit of width based on the size of the font 0 character => ex: paragraph set at max 60 ch = max 60 zeros per line

legibility
font not too thin too uneven thickness; alignment, limited capital letters; contrast checker - higher; line length (ex stripe website) v&height (min 1.25- at least 1.25 times that font size with the hyphen); explicit links (ex instead of here, put download the document)

States
- none
- hover
- pressed
- focused (for active form field for ex)
style to select in dropdown next to class field in style tab - style inherited from above state

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

-Padding: space inside an element
- Margin = outside
negative margin = overlapping
alt = both sides at the same time
auto margin = center element horizontaly - can be done with little icon next to spacing in style tab
some displays (layout) don't work with auto margin on left & right
Grab the edge of the canvas to check responsive design
Use flex layout to align & justify in center - then manually add margin if several elements in ame row for ex

This is it

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text

Layouts

- block - heading, paragraph, section by default => takes full width - copy paste next line
- flex - jusfifying vertically or horizontaly - set properties on the parent element then you can select child elements and set other properties for that child
- grid - for 2 dimensional layouts - by default takes next available cell - put elements (paragraph, button...) within a div blocks in the grid layout - control drag into div block (or use navigator) => if i want to move content to another cell go to style - position - manual - drag
- inline block - elements in same line when hit edge of parent, next line
- inline - ex: style section of a paragraph i select a section create a span and create a style for the span - and only typography styles will have an effect because inline element. or text link that is an inline elements by default
- none - doesn't even take place on page, not only invisible - selectable in navigator - and seen in code so shouldn't be confidential
- in flex: activate wrap if we don't want elements to come out of the box

This is a grid

Just click here

This is a paragraph within a div block with a heading and a paragraph.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

I defined this section of the grid as left

Business Milestones

Make memorable announcements.

Business Milestones

Make memorable announcements.

Business Milestones

Make memorable announcements.

Position

Static
Relative (to its static position, moving it doesn't effect the position of the other elements on the page) - Z index: define order ex 1 is it front (the higher it stacks)
Z index of parent defines position of children even is z index of children higher in a parent element with lower
Absolute positioning: relative to body (and not the section it is in) so if set in left top corner than it's left top corner of the page, if i want it to be in left top corner of the section, set the section to relative because will look for the first element going up in hierarchy that is not set to static
Fixed positioning: respects the viewport - will be visible in same place - ex: cookie banner or popup. diff with absolute: doesn't change position when scrolling
Sticky: you have to set how far you can go (scroll) until it sticks = set the top value in position to 0 for instance (instead of auto) which means that when the element hits the upper border of screen, sticks. difference = still takes up space. for instance a navbar. if was est as fixed, the upper part of the content would be behind. usually sticky elements stick as long as their parent is visible on the screen
Float & clear with flexbox & grid, less usefull. ex image next to text like in word. floating has effect on elements above floating one in hierarchy. clear = cleared from elements that are floating (= not affected, goes below)

Button TextButton TextButton Text

Breakpoints

The one with star cascades down to smaller screens but also up to larger ones (that can be added if needed)
Grab edge of the canvas to see other displays (when border become blue, it is a common screen size) or set manually. 

Button TextButton TextButton Text

Interactions

Transform settings (see video element basics - sections - last part "create 3D perspective & organize content using sections")

Button TextButton TextButton Text
X

This is a pop up

Subscribe to our NL

OK will do