CS401A's Midterms: Fundaments of Web Prog. Module 04

Question 1

is a modern solution for creating flexible layout that work correctly on different screen sizes as it organizes content into two (2) dimensions:

Answer 1

CSS Grid, or Grid,
rows and columns.

Question 2

CSS Grid Layout (Casabona, 2021)

specifies the main content in the HTML document,

Answer 2

The main tag

Question 3

CSS Grid Layout (Casabona, 2021)

and it can enclose several sections/articles but should not contain any repeated content across the document.

Answer 3

The main tag

Question 4

CSS Grid Layout (Casabona, 2021)

can be used to space the row and columns using

Answer 4

The gap property
row-gap and column gap properties.

Question 5

CSS Grid Layout (Casabona, 2021)

specifies independent and self-content and encloses various elements such as

Answer 5

< article> tag
header and paragraphs

Question 6

CSS Grid Layout (Casabona, 2021)

specifies some content beside the content it is placed in and is usually presenced as

Answer 6

< aside> tag
sidebars.

Question 7

CSS Grid Layout (Casabona, 2021)

is the exact area of ther screen that is rendering the website.

In mobile devices, is is the full screen of a device, while it is the width and height of a browser window.

Answer 7

Viewport

Question 8

CSS Grid Layout (Casabona, 2021)

should be included in all HTML webpages and always go inside the < head> element.

Answer 8

This < meta> viewport element

Question 9

CSS Grid Layout (Casabona, 2021)

It gives the browser instructions on controlling the page’s dimension and scaling.

Answer 9

< meta> viewport element

Question 10

CSS Grid Layout (Casabona, 2021)

sets the page width to follow the screen width depending on the devices,

Answer 10

The width=device-width

Question 11

CSS Grid Layout (Casabona, 2021)

sets the initial zoom level when the webpage is loaded by the browser.

Answer 11

while initial-scale=1.0

Question 12

are not just sets of properties and values but containers for other rulesets implemented based on the

Answer 12

Media Queries
media query results.

Question 13

MEDIA QUERY (Casabona, 2021)

is declared inside a link tag, while it is declared using

Note that this affects the grid layout.

Answer 13

the media attribute
@media in CSS.

Question 14

MEDIA QUERY (Casabona, 2021)

Other logic which is used if both conditions are true

Answer 14

includes only

Question 15

MEDIA QUERY (Casabona, 2021)

which is used to revert the media query that will return false if the output is true.

Answer 15

and not

Question 16

MEDIA QUERY (Casabona, 2021)

is when the layout changes to adjust to the viewport.

Answer 16

Breakpoint

Question 17

MEDIA QUERY (Casabona, 2021)

It is set using min-width, which makes the layouts more usable and does not break when viewed on any device.

Answer 17

Breakpoint

Question 18

MEDIA QUERY (Casabona, 2021)

is a flexible one that can be viewed on small devices up to larger screens.

Answer 18

A responsive image

Question 19

MEDIA QUERY (Casabona, 2021)

are declared inside the < head> tags and below the < meta> tag.

Answer 19

The < style> tags

Question 20

MEDIA QUERY (Casabona, 2021)

has a video player that can be viewed on small screens up to larger screen devices.

Answer 20

A responsive video

Question 21

MEDIA QUERY (Casabona, 2021)

The syntax and placement are the same as those used to make responsive images.

Answer 21

A responsive video