Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Coding 2 > Revision > Flashcards

Revision Flashcards

1
Q

What is the script tag used for ?

A

used to define the frontend JavaScript for a web page

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

where can the script element and tag be used ?

A

in the body or the head, depending on how you want the page to load.

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

What type of slash does the closing tag of an html tag take?

A

a forward slash

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

what is the definition of an HTML element?

A

some form of inner content that is wrapped in an html tag

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

Do all html tags have to have inner content?

A

no for example the image tag doesnt have inner content

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

what three things does attributes consist of?

A

a property, equal sign, value in quotes

href = “https//:www.website.com”

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

when creating a link to a website what do we need to make sure we add before the www of a webpage?

A

https://

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

when adding an alt attribute to an image tag, does the alt take the same quotations as the src attribute?

A

no, they are two separate attributes, therefore they have two different values and equal signs along with their own separate sets of quotation marks

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

what element should you wrap the H1 (and h2 if used as a subtitle for h1) in?

A

the header tag

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

what two things should you always add to the head section when creating a page?

A

a title

and a meta tag with the description of the page

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

how can we make a phone number a link?

A

the same way you make an email a link, but instead you use tel: instead of mailto:

a href=’tel:+14153612507> 415 361 2507

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

what is the content layer?

A

it is the layer of code that describes the html structure of a webpage

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

what is the presentation layer?

A

the presentation layer is the layer of code that css controls - the presentation of the structured content (content layer)

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

what two things does a rule set consist of?

A

a selector and declaration box

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

psuedo class targets what?

A

specific state of an element

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

psuedo element targets what?

A

specific part of the element

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

how to link css to a html page

A

head
link rel=”stylesheet” type=”text/css” href=”./css/main.css”
/head

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

when applying a font with two names using font-family: in css how do we type it in? do we add the space? underscore? make it one word?

A

you type it normal
without the space or any other punctuation or features

font-family: font name

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

what preset values can font-weight be set to?

A

normal Defines normal characters. This is default
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters

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

what numerical values can font-weight be set to?

A 
100
200
300
400 (same as normal)
500
600
700 ( same as bold)
800
900
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

what are some common background-size property values?

A

auto
number/percent
cover
contain

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

what does the auto value for the background-size property mean?

A

its the default setting and sets the image to its original size/dimensions

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

what does the cover value for the background-size property mean?

A

it means that it will stretch the image so it covers the whole space, even if it has to cut off some of the edges to make it work

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

what does the contain value for the background-size property mean?

A

it means that it will make sure all of the image is shown within the dimension of the parent element

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

what are the most common values for background-repeat property?

A 
repeat
repeat-y
repeat-x
no-repeat
space
round
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

what does the repeat value of the property background-repeat do?

A

it repeats the image both horizontally and vertically. The last image will be clipped if it doesnt fit

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

what is the default value for the background-repeat property?

A

repeat

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

what does the repeat-y value of the property background-repeat do?

A

repeats the image only vertically

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

what does the repeat-x value of the property background-repeat do?

A

repeats the image only horizontally

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

what does the no-repeat value of the property background-repeat do?

A

the image doesnt repeat it is only shown once

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

what does the space value of the property background-repeat do?

A

The background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images (gaps)

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

what does the round value of the property background-repeat do?

A

The background-image is repeated and squished or stretched to fill the space (no gaps)

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

what to remember when using linear-gradient to add a transparent tint over a background image?

A

you must put the linear gradient and transparent tint higher in the cascade, before you put the background-image and url because if the image goes first it will override the linear gradient tint.

so put the tint first and then add the url

or put the url and then just make sure the gradient is higher in the cascade

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

what goes between a linear gradient value and a url value on background-image property?

A

a comma

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

what should you put first on a background-image property a linear gradient or the image url if you need to use both?

A

linear gradient and then the background url

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

linear gradient goes on what property?

A

it goes on a background image property

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

when using pseudo elements ::after and ::before what do we need to put in the declaration box to add specific characters or strings ?

A

content : “ “

in between the quotes you add what you want to show up before or after the element selected

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

how many colons do pseudo classes take?

A

a single colon

paragraph:hover{
color: red;
}

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

how many colons do pseudo element take?

