Revision Flashcards
1
Q
What is the script tag used for ?
A
used to define the frontend JavaScript for a web page
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.
3
Q
What type of slash does the closing tag of an html tag take?
A
a forward slash
4
Q
what is the definition of an HTML element?
A
some form of inner content that is wrapped in an html tag
5
Q
Do all html tags have to have inner content?
A
no for example the image tag doesnt have inner content
6
Q
what three things does attributes consist of?
A
a property, equal sign, value in quotes
href = “https//:www.website.com”
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://
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
9
Q
what element should you wrap the H1 (and h2 if used as a subtitle for h1) in?
A
the header tag
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
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
12
Q
what is the content layer?
A
it is the layer of code that describes the html structure of a webpage
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)
14
Q
what two things does a rule set consist of?
A
a selector and declaration box
15
Q
psuedo class targets what?
A
specific state of an element
16
Q
psuedo element targets what?
A
specific part of the element
17
Q
how to link css to a html page
A
head
link rel=”stylesheet” type=”text/css” href=”./css/main.css”
/head
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
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
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
21
Q
what are some common background-size property values?
A
auto
number/percent
cover
contain
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
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
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
25
what are the most common values for background-repeat property?
```
repeat
repeat-y
repeat-x
no-repeat
space
round
```
26
what does the repeat value of the property background-repeat do?
it repeats the image both horizontally and vertically. The last image will be clipped if it doesnt fit
27
what is the default value for the background-repeat property?
repeat
28
what does the repeat-y value of the property background-repeat do?
repeats the image only vertically
29
what does the repeat-x value of the property background-repeat do?
repeats the image only horizontally
30
what does the no-repeat value of the property background-repeat do?
the image doesnt repeat it is only shown once
31
what does the space value of the property background-repeat do?
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)
32
what does the round value of the property background-repeat do?
The background-image is repeated and squished or stretched to fill the space (no gaps)
33
what to remember when using linear-gradient to add a transparent tint over a background image?
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
34
what goes between a linear gradient value and a url value on background-image property?
a comma
35
what should you put first on a background-image property a linear gradient or the image url if you need to use both?
linear gradient and then the background url
36
linear gradient goes on what property?
it goes on a background image property
37
when using pseudo elements ::after and ::before what do we need to put in the declaration box to add specific characters or strings ?
content : " "
in between the quotes you add what you want to show up before or after the element selected
38
how many colons do pseudo classes take?
a single colon
paragraph:hover{
color: red;
}
39
how many colons do pseudo element take?
two
paragraph::before{
content: '“'
}
40
how do we keyboard cycle forward through clickable elements on a webpage?
the Tab button
41
how do we keyboard cycle backward through clickable elements on a webpage?
hold the shift key and click the Tab button
42
how to use css to rotate an image?
img {
transform: rotate(180deg)
};
43
what are the 5 most common ways to target specific attribute selectors in css?
[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
44
what is an inline element?
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
45
what are block elements?
elements that start on a new line, height and width can be explicitly set. Flow goes vertically
46
what are inline block elements?
elements that have the same characteristics of a block element, but flow has been changed to go horizontally
47
how do we remove white space between inline block elements if there is some?
we make font-size: 0 on the parent element
48
what happens when we put two inline elements one after the other on the same line?
they are rendered next to each other with no space.
span Hello /span span World /span
result:
HelloWorld
49
what happens when we put two inline elements one after the other but on two different lines?
they are rendered on the same line but with a space between the two
span Hello /span
span World / span
result
Hello World
50
Can we change inline elements into block elements and vice versa?
yes we can, by using the display: property
51
when is it a good idea to change the display property of an element?
when semantically it is correct but the display default doesn't work for your design.
52
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 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.
53
when do you use margin-right: auto; and margin-left: auto; on an block element ?
when you want to horizontally center it in relation to its parent element.
54
can you use margin-left: auto; margin-right: auto; on an inline element?
no you cannot
55
when you need to center inline elements WITHIN A BLOCK ELEMENT, what do we use?
text-align: center;
56
can we only use text-align on text based elements?
no, we can use this on any inline element regardless if its text or not.
57
is the img element that is entered into an HTML document a block element or an inline element?
it is an inline element
58
what are forms?
forms are containers that hold a set of inputs
59
what are inputs?
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
what does a form tag wrap?
all of the labels and inputs that go on a form
61
what attributes do we want to set on the opening form tag?
the action and method attributes
62
what is the action attribute on a form tag?
the action attribute is the URL of the server endpoint that submitted form data should be sent to
63
what two values can we set for the method attribute on a form tag?
="post" and ="get"
64
which default method should we use starting off when using method attribute on form tags?
we should use method="post"
65
what is the fieldset element is used for?
to group related inputs and labels
66
What is the main reason to use the fieldset tags?
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
what is the legend tag?
the legend tag is like a title tag for the fieldset tag
68
when are fieldset tags not of much benefit?
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
what is a label element for?
it tells us and screen readers what the input is for
70
what attribute goes along with the label element?
for attribute
71
the value of the for attribute on a label tag should also be the value of what on the same tag?
the ID
label for="first-name">First name /label
input id="first-name" name="first-name" type="text"
72
do inputs tags require closing tags?
no they dont
73
what is an alternative way to write a label/input expression ?
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
what is the placeholder attribute when creating forms?
its sets the text that will go in the place to provide an example of whats to be entered
75
what is the required attribute when creating forms?
it gives a message to the user if the proper information isnt there
76
what is the pattern attribute when creating forms?
this allows us to dictate a certain pattern that must be followed like a phone number only allows numbers and dashes
77
what is the type attribute when creating forms?
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
what does a select tag do?
allows you to let users choose from a set of options. They wrap option tags
79
what are options tags?
they are the children of select tags and they are the individual options that you can choose if youd like
80
what is a selected attribute?
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
what tag does a selected attribute go on ?
it goes on a option tag
82
what is optgroup tag?
it is a way to group options into groups under the select tag. This is great for large groups of options
83
what does a button tag do?
creates a button
84
what two attributes does the button tag take?
submit or reset
85
what does the submit attribute do on buttons?
it enters the information
86
what does the reset attribute do on buttons?
it resets the page
87
what is the lang attribute?
the language attribute lets screen readers know what language to read the text in so it gives a proper pronunciation
88
what tag does the lang tag go on?
the html tag
89
how do we create a meta description in the head of an html document?
meta name='description' content=' actual description of page'
90
how to link an html document to a css stylesheet in the head tag?
link rel="stylesheet" href="main.css"
91
What should we keep in mind about using the word logo when creating alt attributes on images used for the logo of a company?
the word "logo" is redundant when setting alt attributes on logos. Just communicate the business entity being named by the logo
92
what shows up on the document when you use the fieldset tag?
a box in which all the form information will be put in
93
what shows up on the document when you use the legend tag that follows the fieldset tag?
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
what is the GENERAL hierarchy of creating a form input?
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
what two things go with the label tag?
1. The for attribute and the purpose of the input box
2. the name of the input box
label for="email"> Email
96
what does the "type" attribute do on the input tag?
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
what two things must you make sure that you put with the input tag?
1. id = " " (with value matching the label for= " ")
2. type = " "
(with value specifying the type of input, i.e text, phone, email, etc)
98
any html element that you don't explicitly set a position to gets what position value?
static
99
what is position: static mean?
that the element is in normal flow
100
what is normal flow?
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
what are the four common values for the position property?
static, fixed, relative, absolute
102
what does position: fixed do?
the element will stay in place and other elements will behave as if the fixed element doesnt exist
103
what is a good example of when you would want to use position: fixed?
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
what are the four offset properties that can be applied in CSS?
top, bottom, left and right
105
what type of elements can offsets properties be applied to in CSS?
elements that have position properties with values set to fixed, relative or absolute
106
how do we apply offset positions?
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
what does position: relative do?
it keeps things in normal flow, but it allows you to use offsets to it to position it wherever you want
108
what does position: absolute do?
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
what do you need for position: absolute to work?
a parent container with a non static position value
110
if you need to use position: absolute and you do not have a parent container with non static position value what do you do?
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
what is a common reason for using absolute positioning?
when you want to create a nav bar with the links on one end and a logo or something on the other end
112
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?
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
what is the float property used for in css?
to get text to wrap around an image or some sort of other element
114
what happens if you put float:right on a element in css?
the element goes to the right and any text around it will wrap to the left
115
when you have multiple floated elements next to one another how will they stack?
horizontally on the same line if there is room.
116
what happens when you have multiple floated elements next to one another how will they stack if there is no reason?
it stacks on the next line
117
what is the clear property and why do you need to use it?
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
when you use float on an element and then follow that with a non floated block element what will happen?
they will be on the same line
119
how do we get a non floated block element off of the same line of a floated element and on to a new line?
use the clear property
clear:right;
120
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?
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.
3. work inwards to the next level of elements within that box, until you’re down to the smallest details.
121
what should we remember about the overuse of properties like offset, position, display and float?
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
how do you change the color of links?
name of link: links {
color: desired color;
}
123
how do you remove the underlines from hyperlinks?
text-decoration: none ;
124
How do we get the white space from the top of a nav bar>
take it out of static position flow and set the offset top to 0
125
how to change the cursor on a button or a link to be a finger pointing?
add this in the css
cursor: pointer;
126
how do you do a reset for the default settings of fieldset tag in css
```
fieldset {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
```
127
what is the space-evenly value on the justify-content attribute do?
divides remaining space between items evenly between the border and items and between the items
128
what is the space-between value on the justify -content attribute do?
pushes items towards the edge of the border and divides extra space evenly in between the items
129
what does the space-around value on the justify-content attribute do?
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
what is NaN?
it stands for Not a Number
131
when will you see a NaN?
When run a mathmatical operator on a variable that has no value or isnt a number, it will come up as NaN
132
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?
no youre not
133
What do we need to remember when using the backticks and $ { } strings?
that the whole string can be inside of the backticks - not just the part that takes the ${ }
134
what do we need to remember about using parseInt( ) when we are using it to return an integer of an input tag?
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( );
