用語集「パート1」 Flashcards

1
Q

What are the most essential website elements for a portfolio website?

A
Image galleries 
About page
Contact page
Header (top level navigation)
Footer
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What does HTML stand for?

A

It’s an initialism for hypertext markup language

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is the Internet?

A

It’s a global system of hardware upon which the Web is built; is the hardware network that allows us to transmit data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What’s the Web?

A

a collection of linked hypertext documents

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Why is HTML used?

A

HTML is used to break up websites into sections, pages, etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Why is the term “document” used when referring to HTML?

A

HTML was originally designed to share research documents (the term document persists today)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is one of the easiest shortcuts to access an element?

A

One of the ways to access an element more quickly is via pressing ctrl+

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What does the “head” element contain?

A

The “The “head” element contains meta information about the document

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Please define an “attribute”.

A

Attributes are extra information within an element that add data about how the page is built (via the element)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What can you type to highlight text?

A

To highlight text, please type the following:

CTRL + Shift + Arrow Key (Windows)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Can you type the boilerplate code for HTML?

A

Example:
Index.html

          Nick Petit | Designer  

          <h1> Nick Pettit </h1>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are two functions of the “title” element?

A

The title element will allow us to change the title of our page and search results in browser tabs.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Which element do links stem from?

A

Links stem from the anchor <a> element </a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the attribute for the anchor element? Can you describe what the initialism stands for?

A

Href (i.e., hyperlink reference) is the attribute

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Please fill in the blank: Navigation through a website is indicated through the ___ element.

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Please fill in the blank: Unordered lists are shown through the _____ element

A

<ul></ul>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What does the <img></img> self-closing element stand for?

A

image

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Please define the following: relative path

A

describes the location of a file using a partial file path that’s based on the location of the original file relative to the file that’s being referenced

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Please define the following: absolute path

A

An absolute path describes the location of a file using the full file path

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What are the two required attributes for <img></img>?

A

the source {src} attribute points to the image file and the alternate {alt} attribute describes the image using text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How do we indent a line of code?

A

ctrl + ]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Please fill in the blanks:

The footer of a website typically contains basic information about the site, such as a____ l_____ and a c_____; s_______ l______ & i____ are also included

A

associated links
copyright
social links
icons

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is a general rule of thumb regarding the use of relative links (e.g., “img/numbers-02.jpg”)?

A

use relative links (e.g., “img/numbers-02.jpg”) in your code whenever possible

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Can you describe the primary function of a link element?

A
  • The link element connects other files to an HTML document, such as CSS or JavaScript files
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What does CSS mean?

A

Cascading Style Sheets

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Can you define a rule, in addition to giving an example?

A

A footer is an example of a rule (i.e., the entirety of a CSS selector)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Please describe a selector in CSS.

A

CSS syntax that defines elements on a page to which declarations should be applied

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is a declaration {CSS}?

A

a pair of CSS properties and values that define how an element should be styled

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Can you provide more information about a property.

A

CSS syntax that defines which part of an element should be styled, such as its colour, size, position, and so on

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

This definition applies to which aspect of CSS: “CSS syntax that sets the variable units for properties”

A

Value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What is the element?

A

the style element can contain CSS code that will be applied to the HTML

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Please describe a type selector.

A

also known as an “element selector”; isolates all the elements of a given type

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

What is a descendant selector?

A

a CSS selector that selects all the elements of a given type that are nested inside another type of element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Can you tell me the meaning of the “colour” selector?

A

sets the text colour of an element; accepts any CSS colour unit

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Which selector sets the background colour of an element?

A

Background-color

36
Q

Please define: ID selector

A

a CSS selector that selects a single element based on its ID attribute

37
Q

Please define: text-decoration

A

primarily used to add/ remove underlines from text

38
Q

Fill in the blank here: Please use the keys ____ (or “CMND + ]” on a Mac) for indenting assistance

A

CTRL + ] (for Windows)

39
Q

Please define: max-width

A

sets the maximum width of an element; accepts any CSS length unit

40
Q

Please define: margin

A

sets the space around the exterior four sides of an element; accepts any CSS length unit

41
Q

Please define: padding

A

sets the space on the interior four sides of an element; accepts any CSS length unit

42
Q

Please fill in the blanks: In the padding and margin selectors, the first value applies to _____ and ______ directions and the second value applies to ______ and _______ directions

A

up & down

left & right

43
Q

Please define: mobile-first

A

the technique of creating mobile websites first and then progressively enhancing them to create the desktop version

44
Q

What is “text-align”?

A

it sets the justification of text, similar to a word processor; for instance, text can be set to be aligned to the left, right, or centre

45
Q

What are hexadecimal colours?

A

