Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
68 Cards in this Set
- Front
- Back
|
What does a Doctype do? |
DOCTYPE sets the HTML version for browser. If none, browser will assume latest |
|
|
http:// in URLis a? |
protocol |
|
|
example.com in URLis a? |
server |
|
|
/magic-cake.html in URL is a? |
path to a file |
|
|
a browser is basically a... |
HTML reader |
|
|
What happens when you enter in a URL into the browser bar? |
a request is sent to the server, asking for the file defined in the path and reads it. |
|
|
how do you add a URL to an anchor tag? |
the correct HTML attribute is: href="http://example.com" |
|
|
what are all classes/IDs formally called in CSS? |
selectors |
|
|
what is the type-selector? |
CSS selector using html tag name without brackets ex: p |
|
|
what is the descendant-selector? |
CSS selector used to select tags ONLY if they are children of another tag ex: ul li |
|
|
what is the pseudo-selector? |
CSS selector used to select tags only when certain conditions have occurred ex: a:hover |
|
|
what are some pseudo-selectors? |
:hover :first-child :last-child :nth-child(odd) same as :nth-child(2n+1) :nth-child(even) same as :nth-child(2n) |
|
|
in a Hexadecimal colors, what order are the color definitions? |
first two = red middle two = green last two = blue |
|
|
for a color value, what are the decimal and hexadecimal minimums and maximums? |
decimal = 0 - 255 0 = low; 255 = max hexadecimal = 00 - FF 00 = low; FF = max |
|
|
why do hexadecimal numbers use letters? |
Hexadecimal numbers run from 0-15, but use letters for numbers above 9 ( A = 10 ... F = 15) |
|
|
what is a box-model? |
the margin, padding, border, and content width of box = content + padding + border. |
|
|
what is a block-level tag? examples (6)? |
a block-level tag takes up the entire width of the container. new boxes are pushed to the line below. h1 h2 h3 p ul li |
|
|
what is an inline-level tag? examples (4)? |
inline-level tags don't try to take up more width than they need. a img input label |
|
|
how do you turn a block-level tag to be inline-level? where would you do this? |
ul li { display: inline } you would use it for navigation |
|
|
when is padding used? |
Padding is used to control the size of a box withoutadjusting the size of the content inside the box. |
|
|
when is margin used? |
Margin is used to control the space between boxes. |
|
|
what is the proper structure for a link tag? |
link tag is an empty tag so we need to set attributes |
|
|
How can you center content with: a block level tag AND its fixed width
.main-content { width: 500px; padding: 20px; } |
Set left and right margins to auto. .main-content { width: 500px; padding: 20px; margin: 30px auto 0 auto; } |
|
|
what does auto mean when you use it with margin? |
it means take up as much space as you can, thus centering divs with set widths |
|
|
How can you center children INSIDE a block level tag? Main Title |
Set text-align of children (h1) to center h1 { text-align: center; } |
|
|
what is a content image? |
content images are just as necessary to page as text |
|
|
what are layout images? |
images part of the background to enhance, but not necessary to understand content of page. |
|
|
What is an interface images? |
images that assist with the interface of the webpage, but are not required to uderstand content of page. ex: download arrows |
|
|
how do you create a content image? |
use an which is an empty tag and an inline tag. usually placed inside a block level tag (use like an a tag), such as an li |
|
|
with the background property, whats the shorthand order? |
background: #ddd url(cake.png) top left repeat; color|image|position|repeat |
|
|
generic reset? |
html, body, h1, h2,h3, p, ol, ul, li, a { padding: 0; border: 0; margin: 0; font-size: 100%; font:inherit; } |
|
|
what are 6 different input type attributes? 12 new html5 ones? |
url|email|search|date|tel|number|range| month|week|time|datetime-local|color |
|
|
when setting up a form, how do you set up the label and input to work together? |
you use a for and id attribute: Recipe Name |
|
|
are labels and inputs inline or block level tags? |
inline |
|
|
in css how can you differentiate between an and ? |
input[type=submit] { width: 120px; } |
|
|
in css how can you differentiate labels? |
label[for=recipe-name] { width: 120px; } |
|
|
How do you properly write a meta declaration in HTML5? |
|
|
|
in HTML5, do we need to set the type attribute (type="text/javascript") in a is a script tag empty or no? does a script tag use href or src? |
no, |
|
|
in HTML5, do we need to set the type attribute (type="text/javascript") in a tag? do we need the rel (rel="stylesheet")? is a tag empty? |
|
|
|
in HTML5, what does the represent? |
The i tag represents text in an “alternate voice” or “mood” ex: technical term, a thought, phrase |
|
|
in HTML5, what does the represent? |
The b tag represents “stylistically offset” text ex: key words, product names, actionable words, article lead |
|
|
in HTML5, what does the represent? |
The em tag meant emphasis ex: |
|
|
in HTML5, what does the represent? |
The strong tag meant strong emphasis |
|
|
What are 9 HTML5 elements? |
Section Header footer aside nav article main figure/figcaption time |
|
|
what does a section element represent? |
The section element represents ageneric document or applicationsection. |
|
|
whats the difference between a div and a section? |
A div has no semantic meaning,but the section element does.It’s used for grouping togetherthematically related content. when replacing one for the other, ask yourself, "is all of the content related?" |
|
|
what is the document outline? which tags have one? |
doc outline means tags have their own semantic outline. article|aside|nav|section title of page title of section |
|
|
what does a header element represent? |
intro stuff and navigation, can be used inside sections . not position dependent like the footer |
|
|
what does an aside element represent? |
tangentially related to the content surrounding it... think sidebar An aside element is appropriatewhen it is used to represent contentthat is not the primary focus of anarticle or page, but it is still relatedto the article or page. |
|
|
what does a nav element represent? |
The nav element represents asection of a page that links toother pages or to parts withinthe page: a section withnavigation links. intended for major navigation |
|
|
what does article element represent? |
The article element is anothertype of section. It is used forself-contained related content. ex: blog post, news story, review |
|
|
what does main element represent? |
The main element representsthe main content of the bodyof a document or application. only used once in page, not to be used as a child element |
|
|
border-radius? |
.box { border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } border-radius: ; |
|
|
box-shadow? |
box-shadow: ; inset doesn't always need to be set, because default is implied as drop shadow spread-radius doesn't need to be set and can be blank, blur is always assumed first if only. |
|
|
text-shadow? |
text-shadow: ; |
|
|
box-sizing? |
used to change default box model, which calculates widths and heights to given elements content-box: default | width = only content border-box: width = content, padding, border initial: sets to default inherit: takes from parent element |
|
|
multiple backgrounds? |
background-image: url(bg1.png), url(bg2.png); background-position: top left, center right; background-repeat: no-repeat, repeat; |
|
|
background? |
background: url(bg1.png) top left no-repeat; |
|
|
does opacity affect all child elements? |
yes |
|
|
font-face? |
@font-face { font-family: 'OpenSans'; src: url('openSans.eot'); font-style: normal; font-weight: normal; } |
|
|
translate |
.element { transform: translate(20px, 30px); } This translates the .element 20px to the right and 30px down also: transform: translateX(20px); transform: translateY(30px); |
|
|
rotate |
.element { transform: rotate(45deg); } |
|
|
scale |
.element { transform: scale(x, y); } also: scaleY(y); scaleX(x); |
|
|
skew |
.element { transform: skewX(25deg); transform: skewY(-85deg); } |
|
|
transition |
.element { background-color: black; transition: background-color 0.2s ease-in-out; } .element:hover { background-color: blue; } transition: ; property can be all, to effect all properties to be affected |
|
|
what does floating left or right do? |
removes elements from the document flow and moves them to the specified edge of their parent container. other content within the parent element will wrap around floats |
|
|
clearing is necessary if floated items are taller than non-floated content or all content is floated. what are 3 clear float methods? |
1. put a div with the clear:both after div. (not best) doesn't extend border. 2. manual clear, put a div inside container at bottom with clear:both. it extends border. (not best because adding empty element). 3. clearfix method, add class to parent element; clearfix uses :before/:after |
|
|
what is the clearfix? |
.group:before,.group:after { content: ""; display: table; } .group:after { clear: both;} .group { zoom: 1; /* IE6&7 */} |