A

two

paragraph::before{
content: ‘“’
}

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

how do we keyboard cycle forward through clickable elements on a webpage?

A

the Tab button

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

how do we keyboard cycle backward through clickable elements on a webpage?

A

hold the shift key and click the Tab button

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

how to use css to rotate an image?

A

img {
transform: rotate(180deg)
};

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

what are the 5 most common ways to target specific attribute selectors in css?

A

[attribute=”value”] - exact match
[attribute*=”value”] - match of string/no space
[attribute^=”value”] - match beginning
[attribute$=”value”] - match end
[attribute~=”value”] - match word with space recognized as character

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

what is an inline element?

A

an element that does not start on a new line and flow goes horizontally, usually some sort of text. Height and width cannot be explicitly set, height and width are determined by the content

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

what are block elements?

A

elements that start on a new line, height and width can be explicitly set. Flow goes vertically

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

what are inline block elements?

A

elements that have the same characteristics of a block element, but flow has been changed to go horizontally

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

how do we remove white space between inline block elements if there is some?

A

we make font-size: 0 on the parent element

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

what happens when we put two inline elements one after the other on the same line?

A

they are rendered next to each other with no space.
span Hello /span span World /span

result:
HelloWorld

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

what happens when we put two inline elements one after the other but on two different lines?

A

they are rendered on the same line but with a space between the two

span Hello /span
span World / span

result
Hello World

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

Can we change inline elements into block elements and vice versa?

A

yes we can, by using the display: property

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

when is it a good idea to change the display property of an element?

A

when semantically it is correct but the display default doesn’t work for your design.

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

what is an example of a time where you might want to change the display of an element even though it may be semantically correct?

A

a nav bar goes vertically because it is a block element, but changing it to inline allows it to go horizontally as we see on the top of websites… for sections like home, contact us, share etc.

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

when do you use margin-right: auto; and margin-left: auto; on an block element ?

A

when you want to horizontally center it in relation to its parent element.

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

can you use margin-left: auto; margin-right: auto; on an inline element?

A

no you cannot

55
Q

when you need to center inline elements WITHIN A BLOCK ELEMENT, what do we use?

A

text-align: center;

56
Q

can we only use text-align on text based elements?

A

no, we can use this on any inline element regardless if its text or not.

57
Q

is the img element that is entered into an HTML document a block element or an inline element?

A

it is an inline element

58
Q

what are forms?

A

forms are containers that hold a set of inputs

59
Q

what are inputs?

A

data that a user enters when prompted

entering a phone number or an email would both count as inputs, while phone number would count as one input type while the email would count as another email type

60
Q

what does a form tag wrap?

A

all of the labels and inputs that go on a form

61
Q

what attributes do we want to set on the opening form tag?

A

the action and method attributes

62
Q

what is the action attribute on a form tag?

A

the action attribute is the URL of the server endpoint that submitted form data should be sent to

63
Q

what two values can we set for the method attribute on a form tag?

A

=”post” and =”get”

64
Q

which default method should we use starting off when using method attribute on form tags?

A

we should use method=”post”

65
Q

what is the fieldset element is used for?

A

to group related inputs and labels

66
Q

What is the main reason to use the fieldset tags?

A

The main reason to use fieldsets is that they help web crawlers and screen readers understand how inputs are grouped together (even if this is not revealed visually to sighted users).

67
Q

what is the legend tag?

A

the legend tag is like a title tag for the fieldset tag

68
Q

when are fieldset tags not of much benefit?

A

fieldsets are about grouping related inputs under one specific topic, like contact info. But if you dont have multiple related inputs then fieldsets arent neccesary.

example, a single yes or no question wouldnt need its own fieldset

69
Q

what is a label element for?

A

it tells us and screen readers what the input is for

70
Q

what attribute goes along with the label element?

A

for attribute

71
Q

the value of the for attribute on a label tag should also be the value of what on the same tag?

A

the ID

label for=”first-name”>First name /label
input id=”first-name” name=”first-name” type=”text”

72
Q

do inputs tags require closing tags?

A

no they dont

73
Q

what is an alternative way to write a label/input expression ?

A

Know that you can also wrap the input in a label element (some people prefer this method). If you do, you should omit the for attribute from the label:

