Responsive Web Design

Question 1

Columns

Answer 1

Columns are defined as the vertical sections that span the width of a page. In web design, it’s common to see layouts consisting of 12 or 16 columns, while other may only feature three columns. Defining the number of columns depends on what’s appropriate for your design, device, and or screen viewing size. They can be dependent on each other, meaning they are used to organize related content such as a continuation of a paragraph. They can also be independent of each other, meaning they are used for organizing the layout of unrelated content such as a sidebar. This allows for the flexibility of organizing information.

Question 2

Name three major components of the grid anatomy

Answer 2

When designing a website, the grid comprises three major components: columns, gutters, and margins.

Question 3

Gutters

Answer 3

a gutter is the negative space between each column. Gutters help in ensuring the columns don’t run together, which would negate the purpose of using a column-based grid. No content can spill into the gutter unless it is using the next column.

Question 4

Margins

Answer 4

Margins appear on the left and right sides of the column-based grid. These ensure the content of your designs doesn’t match up to the edges of the browser window.

It’s important to note, margins may vary depending on the width of the grid, browser window, or device. For larger displays, margins may be very noticeable while on smaller screens, they may have the same width as a gutter.

Question 5

Grid rows

Answer 5

Rows are the horizontal lines on a grid. Think of rows as invisible boxes that group content together by height. Rows are commonly used in web designs to group content together and re-order other content to allow for more whitespace.

Question 6

What’s the difference between display: flex; and display: inline-flex;?

Answer 6

Much like the difference between display: block; and display: inline;, the main difference between display: flex; and display: inline-flex; is that display: inline-flex; will make the flex container an inline element while its content maintains its flexbox properties.

Question 7

flex-start (justify-content property)

Answer 7

all items will be positioned in order, starting from the left of the parent container, with no extra space between or before them.

Question 8

five commonly used values for the justify-content property

Answer 8

flex-start
flex-end
center
space-around
space-between

Question 9

flex-end (justify-content property)

Answer 9

all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.

Question 10

center (justify-content property)

Answer 10

all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.

Question 11

space-around (justify-content property)

Answer 11

items will be positioned with equal space before and after each item, resulting in double the space between elements.

Question 12

space-between (justify-content property)

Answer 12

items will be positioned with equal space between them, but no extra space before the first or after the last elements.

Question 13

five commonly used values for the align-items property

Answer 13

flex-start
flex-end
center
baseline
stretch

Question 14

flex-start (align-items property)

Answer 14

all elements will be positioned at the top of the parent container.

Question 15

flex-end (align-items property)

Answer 15

all elements will be positioned at the bottom of the parent container.

Question 16

center (align-items property)

Answer 16

the center of all elements will be positioned halfway between the top and bottom of the parent container.

Question 17

baseline (align-items property)

Answer 17

the bottom of the content of all items will be aligned with each other.

Question 18

stretch (align-items property)

Answer 18

if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).

Question 19

flex-grow

Answer 19

The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others. the default value of flex-grow is 0. Margins are unaffected by flex-grow and flex-shrink.

Question 20

flex-shrink

Answer 20

the flex-shrink property can be used to specify which elements will shrink and in what proportions. the default value of flex-shrink is 1, and this causes the flex items to shrink when the flex container is too small, even though we do not declare the property. Margins are unaffected by flex-grow and flex-shrink.

Question 21

flex-basis

Answer 21

flex-basis allows us to specify the width of an item before it stretches or shrinks.

Question 22

Is flex-basis the same as setting width?

Answer 22

It’s not! We can think of flex-basis as the width OR height (depending on flex-direction) of our flex items before they are constrained by a flex container.

Question 23

flex (property)

Answer 23

The shorthand flex property provides a convenient way for specifying how elements stretch and shrink, while simplifying the CSS required. The flex property allows you to declare flex-grow, flex-shrink, and flex-basis all in one line.
Note: The flex property is different from the flex value used for the display property.

Question 24

Give an example of declaring declare flex-grow, flex-shrink, and flex-basis all in one line.

Answer 24

.small {
flex: 1 2 100px;
}

Question 25

Give a few instances where using the shorthand flex property is unnecessary to use:

Answer 25

