Crash Course

Question 1

Static(Auto) Positioning

Answer 1

The default position allowing the element to display as defined under the layout selection. The normal flow of content

Question 2

Box model

Answer 2

The simple idea that each of these HTML elements is treated as a box

Question 3

The word for website layout levels

Answer 3

Hierarchy

Question 4

What are the three aspects of element hierarchy?

Answer 4

1. Nesting
2. Text Styling
3. Sizing

Question 5

CMS

Answer 5

Content managment system

Question 6

Relative Positioning

Answer 6

Positions an element relative to its static or default position as defined under the layout section. It allows you to move an element with affecting the other elements around it.
Overlaps other elements with affecting the document flow.

Question 7

Absolute Positioning

Answer 7

Positions an element relative to its closest parent or to the body if no parent is positioned. The element is yanked out and position itself around the parent element.

Question 8

Fixed Positioning

Answer 8

Positions an element relative to the browser window, so it stays in place as the page is scrolled. It’s relative to the viewport, not the parent element.

Question 9

Sticky Positioning

Answer 9

Fixes and element to the canvas only after user scrolls past a specific location on page.

Question 10

html

Answer 10

content

Question 11

css

Answer 11

style

Question 12

javascript

Answer 12

interaction

Question 13

In the head tag you put in

Answer 13

The settings of the webpage. All the information about the webpage eg.) meta tags

Question 14

In the body tag you put in

Answer 14

Everything the user will see in the front

Question 15

Text styling and sizing passes down through

Answer 15

hierarchy

Question 16

T or F: min height will still respect the contents height

Answer 16

True

Question 17

What is a RTE?

Answer 17

Rich Text, A one-stop shop for a ton of content: headings, paragraphs, links, lists, blockquotes, images, or videos.

Question 18

Block elements

Answer 18

Block elements stack on top of each other. They start on a new line and take up the full entire width of their parent. They do not wrap.

Question 19

Flexbox layout

Answer 19

Flex lays out its child elements on a horizontal or vertical axis. Great for justifying and aligning content along one dimension.

Question 20

Inline-block elements

Answer 20

Inline elements sit inline. Sits next to eachother. They do wrap if their width hits their parent’s width.

Question 21

Grid layout

Answer 21

Great for justifying and aligning content along two-dimensional layout. You can set columns and rows on a parent element. and child elements can be placed inside.

Question 22

vh

Answer 22

viewport height

Question 23

vw

Answer 23

viewport width

Question 24

min and max lets you add a ___ or ___ to a value.

Answer 24

floor or ceiling. Allows you to put a minimums and maximums to put a floor or ceiling on Dimensions when we don’t want things to go out of control.

Question 25

Flex container

Answer 25

The parent element in a flex layout. Flexbox container starts when you create a flex container out of something.

Question 26

Flex Items

Answer 26

The child element in a flex layout. Any of the items directly inside (any direct children of the flex container) are referred to as flex items.

Question 27

For one dimensional layouts, it’s great to use _____. Vertical OR Horizontal

Answer 27

Flexbox

Question 28

Grid Area

Answer 28

It allows you to decide your layout before you place a single element. Elements placed in an area will move and resize with the area.

Question 29

What is a em unit. Explain.

Answer 29

Every browser has a default font size for example 16px. so 1em will equal 16px unless you change the default font size. 2em, in this case, would be 32px. ems are relative to the font size of it’s parent.

Question 30

What is a rem unit. Explain.

Answer 30

Root ems. Rems are relative to the HTML font size. Which is going to respect the browser’s default font size. Rem ignores it’s parent’s size for ex the body’s font size and goes all the way to the root.

Question 31

What is a text shadow?

Answer 31

Shadow that directly applies to typography

Question 32

What are breakpoints?

Answer 32

Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information.

Question 33

Mobile First

Answer 33

Approaching the design mobile first is the best approach for a responsive design.