First name

74
Q

what is the placeholder attribute when creating forms?

A

its sets the text that will go in the place to provide an example of whats to be entered

75
Q

what is the required attribute when creating forms?

A

it gives a message to the user if the proper information isnt there

76
Q

what is the pattern attribute when creating forms?

A

this allows us to dictate a certain pattern that must be followed like a phone number only allows numbers and dashes

77
Q

what is the type attribute when creating forms?

A

dictates the type of input data can be used…if email, it needs to have a @ and usually will display a keyboard with @ in it. it tells you the type of input

78
Q

what does a select tag do?

A

allows you to let users choose from a set of options. They wrap option tags

79
Q

what are options tags?

A

they are the children of select tags and they are the individual options that you can choose if youd like

80
Q

what is a selected attribute?

A

a selected attribute allows you to highlight a particular option in a group of options that are children to the select tag.

they can change it if they want but its the default selection

81
Q

what tag does a selected attribute go on ?

A

it goes on a option tag

82
Q

what is optgroup tag?

A

it is a way to group options into groups under the select tag. This is great for large groups of options

83
Q

what does a button tag do?

A

creates a button

84
Q

what two attributes does the button tag take?

A

submit or reset

85
Q

what does the submit attribute do on buttons?

A

it enters the information

86
Q

what does the reset attribute do on buttons?

A

it resets the page

87
Q

what is the lang attribute?

A

the language attribute lets screen readers know what language to read the text in so it gives a proper pronunciation

88
Q

what tag does the lang tag go on?

A

the html tag

89
Q

how do we create a meta description in the head of an html document?

A

meta name=’description’ content=’ actual description of page’

90
Q

how to link an html document to a css stylesheet in the head tag?

A

link rel=”stylesheet” href=”main.css”

91
Q

What should we keep in mind about using the word logo when creating alt attributes on images used for the logo of a company?

A

the word “logo” is redundant when setting alt attributes on logos. Just communicate the business entity being named by the logo

92
Q

what shows up on the document when you use the fieldset tag?

A

a box in which all the form information will be put in

93
Q

what shows up on the document when you use the legend tag that follows the fieldset tag?

A

the content that you put in between the opening and closing tags will appear at the top left corner of the fieldset box along the border

Sign Up

94
Q

what is the GENERAL hierarchy of creating a form input?

A

form tag - creates box forms go into
legend - names the box
label - names the input box
input - creates actual input box to enter data

95
Q

what two things go with the label tag?

A
  1. The for attribute and the purpose of the input box
  2. the name of the input box

label for=”email”> Email

96
Q

what does the “type” attribute do on the input tag?

A

it make sure that what is entered matches what is expected…
so type=”email” will make sure what is entered has an @symbol.
and type=”phone” will make sure that there is only numbers and dashes

etc

97
Q

what two things must you make sure that you put with the input tag?

A
  1. id = “ “ (with value matching the label for= “ “)
  2. type = “ “
    (with value specifying the type of input, i.e text, phone, email, etc)
98
Q

any html element that you don’t explicitly set a position to gets what position value?

A

static

99
Q

what is position: static mean?

A

that the element is in normal flow

100
Q

what is normal flow?

A

is the normal way that a browser renders content.

  1. Content Appears the way its structured in HTML
  2. inline elements left to right and as wide as the content stretches.
  3. block elements, top to bottom, one on top of another,
101
Q

what are the four common values for the position property?

A

static, fixed, relative, absolute

102
Q

what does position: fixed do?

A

the element will stay in place and other elements will behave as if the fixed element doesnt exist

103
Q

what is a good example of when you would want to use position: fixed?

A

for nav bars or footers that you would want to stay at the top or bottom of a webpage even when a user scrolls

104
Q

what are the four offset properties that can be applied in CSS?

A

top, bottom, left and right

105
Q

what type of elements can offsets properties be applied to in CSS?

A

elements that have position properties with values set to fixed, relative or absolute

106
Q

how do we apply offset positions?

A

with pixels or percentages

position: fixed;
top: 500px;
right: 500px;

this will mean the element will be 500px FROM the TOP
and 500px FROM the RIGHT

107
Q

what does position: relative do?