• To set only the flex-basis and use the default flex-shrink: 1;
• To set only the flex-basis and flex-shrink properties without specifying a flex-grow value as well, because we cannot set flex-shrink and flex-basis using two values for the flex property
• To use only flex-shrink or flex-basis, we can however set flex-grow if we use a single value on the flex property

Question 26

flex-wrap property

Answer 26

Sometimes, we don’t want our content to shrink to fit its container. Instead, we might want flex items to move to the next line when necessary. This can be declared with the flex-wrap property.
Note: The flex-wrap property is declared on flex containers.

Question 27

Give the three values of the flex-wrap property

Answer 27

wrap
wrap-reverse
nowrap

Question 28

wrap (flex-wrap value)

Answer 28

child elements of a flex container that don’t fit into a row will move down to the next line

Question 29

wrap-reverse (flex-wrap value)

Answer 29

the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse)

Question 30

nowrap (flex-wrap value)

Answer 30

prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.

Question 31

align-content

Answer 31

If a flex container has multiple rows of content, we can use align-content to space the rows from top to bottom.
Note: The align-content property is declared on flex containers.

Question 32

Give the more commonly used align-content values?

Answer 32

flex-start
flex-end
center
space-between
space-around
stretch

Question 33

flex-start (align-content value)

Answer 33

all rows of elements will be positioned at the top of the parent container with no extra space between.

Question 34

flex-end (align-content value)

Answer 34

all rows of elements will be positioned at the bottom of the parent container with no extra space between.

Question 35

center (align-content value)

Answer 35

all rows of elements will be positioned at the center of the parent element with no extra space between.

Question 36

space-between (align-content value)

Answer 36

all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last.

Question 37

space-around (align-content value)

Answer 37

all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element.

Question 38

stretch (align-content value)

Answer 38

if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).

Question 39

Name the axes of the flex containers.

Answer 39

flex containers have two axes: a main axis and a cross axis. By default, the main axis is horizontal and the cross axis is vertical.

Question 40

Explain the main axis and what it is used for.

Answer 40

The main axis is horizontal. The main axis is used to position flex items with the following properties:

justify-content
flex-wrap
flex-grow
flex-shrink

Question 41

Explain the cross axis and what it is used for.

Answer 41

The cross axis is vertical. The cross axis is used to position flex items with the following properties:

align-items
align-content

Question 42

Name which properties we position using the main axis.

Answer 42

The main axis is used to position flex items with the following properties:

justify-content
flex-wrap
flex-grow
flex-shrink

Question 43

Name which properties we position using the cross axis.

Answer 43

The cross axis is used to position flex items with the following properties:

align-items
align-content

Question 44

flex-direction property

Answer 44

This property makes the main axis and cross axis be interchangeable. We can switch them using this property. If we add the flex-direction property and give it a value of column, the flex items will be ordered vertically, not horizontally.
Note: The flex-direction property is declared on flex containers.

Question 45

Name the four values of the flex-direction property

Answer 45

The flex-direction property can accept four values:

row
row-reverse
column
column-reverse

Question 46

row (flex-direction)

Answer 46

elements will be positioned from left to right across the parent element starting from the top left corner (default).

Question 47

row-reverse (flex-direction)

Answer 47

elements will be positioned from right to left across the parent element starting from the top right corner.

Question 48

column (flex-direction)

Answer 48

elements will be positioned from top to bottom of the parent element starting from the top left corner.

Question 49

column-reverse (flex-direction)

Answer 49

elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.

Question 50

Why would we use flex-direction: row-reverse/column-reverse;?

Answer 50

The use of flex-direction: row-reverse/column-reverse; will mostly be decided by design/layout specifications for our site, however, a couple great use cases:

altering the order of flex items with CSS instead of JavaScript, for example: clicking a sort button could switch order of elements from ascending to descending
altering the order of flex items for CSS animations/transitions/effects

Question 51

flex-flow

Answer 51

Like the shorthand flex property, the shorthand flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line.
The first value in the flex-flow declaration is a flex-direction value and the second is a flex-wrap value. All values for flex-direction and flex-wrap are accepted.
Note: The flex-flow property is declared on flex containers.

Question 52

CSS Flexbox

Answer 52

The CSS display: flex property sets an HTML element as a block level flex container which takes the full width of its parent container. Any child elements that reside within the flex container are called flex items.

Flex items change their size and location in response to the size and position of their parent container.

div {
display: flex;
}

Question 53

