Welcome to INF 362 – Intermediate Web Development
Welcome to INF 362
Intermediate Web Development
About Me
Eric Steinborn
Questions?
TBL
Team Formation
Self-Assessment:
"I would define my knowledge of CSS and JS as.."
I know only the basics I know a little more than the basics I know some jQuery and CSS I know a lot of jQuery and CSS3 I write mostly vanilla JS, and use SASSName That Tune Team
Syllabus Overview
RAT
Readiness Assessment Test
You have 10 MINUTES to read the Syllabus
iRAT
Individually take a short test on the syllabus
iRAT
10 Minutes
iRAT
5 Minutes
iRAT
1 Minute
iRAT
Hand in your test papers.
tRAT
Take a short test on the syllabus as a team.
tRAT
IF-AT sheets
tRAT
15 Minutes
tRAT
10 Minutes
tRAT
5 Minutes
tRAT
1 Minute
How did you do?
Appeals Process
Mini Lecture
Clarification
Some things to note
- Sign up for GitHub ASAP
- Add username to the Team spreadsheet: http://bit.ly/inf362teams
- Reading assignments are crucial to your success
- Peer Reviews (2 opportunities to improve, with a final graded review)
Activities
Front-End Boot Camp
Which CSS selector would apply to this element?
<p class="title">
.title
p
#title
title
What is the proper way to open and close a paired html tag (p, h1, etc)?
<p>Foo
<p>Foo</p>
<p Foo /p>
<p Foo />
What is the proper way to open and close an unpaired html tag (hr, img, etc)?
<img></img>
<img />
<img>
<\img>
What is proper way to get this element using JS?
<p id="foo">
document.getElement("#foo");
document.getElementById("foo");
document.querySelectorAll("#foo");
document.getElementById("#foo");
Write a proper html5 doctype
<!doctype html>
Write a proper html5 in the least lines as possible
<!doctype html> <html> <title>a</title> <body> </body> </html>
Valid placement of css styles (links)
<html>
<head>
<body>
<main>
Placement of most script tags (script)
<html>
<head>
<body>
<main>
Layout of head tag
charset, title, css, js title, charset, css, js css, js, charset, title title, css, js, charsetPlace an image on a page
<image src="foo.jpg">
<img source="foo.jpg">
<img="foo.jpg">
<img src="foo.jpg">
Style an element on a page
<p style="color: green">Wagon</p>
<p class="wagon">Wagon</p>
<p class="wagon defaultColor">Wagon</p>.defaultColor{color:green}
<p><font color="green">Wagon</font></p>
Make this p element
<p>Hi</p>look like this in three lines of css or less:
(Note: don’t have to change font size or weight )
color:orange; background-color:blue; font-style: italic;
Now make it look like this with three more lines of code:
(note: bold text is one)
border: 10px yellow dashed; text-align: center; font-weight: bold;
Three more lines of CSS to make this:
padding: 1em; text-decoration: underline; border-radius: 30px;
How would you remove the bullets from an unordered list?
list-style-type: none
Same unordered list. Make all the list items display horizontally, and all should be the same height 2em and width 5em.
display: inline-block / float:left height: 2em; width: 5em;
The navigation you just laid out has links in it, but they don’t fill up the 5x2em size. How would you make them the same size as their parent element?
display: block
When would you use a
<table>Page layout Tabular data Both A & B Neither A or B
Choose the selector to target this element to differentiate it from another <p>:
<p id="foo" class="bar" title="baz">
#foo
.bar
p[title=baz]
p
You just laid out a group of images in a 3x3 grid. Out of the following choices, which would be considered a best practice to have used to accomplish this?
<table>
<ul>CSS Floats jQuery Plugin