MIDTERMS - WEBSYS - PART 1

CSS Grid

A modern solution for creating flexible layouts using rows and columns that adapt to different screen sizes.

Grid Layout

Uses the display: grid; property along with grid-template-columns and grid-template-rows to define the structure of a webpage.

<main> Tag

Specifies the main content in an HTML document, typically enclosing multiple sections or articles.

<article> Tag

Represents independent, self-contained content such as a blog post or news article.

<aside> Tag

Defines content that is related to the surrounding content, usually presented as a sidebar.

Viewport

The visible area of a webpage on a screen; on mobile devices, it represents the entire screen.

<meta> Viewport Element

Used to control the page's dimensions and scaling.

Media Query

A CSS technique used to apply styles based on the characteristics of the user's device, such as screen size.

Media Types

Types of devices that can apply media queries:

all

Applies to all devices.

print

For printing documents.

screen

For screens like desktops and mobile devices.

speech

For screen readers.

and

Combines multiple conditions.

only

Ensures the query applies only if all conditions are true.

not

Reverses the logic of a query.

Breakpoint

A point where a webpage layout changes to adapt to different screen sizes, defined by min-width.

Responsive Image

An image that scales to fit different screen sizes

Responsive Video

A video that adjusts its size to fit different screen sizes using CSS properties similar to responsive images.