justify-content Property

Answer 53

The CSS justify-content flexbox property defines how the browser distributes space between and around content items along the main-axis of their container. This is when the content items do not use all available space on the major-axis (horizontally).

div {
display: flex;
justify-content: center;
}

Question 54

Values of justify-content

Answer 54

justify-content can have the values of:

flex-start
flex-end
center
space-between
space-around

Question 55

flex Property

Answer 55

The flex CSS property specifies how a flex item will grow or shrink so as to fit within the space available in its flex container. This is a shorthand property that declares the following properties in order on a single line:

flex-grow
flex-shrink
flex-basis

/* Three properties declared on three lines: */
.first-flex-item {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 150px;
}

/* Same three properties declared on one line: */
.first-flex-item {
flex: 2 1 150px;
}

Question 56

flex-direction Property

Answer 56

The flex-direction CSS property specifies how flex items are placed in the flex container - either vertically or horizontally. This property also determines whether those flex items appear in order or in reverse order.

Question 57

align-content Property

Answer 57

The align-content property modifies the behavior of the flex-wrap property. It determines how to space rows from top to bottom (ie. along the cross axis). Multiple rows of items are needed for this property to take effect.

Question 58

flex-grow Property

Answer 58

The CSS flex-grow property allows flex items to grow as the parent container increases in size horizontally. This property accepts numerical values and specifies how an element should grow relative to its sibling elements based on this value.

The default value for this property is 0.

.panelA {
width: 100px;
flex-grow: 1;
}

/* This panelB element will stretch twice wider than the panelA element */
.panelB {
width: 100px;
flex-grow: 2;
}

Question 59

flex-shrink Property

Answer 59

The CSS flex-shrink property determines how an element should shrink as the parent container decreases in size horizontally. This property accepts a numerical value which specifies the ratios for the shrinkage of a flex item compared to its other sibling elements within its parent container.

The default value for this property is 1.

.container {
display: flex;
}

.item-a {
flex-shrink: 1;
/* The value 1 indicates that the item should shrink. */
}

.item-b {
flex-shrink: 2;
/* The value 2 indicates that the item should shrink twice than the element item-a. */
}

Question 60

Css flex-basis property

Answer 60

The flex-basis CSS property sets the initial base size for a flex item before any other space is distributed according to other flex properties.

// Default Syntax
flex-basis: auto;

Question 61

The CSS flex-flow property

Answer 61

The CSS property flex-flow provides a shorthand for the properties flex-direction and flex-wrap. The value of the flex-direction property specifies the direction of the flex items and the value of the flex-wrap property allows flex items to move to the next line instead of shrinking to fit inside the flex container. The flex-flow property should be declared on the flex container.

// In this example code block, “column” is the value of the property “flex-direction” and “wrap” is the value of the property “flex-wrap”.

.container {
display: flex;
flex-flow: column wrap;
}

Question 62

CSS display: inline-flex property

Answer 62

The CSS display: inline-flex property sets an HTML element as an inline flex container which takes only the required space for the content. Any child elements that reside within the flex container are called flex items. Flex items change their size and location in response to the size and position of their parent container.

.container{
display: inline-flex;
}

Question 63

Flexbox Properties align-items

Answer 63

When working with CSS flexbox align-items is used to align flex items vertically within a parent container.

Question 64

Css flex-wrap property

Answer 64

The flex-wrap property specifies whether flex items should wrap or not. This applies to flex items only. Once you tell your container to flex-wrap, wrapping become a priority over shrinking. Flex items will only begin to wrap if their combined flex-basis value is greater than the current size of their flex container.

.container {
display: flex;
flex-wrap: wrap;
width: 200px;
}

Question 65

How do we decide when to use flexbox?

Answer 65

When deciding whether to use flexbox or not we should consider a few things:

Can the scaling, spacing, alignment, or ordering issue be solved using more basic CSS? If so we should not use flexbox.

Do we want to use flexbox to create an entire page layout? If yes, consider using other CSS tools, like CSS Grid, in conjunction with flexbox - as flexbox is not designed to create entire page layouts.

Do we need an easy way to align, control spacing, scale, and/or order items in a vertical or horizontal direction within a container? Use flexbox!

Question 66

Some common use cases for flexbox:

Answer 66

• page navigation, including spacing items and stretching/shrinking items as desired
• centering items easily
• easily flipping content or switching the order of content

