CH 7 Improving Web Design with New Page Layouts
Call Kai
Learn
Practice Test
Spaced Repetition
Match
Flashcards
Knowt Play1/44
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced | Call with Kai | Chat |
|---|
No analytics yet
Send a link to your students to track their progress
45 Terms
Article Element
Contains content such as forum or blog posts.
Aside Element
Contains information about nearby content and is typically displayed as a sidebar.
Section Element
Contains a specific grouping of content on a webpage.
Figure Element
Contains pictures and images.
Figure Caption
Defines a caption for a
CSS Grid Layout
Webpage design model used to create a single- or multiple-column layout by controlling the size and position of boxes of content on a webpage.
Opacity
Specifies the amount of transparency in an element.
Box-shadow
CSS property that applies a shadow to an element, such as a div or an img element.
Text-shadow
CSS property that applies a shadow to text.
Box-sizing
CSS property that allows any specified padding or border to be included within the element's total size.
Favicon
A small image that appears on the browser tab to represent the website.
HTML 5 Semantic Elements
Indicates the start and end of an _____ area of a webpage; contains content such as forum or blog posts
Indicates the start and end of an _____ area of a webpage; contains information about nearby content and is typically displayed as a sidebar
Indicates the start and end of a _____ area of a webpage; contains additional information that the user can display or hide Note that this element is not supported by all major browsers at the time of this publication.
Indicates the start and end of a _____ area of a webpage; contains pictures and images
Indicates the start and end of a figure _____ area of a webpage; defines a caption for a figure element
Indicates the start and end of a _____ area of a webpage; contains a specific grouping of content on a webpage
Indicates the start and end of a _____ area of a webpage; contains a visible heading for the details element on a webpage Note that this element is not supported by all major browsers at the time of this publication.
Indicates the start and end of a _____ area of a webpage; contains a date/_____ on a webpage
You will receive a warning from the W3C HTML validator if you do not include a heading element inside a section element.
True
You should use a div element instead of a section element when...
An element is needed only for styling purposes or as a convenience for scripting.
Can I Use Figure and Figure Caption Elements to Wrap Image Elements Separately?
Yes
CSS Grid Layout Properties
grid-template-columns
grid-template-rows
grid-column-start
grid-column-end
grid-column-gap
grid-row-gap
grid-gap
grid-template-columns
Specifies the number of columns within a grid
ex.)
grid-template-columns: auto auto auto; (creates a three-column layout)
grid-template-rows
Specifies the size of rows within a grid
ex.)
grid-template-rows: 200px 400px;
grid-column-start
Specifies the start of a grid
ex.)
grid-column-start: 1;
grid-column-end
Specifies the ending of a grid
ex.)
grid-column-end: 3;
grid-column-gap
Specifies the column gap between each box of content
ex.)
grid-column-gap: 50px;
grid-row-gap
Specifies the row gap between each box of content
ex.)
grid-row-gap: 40px;
grid-gap
Shorthand for grid-row-gap and grid-column-gap
ex.)
grid-gap: 20px 80px; (20px is the row gap; 80px is the column gap)
Steps to use CSS grid layout
1) Create a container for the grid within the HTML document.
2) Then you create a style rule to display the container as a grid or as an inline-grid.
3) Next, you create a style rule to specify the number of columns you want to use in the grid layout. (To do this, add the CSS grid-template-columns property to the style rule and specify the number of columns using the value auto as many times as necessary to create the multiple-column layout.)
CSS Grid-Template-Columns Property Values
Auto
max-content
min-content
Length
Auto
Column size adjusts based on the size of the viewport
max-content
Column size is based on the largest element within the column
min-content
Column size is based on the smallest element within the column
Length
Column size is based on a legal length value
CSS Flexbox Layout
Another layout module used to create a multiple column layout.
The CSS grid layout is supported by all modern browsers.
True
Opacity's default value...
Is 1, which does not make the element transparent.
An opacity value of 0.50 makes an element...
50 percent transparent.
An opacity value of 0 makes an element
Completely transparent.
2 values required for the box-shadow element.
The h-shadow value, which designates the horizontal offset of the shadow, and the v-shadow, which designates the vertical offset of the shadow.
Web Content Strategist
Responsible for developing strategies for displaying content on a webpage. Analyzes current content, performs in-depth research, and then drafts recommendations for new content ideas in order to attract new clients.
How do you quickly apply a style rule to all elements?
You use the asterisk (*) to select all elements.