a base-16 number system that uses the letters A through F to represent the numerals 10 through 15

46
Q

Please define a pseudo-class…

A

dynamic selectors that change based on user interaction with browser, such as hovering over a link, for example

47
Q

Please fill in the blanks: In hexadecimal system, the first two characters are for ____, the second two are for _____, and the third two are for _____

A

Red
Green
Blue

48
Q

What is the hexadecimal code for black?

A

000000

49
Q

Can you identify the following code: #fffff?

A

White

50
Q

What is one of the hexadecimal codes for grey?

A

888888

51
Q

Can you identify the following code: #6ab47b?

A

Green

52
Q

Please compare and contrast divs and classes.

A

A class is similar to a div, but many can exist on a page. However, a div must be unique on each page

53
Q

What is a class selector?

A

A class selector selects any HTML element that contains a matching class attribute

54
Q

Please fill in the blank: “Class: selected” shows which web page the visitor is ______

A

on

55
Q

Can you identify the following code: #32673f?

A

The colour is dark green.

56
Q

What is the “nav: a” selector?

A

The “nav a: hover” selector enables user to notice a hovering effect

57
Q

What is the hexadecimal code for light grey?

A

999

58
Q

In CSS, what does “color” apply to?

A

Text colours

59
Q

What is a comment?

A

a reminder or visual cue in computer code that’s meant to be readable by programmers; they aren’t typically interpreted by the browser and shouldn’t impact a website’s function in any way

60
Q

Can comments also be added to the end of a line of code?

A

Yes

61
Q

Please define “font-family”.

A

Font-family defines which fonts should be applied to text

62
Q

What is “font-size”?

A

Font-size: sets the size of text in either relative or absolute units

63
Q

Please define: font-weight

A

CSS property that sets the visual weight of text, which is more commonly known as “bold” as in the case of word processors

64
Q

Please define: line-height

A

CSS property that sets the amount of space between each line of text; accepts any CSS length unit

65
Q

Please fill in the blanks: Negative values in ______ are used in designing

A

margins

66
Q

What does #ccc mean?

A

Light grey

67
Q

When is styling the portfolio used?

A

Styling the portfolio is primarily used when splitting website into multiple columns

68
Q

Please describe the “list-style” property.

A

It is a CSS property that sets the style of numbers or bullet points for ordered and unordered lists; the marks can also be removed entirely with the value “none

69
Q

What is the float property?

A

a CSS property that allows an element to be taken out of the normal flow and placed to the left or right of its container; text and other inline elements will wrap around it

70
Q

Please fill in the blanks: “For styling the portfolio, we use the _______ and _____ combination of “max-width: 100%”

A

property

value

71
Q

Please describe the “clear” property.

A

A CSS property that specifies whether an element can be adjacent to floated elements or if it should be moved down and “clear” any floated elements

72
Q

What does a block-level element do?

A

It occupies the weight of their containers and generally include a line break before and after the element; somewhat like divs, sections, etc.

73
Q

What is an inline element?

A

It occupies the width of their contents and does not begin a new line when formatted as text; primarily text

74
Q

Please describe the “display” property.

A

The “display” property is a CSS property that sets whether an element should be rendered as a block element, inline element, or inline-block element

75
Q

What is the “index.html” filename?

A

It’s a special HTML filename that almost every web server recognises as the “home page” of a website

76
Q

Which keyboard combination is used for selecting all items on a page?

A

CTRL+A

77
Q

What is the “border-radius” property?

A

a CSS property that defines the roundness of a border corner; accepts any CSS length unit

78
Q

How do we select all lines of code in a document?

A

CTRL+A

79
Q

How do we remove a line of code in a document?

A

CTRL+X (cut)

80
Q

Please describe the “background-image” CSS property.

A

accepts an image path that applies the file to the background of an element

81
Q

What is the “background-size” property?

A

sets the size of background images

82
Q

What does the “background-repeat” property do?

A

It sets whether or not a background image should be repeated; by default, backgrounds will repeat

83
Q

Please fill in the blank:

To toggle a comment please type “”

A

CTRL+ /

84
Q

Please describe responsive web design.

A

It’s a technique for creating websites that work on multiple screen resolutions via the combination of three parts: fluid images, fluid grids, and media queries

85
Q

What’s a fluid layout?

A

It limns the properties by which a web page changes its size to fit the corresponding web browser due to media queries

86
Q

What are breakpoints?

A

the specific screen widths where a responsive layout “breaks” and needs to change in order to accommodate the screen

87
Q

Please define: @media

A

a part of CSS syntax; media queries use the @media CSS rule to define conditions of the browser medium; simply put, it allows for CSS styling to only be included if certain conditions are met, such as a specific browser width