Question 67

What is the order of four values separated by slashes in grid area?

Answer 67

This is how grid-area will interpret those values.

grid-row-start
grid-column-start
grid-row-end
grid-column-end

Question 68

grid-template-columns

Answer 68

grid-template-columns defines the number and sizes of the columns of the grid

Question 69

grid-template-rows

Answer 69

grid-template-rows defines the number and sizes of the rows of the grid

Question 70

grid-template

Answer 70

grid-template is a shorthand for defining both grid-template-columns and grid-template-rows in one line

Question 71

row-gap

Answer 71

row-gap puts blank space between the rows of the grid

Question 72

column-gap

Answer 72

column-gap puts blank space between the columns of the grid

Question 73

gap

Answer 73

gap is a shorthand for defining both row-gap and column-gap in one line

Question 74

grid-row-start and grid-row-end

Answer 74

grid-row-start and grid-row-end makes elements span certain rows of the grid

Question 75

grid-column-start and grid-column-end

Answer 75

grid-column-start and grid-column-end makes elements span certain columns of the grid

Question 76

grid-area

Answer 76

grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, all in one line

Question 77

Grid Template Columns

Answer 77

grid-container {

To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value can be either in pixels(px) or percentages(%).

display: grid;
width: 100px;
grid-template-columns: 20px 20% 60%;
}

Question 78

fr Relative Unit

Answer 78

The CSS grid relative sizing unit fr is used to split rows and/or columns into proportional distances. Each fr unit is a fraction of the grid’s overall length and width. If a fixed unit is used along with fr (like pixels for example), then the fr units will only be proportional to the distance left over.

/*
In this example, the second column take 60px of the avaiable 100px so the first and third columns split the remaining available 40px into two parts (1fr = 50% or 20px)
*/

.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
}

Question 79

Grid Gap

Answer 79

grid-container {

The CSS grid-gap property is a shorthand way of setting the two properties grid-row-gap and grid-column-gap. It is used to determine the size of the gap between each row and each column. The first value sets the size of the gap between rows and while the second value sets the size of the gap between columns.

// The distance between rows is 20px
// The distance between columns is 10px

display: grid;
grid-gap: 20px 10px;
}

Question 80

CSS Block Level Grid

Answer 80

grid-container {

CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a block-level grid container use display: grid property/value. The nested elements inside this element are called grid items.

display: grid;
}

Question 81

CSS grid-row

Answer 81

The CSS grid-row property is shorthand for the grid-row-start and grid-row-end properties specifying a grid item’s size and location within the grid row. The starting and ending row values are separated by a /. There is a corresponding grid-column property shorthand that implements the same behavior for columns.

/*CSS Syntax */
grid-row: grid-row-start / grid-row-end;

/Example/
.item {
grid-row: 1 / span 2;
}

Question 82

CSS Inline Level Grid

Answer 82

grid-container {

CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a inline-level grid container use display: inline-grid property/value. The nested elements inside this element are called grid items.

The difference between the values inline-grid and grid is that the inline-grid will make the element inline while grid will make it a block-level element.

display: inline-grid;
}

Question 83

minmax() Function

Answer 83

The CSS Grid minmax() function accepts two parameters:

The first parameter is the minimum size of a row or column.
The second parameter is the maximum size.
The grid must have a variable width for the minmax() function.

If the maximum value is less than the minimum, then the maximum value is ignored and only the minimum value is used.

The function can be used in the values of the grid-template-rows, grid-template-columns and grid-template properties.

/* In this example, the second column will vary in size between 100px and 500px depending on the size of the web browser” */

.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}

Question 84

grid-row-start & grid-row-end

Answer 84

The CSS grid-row-start and grid-row-end properties allow single grid items to take up multiple rows. The grid-row-start property defines on which row-line the item will start. The grid-row-end property defines how many rows an item will span, or on which row-line the item will end. The keyword span can be used with either property to automatically calculate the ending value from the starting value or vice versa. There are complementary grid-column-start and grid-column-end properties that apply the same behavior to columns.

/* CSS syntax:
grid-row-start: auto|row-line;
grid-row-end: auto|row-line|span n;
*/
grid-row-start: 2;
grid-row-end: span 2;

Question 85

CSS grid-row-gap

Answer 85

