CSS

Question 1

Display types: Inline

Answer 1

Inline is the display type of most tags meant to be interspersed with text. Examples include a, strong, span and time.

Inline elements always keep their “line height”. This causes properties like margin and padding to behave strangely.

Question 2

Display types: block

Answer 2

Block elements differ from inline ones in that they do not respect line height. By default, block elements take up as much horizontal space as possible. Additionally, they do respect width and height properties.

Question 3

Display types: Inline block

Answer 3

Inline block elements are a combination of the block and inline elements. They do remain inline, but they force elements around them to respect both horizontal and vertical space. You can set the width and height properties of an inline block element.

Question 4

Display types: none

Answer 4

display: none removes the content from the (visible) page. Note that the element is still in the HTML and is viewable in the page’s source. It just isn’t rendered.

Question 5

Display types: flex

Answer 5

A W3C Last Call Working Draft module called Flexbox (Flexible Box) provides display: flex. It’s still not fully supported, but it’s pervasive and powerful enough to be used by modern web pages.

The Flexbox Layout provides a more efficient way to align and distribute space by styling “Flex containers” that automatically calculate the sizes of their children.

This brings up two main categories for all Flexbox properties:

“Properties for the Parent” (Flex Containers)
“Properties for the Children” (Flex Items)
To make an element into a Flex Container we simply give it the display: flex property. This attribute makes all child elements into Flex Items. The size of each flex item is then calculated to always fit within the container. The default direction of these elements is horizontal but can be easily changed with flex-direction.

Question 6

Steps to make a clock

Answer 6

1) Create hand divs that are stacked up on each other.
2) We want to rotate these divs somehow.
3) We want to use transform-origin 100% so that the axis starts at the end of the hand at the center of the div.
4) Now we are free to use the rotate(num deg) method.
5) we use transition-timing-function and a transition: all (secs)
6) in JS, we want to write a setDate function.
7) set up a new date and get the seconds from that using receiver.getSeconds();
8) From there, translate to degrees by dividing by 60. and multplying the quotient by 360

9) using a querySelector and passing in the appropriate hand (saing to a variable):
hand. style.

Question 7

What is a media query?

Answer 7

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Question 8

What is a breakpoint?

Answer 8

Using a media query, we can set which part of the page design will behave differently depending on the values of its class.

Question 9

What does it mean to Design for Mobile First?

Answer 9

Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).

Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:

Question 10

Orientation: Portrait/Landscape

Answer 10

Media queries can also be used to change layout of a page depending on the orientation of the browser.

You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called “Landscape” orientation:

Question 11

CSS Variables:

Answer 11

We can update these variables on any element and the selectors on the element.

Syntax:

\:root {
--base: (color of choice)
--spacing: (num px)
--blur: (num px)
}

Now we can apply any of these things to our tags.

img {
padding: var(–spacing);
background: var(–base);
}

Question 12

Dataset?

Answer 12

Dataset is an object that will contain data attributes.

Question 13

What does height inherit do and when should we use it?

Answer 13

ewfrwer

Question 14

flex panels: How to get the panels to evenly distribute space?

Answer 14

Flex: 1 - all panels evenly distribute. Any child containers with different flex numbers will adjust to the parent proportionally (flex: 5 in a child will expand the div 5x size).

Question 15

Whats an effective way to visually gauge flexboox activity?

Answer 15

open up console and make borders a unique color.

Question 16

flex panels: Why would we want to nest flex containers?

Answer 16

If we have text that we want placed in a specific manner across flex boxes.

Question 17

What does :first-child or :last-child mean?

Answer 17

apply certain visual characteristics to

Question 18

What does translate X/Y mean?

Answer 18

shifts content across the div.

Question 19

What vanilla JS functions do we use to grab CSS classes?

Answer 19

document.querySelector or document.querySelectorAll

Question 20

What vanilla JS function toggles class activity?

Answer 20

receiver.toggle(‘class’)

Question 21

without jQuery, how can we click on something and have it execute _ function?

Answer 21

receiver.addEventListener(‘click’, func)

Question 22

CSS Grid Layouts.

Answer 22

Whats bad about Bootstrap:
It moves the HTML around and makes things unstable.

Float and Flex are hacks.

Main sections:
grid container
grid item 
grid line 
grid cell 
grid track 
grid area 
grid gap

Question 23

CSS Grid Layouts: Container

Answer 23

Element containing a grid defined by setting

display: grid;

Question 24

CSS Grid Layouts: Line

Answer 24

Grid lines are referenced by number, starting and ending with the outer borders of the grid.

Question 25

CSS Grid Layouts: item

Answer 25

Element that is a direct descendant of the grid container,

Question 26

CSS Grid Layouts: cell

Answer 26

The intersection between a grid row and a grid column. Effectively the same as a table cell.

Question 27

CSS Grid Layouts: area

Answer 27

Rectangular area between four specified grid lines. Grid areas can cover one or ore cells,

Question 28

CSS Grid Layouts: track

Answer 28

The space between two or more adjacent grid lines. Row tracks are horizontal, Column tracks vertical

Question 29

CSS Grid Layouts: gap

Answer 29

Empty Space between grid tracks aka gutters,

Question 30

CSS Grid in a nutshell

Answer 30

1) Define a grid

2) Place items within the grid

Question 31

CSS Grid: Practical approach

Answer 31

1) build accessible moblfirst layout without grid
2) Use mobile-first layout as fallback for all browsers
3) Use @supppors to detect grid support
4) at the appropriate breakpont, create layout with grid and grid-areas
5) Explore new layouts as viewport widens.