CSS & Review
If you are struggling with one of these things, find a tutorial online or come to office hours!
HTML is a markup language similar to XML that is used to write content for the web.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>A simple HTML document</title>
</head>
<body>
<div class="content">
<p>This is a paragraph</p>
<ul>
<li>This is</li>
<li>A list</li>
<ul>
</div>
</body>
</html>
Git is a distributed version control tool that lets you easily track changes in your code over time.
Ruby is a dynamic scripting language that has become very popular for web development
# double quotes are not the same as single quotes
name = "Quinn"
puts "Hello, #{name}" # prints Hello, Quinn
puts 'Hello, #{name}' # prints Hello, #{name}
# the last line in a function is the implied return value
def sayhi(name)
"Hi #{name}"
end
# is equivalent to
def sayhi(name)
return "Hi #{name}"
end
# parentheses are usually optional
puts sayhi "Quinn"
# blocks are enclosed in {} or do...end
# they're a little bit like anonymous functions
fruits = ['apples', 'bananas', 'oranges']
fruits.each {|fruit|
puts "Monkeys like #{fruit}"
}
fruits.each do |fruit|
puts "Monkeys like #{fruit}"
end
# Ruby also lets you use functional concepts like map, join, & select
puts "Monkeys like " + fruits.join(" & ")
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
</head>
<body>
<p><%= @this_will_output_something %></p>
<p><% @this_will_not_output_anything %></p>
</body>
</html>
/* this is a comment */
/* This is an element selector. It will match all <p> elements */
p {
/* This is a rule. It describes how the <p> elements should look. */
background: #FEFEFE;
}
/* This is a class selector. It will match all elements with class="widget" */
.widget {
font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
color: #333;
}
/* This is an id selector. It will match ONE element with id="bob" */
#bob {
width: 9001px;
}
/* this will match all paragraphs */
p {
padding: 10px;
}
/* this will match the intro element */
#intro {
font-family: sans-serif;
}
/* this will match paragraphs that are descendants of the id="intro" element */
#intro p {
background-color: #c0392b;
color: #FFF;
}
/* this will match paragraphs that are direct children of the id="intro" element */
#intro > p {
text-decoration: underline;
}
You can access this slideshow at slides.com/qrohlf