The CSS grid-row-gap property determines the amount of blank space between each row in a CSS grid layout or in other words, sets the size of the gap (gutter) between an element’s grid rows. The grid-column-gap provides the same functionality for space between grid columns.

/CSS Syntax /
grid-row-gap: length; /Any legal length value, like px or %. 0 is the default value/

Question 86

CSS grid-area

Answer 86

The CSS grid-area property specifies a grid item’s size and location in a grid layout and is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end in that order. Each value is separated by a /.

In the included example, Item1 will start on row 2 and column 1, and span 2 rows and 3 columns

.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}

Question 87

Justify Items

Answer 87

container {

The justify-items property is used on a grid container. It’s used to determine how the grid items are spread out along a row by setting the default justify-self property for all child boxes.

The value start aligns grid items to the left side of the grid area.

The value end aligns grid items to the right side of the grid area.

The value center aligns grid items to the center of the grid area.

The value stretch stretches all items to fill the grid area.

display: grid;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}

Question 88

Align Self

Answer 88

The CSS align-self property is used to set how an individual grid item positions itself along the column or block axis. By default grid items inherit the value of the align-items property on the container. So if the align-self value is set, it would over-ride the inherited align-items value.

The value start positions grid items on the top of the grid area.

The value end aligns the grid on the bottom of the grid area.

The value center positions grid items on the center of the grid area.

The value stretch positions grid items to fill the grid area (default).

Question 89

CSS grid-template-areas

Answer 89

The CSS grid-template-areas property allows the naming of sections of a webpage to use as values in the grid-row-start, grid-row-end, grid-column-start, grid-column-end, and grid-area properties. They specify named grid areas within a CSS grid.

/* Specify two rows, where “item” spans the first two columns in the first two rows (in a four column grid layout)*/
.item {
grid-area: nav;
}
.grid-container {
display: grid;
grid-template-areas:
‘nav nav . .’
‘nav nav . .’;
}

Question 90

CSS grid-auto-flow

Answer 90

The CSS grid-auto-flow property specifies whether implicity-added elements should be added as rows or columns within a grid or, in other words, it controls how auto-placed items get inserted in the grid and this property is declared on the grid container.

The value row specifies the new elements should fill rows from left to right and create new rows when there are too many elements (default).

The value column specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements.

The value dense invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added.

/*CSS Syntax */
grid-auto-flow: row|column|dense|row dense|column dense;

Question 91

Justify Content

Answer 91

Sometimes the total size of the grid items can be smaller than the grid container. If this is the case, the CSS property justify-content can be used to position the entire grid along the row or inline axis of the grid container.

The value start aligns the grid to the left side of the grid container.

The value end aligns the grid to the right side of the grid container.

The value center centers the grid horizontally in the grid container.

The value stretch stretches the grid items to increase the size of the grid to expand horizontally across the container.

The value space-around includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element.

The value space-between includes an equal amount of space between grid items and no space at either end.

The value space-evenly places an even amount of space between grid items and at either end.

Question 92

Align Content

Answer 92

Some times the total size of the grid items can be smaller than the grid container. If this is the case, the CSS property align-content can be used to position the entire grid along the column axis of the grid container.

The property is declared on the grid container.

The value start aligns the grid to the top of the grid container.

The value end aligns the grid to the bottom of the grid container.

The value center centers the grid vertically in the grid container.

The value stretch stretches the grid items to increase the size of the grid to expand vertically across the container.

The value space-around includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element.

The value space-between includes an equal amount of space between grid items and no space at either end.

The value space-evenly places an even amount of space between grid items and at either end.

Question 93

CSS grid-auto-rows

Answer 93

The CSS grid-auto-rows property specifies the height of implicitly added grid rows or it sets a size for the rows in a grid container. This property is declared on the grid container. grid-auto-columns provides the same functionality for columns. Implicitly-added rows or columns occur when there are more grid items than cells available.

grid-auto-rows and grid-auto-columns accept the same values as their explicit counterparts, grid-template-rows and grid-template-columns:

pixels (px)
percentages (%)
fractions (fr)
the repeat() function

Question 94

Justify Self

Answer 94