A

it keeps things in normal flow, but it allows you to use offsets to it to position it wherever you want

108
Q

what does position: absolute do?

A

it behaves exactly like relative…. can be offset, outside of normal flow

but the offsets for location are in relation to a parent container with a non static position value.

109
Q

what do you need for position: absolute to work?

A

a parent container with a non static position value

110
Q

if you need to use position: absolute and you do not have a parent container with non static position value what do you do?

A

just create a parent container for the element you want to place in position: absolute and then set its position to relative

or you can find a parent container that the element already has and just change it position from static to relative

111
Q

what is a common reason for using absolute positioning?

A

when you want to create a nav bar with the links on one end and a logo or something on the other end

112
Q

when using position:absolute, how do we position something all the way to the right of the page or top of the page or bottom?

A

using offsets with absolute position makes it so the numerical value you set for the offset is in relation from the non static parent, therefore if you wanted something all the way to the top of the parent element then you would set position: absolute with the offset property of top: 0;

or right: 0;
or bottom: 0;

113
Q

what is the float property used for in css?

A

to get text to wrap around an image or some sort of other element

114
Q

what happens if you put float:right on a element in css?

A

the element goes to the right and any text around it will wrap to the left

115
Q

when you have multiple floated elements next to one another how will they stack?

A

horizontally on the same line if there is room.

116
Q

what happens when you have multiple floated elements next to one another how will they stack if there is no reason?

A

it stacks on the next line

117
Q

what is the clear property and why do you need to use it?

A

when you use a float property it takes the elements out of normal flow, so other elements arent aware that the elements are there at all. So when you follow a floated element with a block element they will appear on the same line, using clear lets the following block element know that there is something floated on that line and it needs to start on a new line

float: right
says, there is something on this line that has been floated so start on a new line

118
Q

when you use float on an element and then follow that with a non floated block element what will happen?

A

they will be on the same line

119
Q

how do we get a non floated block element off of the same line of a floated element and on to a new line?

A

use the clear property

clear:right;

120
Q

when breaking down a front end design what process should we use in analyzing our page to find the best way to replicate the design with code?

A
  1. find a distinct horizontal section and draw a box around it.
    2, Ask, what, if anything, special do I need to do to get this box to behave in the way the design calls for.
  2. work inwards to the next level of elements within that box, until you’re down to the smallest details.
121
Q

what should we remember about the overuse of properties like offset, position, display and float?

A

to not overuse them which is a common mistake amongst new developers. Every element doesn’t need to have one of these properties set. Use them only when you have a specific reason to do so

122
Q

how do you change the color of links?

A

name of link: links {
color: desired color;
}

123
Q

how do you remove the underlines from hyperlinks?

A

text-decoration: none ;

124
Q

How do we get the white space from the top of a nav bar>

A

take it out of static position flow and set the offset top to 0

125
Q

how to change the cursor on a button or a link to be a finger pointing?

A

add this in the css

cursor: pointer;

126
Q

how do you do a reset for the default settings of fieldset tag in css

A 
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
127
Q

what is the space-evenly value on the justify-content attribute do?

A

divides remaining space between items evenly between the border and items and between the items

128
Q

what is the space-between value on the justify -content attribute do?

A

pushes items towards the edge of the border and divides extra space evenly in between the items

129
Q

what does the space-around value on the justify-content attribute do?

A

space around has equal space around all sides of the items, but it looks like it has double space between the items because two items both have equal space that together look like one big space

130
Q

what is NaN?

A

it stands for Not a Number

131
Q

when will you see a NaN?

A

When run a mathmatical operator on a variable that has no value or isnt a number, it will come up as NaN

132
Q

when using escape characters for making new lines or tabs with \t\n are suppoed to put spaces between them and the other words in the string?

A

no youre not

133
Q

What do we need to remember when using the backticks and $ { } strings?

A

that the whole string can be inside of the backticks - not just the part that takes the ${ }

134
Q

what do we need to remember about using parseInt( ) when we are using it to return an integer of an input tag?

A

the location inside of the parens needs to be a jquery selector.

so this will work
parseInt($(‘input’).val( ));

this will not
parrseInt(‘input’).val( );

Coding 2 (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions