General Assembly Prep Flashcards
tags
HTML documents use to tell the browser how to format our content
<h1> </h1>
first level heading
<p> </p>
normal paragraph
normal paragraph tag
<p> </p>
first level heading tag
<h1> </h1>
— attribute / attributes value
attribute is type attribute value is “email”
attributes
attribute is an option for each tag
what is html
HTML is the structure of the content that goes inside the tags. Browsers, provide default style, but its pretty ugly by itself.
what is CSS
CSS controls the style of the HTML content, it lets you change colors, fonts, layout and more
<h1> </h1>
first level heading
<p> </p>
normal paragraph
normal paragraph tag
<p> </p>
first level heading tag
<h1> </h1>
— attribute / attributes value
attribute is type attribute value is “email”
attributes
attribute is an option for each tag
what is html
HTML is the structure of the content that goes inside the tags. Browsers, provide default style, but its pretty ugly by itself.
what is CSS
CSS controls the style of the HTML content, it lets you change colors, fonts, layout and more
boilerplate - basic structure of every website
head
metadata . . . . . . .
body
content …….
unordered list tag
<ul> used to make navigation bar</ul>
how do you use to get info from user
an input tag
text align options
right left center or justify
examples of tags that don’t have > end
<img></img>
<img></img>
background image
background: url(“https…”)
some url background styling
background: url(“http://dash.ga.co/assets/anna-bg.png”);
background-size: cover;
background-position: center;
what is padding
the edge of an element to whats inside the element
what is the header
think of the as a container that holds elements, kind of like the body, but for the web page’s header.
<ul></ul>
unordered list, one of html’s most common tags. We can use it to make a navigation bar.
<li>
</li>
list item
bullet points are crated
when you use a unordered list ul or a list item, li
<a> </a>
anchor link
what does the link tag do
the link tag works as opposed to the style tag. It allows you to link to a different page instead of having to do it all in your one age of code.
link tags two attributes
href - where the CSS file lives
ref - always set to “stylesheet”
how to make things line up
select the right tag in the styling section and put in it display: inline;
padding with one value does?
padding on all sides
padding with four values does
Up Right Down Left like clock
margin vs padding
margin outside, padding inside
how create border on image
img {
border: 7px solidwhite;
border-radius: 20px;
}
can a ul have a background
yes an unordered list can have o long stripe background
sample anchor link
<a></a>
what is block display
means display whole width of pageand have line breaks before and after
controlling width of text on a page example
article {
width 500px;
padding 20px;
margin: 0 auto;
}media query example
@media (max-width: 500px;){
body{
background: red;
}
}advanced colors
rgba(0,0,0,0.5)
rgb 0 - 255
a - transparency 0 - 1
display which takes up whole width of page
block
where does padding go to get rid of bullet points
ul
ex. ul {
padding: 10px;
}
adding some space between list items
li {
padding: 0px 10px 0px 10px;
}
adding javascript 1
$(“button”).on(“click”, function() {alert(“a button was clicked”)});
$
(“button”) - selector chooses element to listen to
.on() - the .on function sets up an event listener for the element we’ve selected
.on(“click”, function() - “click” says what type of event we are listening for
getting most pictures to be aligned correctly.
body {
margin: 0 auto;
max-width: 600px;
}
when adding attributes and attribute values to a tag do you use a comma?
no
adding class to a tag
where div and class disagree who wins
class
line-height:
tells us to increase or decrease vertical space between lines
getting text to the bottom of a few divs
div {
position: relative;
}
p {
position: absolute;
bottom: 0;
margin: 0;
}line break
<br></br>
prices text example
<p>marzipan pudding $14<br></br><small>This goes good with stuff</small></p>
tag you use to make part of an element display differently than the rest of the element
span
span example
<span>$25</span>
block elements verse inline elements
block - p, h1, h2, ul, li, div
inline - <a>hyperlinks, images, form fields, span</a>
difference between block and inline
block take up the whole page width, inline only exist within those lines take up only as much space as they need to.
text-align: right; will move any ___ to the right
block
float
float will allow you to move a span or more likely an image around in its container element
gradient example
background: black;
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
media query example
@media (max-width: 600px;) {
body {
background: red;
{
{