grid-container {

The CSS justify-self property is used to set how an individual grid item positions itself along the row or inline axis. By default grid items inherit the value of the justify-items property on the container. So if the justify-self value is set, it would over-ride the inherited justify-items value.

The value start positions grid items on the left side of the grid area.

The value end positions the grid items on the right side of the grid area.

The value center positions grid items on the center of the grid area.

The value stretch positions grid items to fill the grid area (default).

// The grid items are positioned to the right (end) of the row.

display: grid;
justify-items: start;
}

.grid-items {
justify-self: end;
}

Question 95

CSS grid-area

Answer 95

The CSS grid-area property allows for elements to overlap each other by using the z-index property on a particular element which tells the browser to render that element on top of the other elements.

Question 96

Align Items

Answer 96

container {

The align-items property is used on a grid container. It’s used to determine how the grid items are spread out along the column by setting the default align-self property for all child grid items.

The value start aligns grid items to the top side of the grid area.

The value end aligns grid items to the bottom side of the grid area.

The value center aligns grid items to the center of the grid area.

The value stretch stretches all items to fill the grid area.

display: grid;
align-items: start;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}

Question 97

Implicit grid

Answer 97

The implicit grid is an algorithm built into the specification for CSS Grid that determines default behavior for the placement of elements when there are more than fit into the grid specified by the CSS.

The default behavior of the implicit grid is as follows: items fill up rows first, adding new rows as necessary. New grid rows will only be tall enough to contain the content within them.

Question 98

grid-auto-columns

Answer 98

The CSS grid-auto-columns property specifies the width of implicitly added grid columns or it sets a size for the columns in a grid container. This property is declared on the grid container. grid-auto-rows provides the same functionality for rows . Implicitly-added rows or columns occur when there are more grid items than cells available.

grid-auto-columns and grid-auto-rows accept the same values as their explicit counterparts, grid-template-columns and grid-template-rows:

pixels (px)
percentages (%)
fractions (fr)
the repeat() function

Question 99

grid-template-areas

Answer 99

grid-template-areas specifies grid named grid areas

Question 100

grid layout axes

Answer 100

grid layouts are two-dimensional: they have a row, or inline, axis and a column, or block, axis.

Question 101

justify-items (grid)

Answer 101

justify-items specifies how individual elements should spread across the row axis

Question 102

justify-content (grid)

Answer 102

justify-content specifies how groups of elements should spread across the row axis

Question 103

justify-self (grid)

Answer 103

justify-self specifies how a single element should position itself with respect to the row axis

Question 104

align-items (grid)

Answer 104

align-items specifies how individual elements should spread across the column axis

Question 105

align-content (grid)

Answer 105

align-content specifies how groups of elements should spread across the column axis

Question 106

align-self (grid)

Answer 106

align-self specifies how a single element should position itself with respect to the column axis

Question 107

grid-auto-rows

Answer 107

grid-auto-rows specifies the height of rows added implicitly to the grid

Question 108

grid-auto-columns

Answer 108

grid-auto-columns specifies the width of columns added implicitly to the grid

Question 109

grid-auto-flow

Answer 109

grid-auto-flow specifies in which direction implicit elements should be created

Question 110

Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what width would it have?

.grid {
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 100px);
grid-auto-rows: 60px;
grid-auto-columns: 70px;
}

Answer 110

The answer is 100px, because the grid is impacted by what is known as grid-auto-flow. The default of grid-auto-flow is row, which means that the new items will be added to the new rows from left to right - and this means it will be in the first column as third from the top.

Question 111

Responsive design

Answer 111

Responsive design refers to the ability of a website to resize and reorganize its content based on:

The size of other content on the website.
The size of the screen the website is being viewed on.

Question 112

em

Answer 112

Historically, the em represented the width of a capital letter M in the typeface and size being used. That is no longer the case.

Today, the em represents the font-size of the current element or the default base font-size set by the browser if none is given. For example, if the base font of a browser is 16 pixels (which is normally the default size of text in a browser), then 1 em is equal to 16 pixels. 2 ems would equal 32 pixels, and so on.

Question 113

rem

Answer 113

Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the root element. The root element is the <html> tag.

Most browsers set the font size of <html> to 16 pixels, so by default rem measurements will be compared to that value. To set a different font size for the root element, you can add a CSS rule.

Question 114

What is the difference between em and rem?

Answer 114

One advantage of using rems is that all elements are compared to the same font size value, making it easy to predict how large or small font will appear. If you are interested in sizing elements consistently across an entire website, the rem measurement is the best unit for the job. If you’re interested in sizing elements in comparison to other elements nearby, then the em unit would be better suited for the job.

Question 115

percentages (responsive sizing)

Answer 115

percentages can be used to size non-text HTML elements relative to their parent elements on the page.

Percentages are often used to size box-model values, like width and height, padding, border, and margins. They can also be used to set positioning properties (top, bottom, left, right).

Question 116

Why shouldn’t we use 100% to set the element’s width?

Answer 116

Because the box model includes padding, borders, and margins, setting an element’s width to 100% may cause content to overflow its parent container. While tempting, 100% should only be used when content will not have padding, border, or margin.

Question 117

What is the difference between using percentages to size box-values and padding/margins?

Answer 117

When height and width are set using percentages, the dimensions of child elements are calculated based on the dimensions of the parent element.

When percentages are used to set padding and margin, however, they are calculated based only on the width of the parent element.

For example, when a property like margin-left is set using a percentage (say 50%), the element will be moved halfway to the right in the parent container (as opposed to the child element receiving a margin half of its parent’s margin). Vertical padding and margin are also calculated based on the width of the parent.

Question 118

How should we use the relative measurements of ems, rems and percentages to size websites?

Answer 118

When using relative sizing, ems and rems should be used to size text and dimensions on the page related to text size (i.e. padding around text). This creates a consistent layout based on text size. Otherwise, percentages should be used.

Question 119

Give the best example of code that we should use to scale images and video proprotionately. Then, explain the example.

Answer 119

.container {
width: 50%;
height: 200px;
overflow: hidden;
}

.container img {
max-width: 100%;
height: auto;
display: block;
}

In the example above, .container represents a container div. It is set to a width of 50% (half of the browser’s width, in this example) and a height of 200 pixels. Setting overflow to hidden ensures that any content with dimensions larger than the container will be hidden from view.

The second CSS rule ensures that images scale with the width of the container. The height property is set to auto, meaning an image’s height will automatically scale proportionally with the width. Finally, the last line will display images as block level elements (rather than inline-block, their default state). This will prevent images from attempting to align with other content on the page (like text), which can add unintended margin to the images.

The example above scales the width of an image (or video) to the width of a container. If the image is larger than the container, the vertical portion of the image will overflow and will not display.

Question 120

How can we set up scaling the height of the image/video with the height of the container? Give an example and explain it.

Answer 120

.container {
width: 50%;
height: 200px;
overflow: hidden;
}

.container img {
max-height: 100%;
width: auto;
display: block;
}

This will scale the height of the image with the height of the container instead. If the image is larger than the container, the horizontal portion of the image will overflow and not display.

Question 121

background-size: cover;

Answer 121

The CSS background-size property is used to specify the size of the background image. When given the value cover, like background-size:cover, the image covers the complete background of the container in which it is being displayed.

The proportions of the image are maintained, so if the dimensions exceed the container’s, then some parts of the image will be left out.

Question 122

Give the code to have a background image that scales witgh its container. Explain the code.

Answer 122

body {
background-image: url(‘#’);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

In the example above, the first CSS declaration sets the background image (# is a placeholder for an image URL in this example). The second declaration instructs the CSS compiler to not repeat the image (by default, images will repeat). The third declaration centers the image within the element.

The final declaration is what scales the background image. The image will cover the entire background of the element, all while keeping the image in proportion. If the dimensions of the image exceed the dimensions of the container then only a portion of the image will display.

Question 123

viewport

Answer 123

The total viewable area for a user; this area varies depending on device. The viewport is smaller on a mobile device and larger on a desktop.

Question 124

Give an example of a meta tag and explain its components.

Answer 124

<meta></meta>

the name=”viewport” attribute: tells the browser to display the web page at the same width as its screen

the content attribute: defines the values for the <meta></meta> tag, including width and initial-scale

the width=device-width key-value pair: controls the size of the viewport in which it sets the width of the viewport to equal the width of the device

the initial-scale=1 key-value pair: sets the initial zoom level

Question 125

the name=”viewport” attribute

Answer 125

the name=”viewport” attribute: tells the browser to display the web page at the same width as its screen

Question 126

the content attribute (meta tag)

Answer 126

the content attribute: defines the values for the <meta></meta> tag, including width and initial-scale

Question 127

the width=device-width key-value pair (meta tag)

Answer 127

the width=device-width key-value pair: controls the size of the viewport in which it sets the width of the viewport to equal the width of the device

Question 128

the initial-scale=1 key-value pair (meta tag)

Answer 128

the initial-scale=1 key-value pair: sets the initial zoom level

Question 129

css media query

Answer 129

A CSS media query can be used to adapt a website’s display and layout to different screen sizes. A media query begins with the @media keyword and is followed by one or more conditions that check screen size, orientation, resolution, and/or other properties. If these conditions are met, all CSS rules within the media query will be applied to the page. Media queries are used for responsive web design by tailoring specific stylesheets to different types of devices such as laptops, tablets, mobiles, and more.

Question 130

CSS Media Features in Media Queries

Answer 130

Media queries in web development ensure that a website design is responsive. It does so through creating tailored style sheets based on the resolution of the device that it is displayed upon. The browser will detect the screen size and apply the CSS styles for that screen size based on specified media features. Media queries can set rules based on features like the screen width, the screen resolution and device orientation. These media rules can be separated by commas. When one of the media rules is true then the accompanying CSS will apply.

Question 131

Media Type in Media Queries

Answer 131

When writing media queries in CSS we use the only keyword to specify the type of device. Initially, CSS incorporated a variety of media types such as screen, print and handheld. In order to ensure responsive design and to accommodate a variety of screen sizes the keyword screen is now always used for displaying content.

Question 132

And Operator Media Queries

Answer 132

Through using the and operator when writing media queries in CSS, we can specify that multiple media features are required. For example we could require a certain width as well as a specific resolution for a CSS ruleset to apply. The and operator when chaining together multiple media features allows us to be more specific with the screens that we are targeting as we build responsive designs.

Question 133

Ranges in Media Queries

Answer 133

Media queries can use CSS to target screen sizes within a certain range through using multiple widths and/or heights. This is an effective tool for responsive design that will address a variety of screen sizes in one CSS media query. In order to set a range for width or the height, set the minimum screen size through using min-width and/or min-height and then set the maximum through using max-width or max-height. These properties are used in combination with the and operator.

Question 134

Dots Per Inch (DPI)

Answer 134

DPI, or dots per inch, is a measure of the resolution of a printed document or digital scan. The higher the dot density, the higher the resolution of the print or scan.

Question 135

Why is it useful to target screen resolution as a media feature>

Answer 135

Many times we will want to supply higher quality media (images, video, etc.) only to users with screens that can support high resolution media.

Targeting screen resolution helps users avoid downloading high resolution (large file size) images that their screen may not be able to properly display.

Question 136

min-resolution and max-resolution (media)

Answer 136

These media features allow us to target screen resolution. They both accept a resolution value in either dots per inch (dpi) or dots per centimeter (dpc).

Question 137

Comma Separated List (media queries)

Answer 137

If only one of multiple media features in a media query must be met, media features can be separated in a comma separated list.

Question 138

orientation (media feature)

Answer 138

The orientation media feature detects if the page has more width than height. If a page is wider, it’s considered landscape, and if a page is taller, it’s considered portrait.

Question 139

Breakpoints (media)

Answer 139

The points at which media queries are set are called breakpoints. Breakpoints are the screen sizes at which your web page does not appear properly.

Question 140

What is the best practice for setting up breakpoints?

Answer 140

Rather than set breakpoints based on specific devices, the best practice is to resize your browser to view where the website naturally breaks based on its content. The dimensions at which the layout breaks or looks odd become your media query breakpoints. Within those breakpoints, we can adjust the CSS to make the page resize and reorganize.

By observing the dimensions at which a website naturally breaks, you can set media query breakpoints that create the best possible user experience on a project by project basis, rather than forcing every project to fit a certain screen size. Different projects have different needs, and creating a responsive design should be no different.

Question 141

Give four code features that make for a scalable image background.

Answer 141

background-image: url(“#”)
background-repeat: no-repeat;
background-position: center;
background-size: cover;

Question 142

language’s documentation

Answer 142

Every well-developed language or framework has a place where you can look up all of its features. This library of information is called a language’s documentation.

Question 143

The Mozilla Development Network

Answer 143

The Mozilla Development Network is the source of documentation for HTML, CSS, and JavaScript.