Welcome to INF 362

Intermediate Web Development

About Me

Eric Steinborn
esteinborn@albany.edu
esteinborn on GitHub

Questions?

TBL

Team Formation

Self-Assessment:

"I would define my knowledge of CSS and JS as.."

  1. I know only the basics
  2. I know a little more than the basics
  3. I know some jQuery and CSS
  4. I know a lot of jQuery and CSS3
  5. I write mostly vanilla JS, and use SASS

Name 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

Activities

Front-End Boot Camp

Which CSS selector would apply to this element? 
<p class="title">

  1. .title
  2. p
  3. #title
  4. title

What is the proper way to open and close a paired html tag (p, h1, etc)?

  1. <p>Foo
  2. <p>Foo</p>
  3. <p Foo /p>
  4. <p Foo />

What is the proper way to open and close an unpaired html tag (hr, img, etc)?

  1. <img></img>
  2. <img />
  3. <img>
  4. <\img>

What is proper way to get this element using JS? 
<p id="foo">

  1. document.getElement("#foo");
  2. document.getElementById("foo");
  3. document.querySelectorAll("#foo");
  4. 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) 

  1. <html>
  2. <head>
  3. <body>
  4. <main>

Placement of most script tags (script)

  1. <html>
  2. <head>
  3. <body>
  4. <main>

Layout of head tag

  1. charset, title, css, js
  2. title, charset, css, js
  3. css, js, charset, title
  4. title, css, js, charset

Place an image on a page

  1. <image src="foo.jpg">
  2. <img source="foo.jpg">
  3. <img="foo.jpg">
  4. <img src="foo.jpg">

Style an element on a page

  1. <p style="color: green">Wagon</p>
  2. <p class="wagon">Wagon</p>
  3. <p class="wagon defaultColor">Wagon</p>
    .defaultColor{color:green}
  4. <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>

  1. Page layout
  2. Tabular data
  3. Both A & B
  4. Neither A or B

Choose the selector to target this element to differentiate it from another <p>:

<p id="foo" class="bar" title="baz">
  1. #foo
  2. .bar
  3. p[title=baz]
  4. 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?

  1. <table>
  2. <ul>
  3. CSS Floats
  4. jQuery Plugin

For Next Class

  1. Download Google Chrome
  2. Complete "Discover Dev Tools" Level 1-4.2
    1. Complete 4.3-7 for Extra Credit
  3. Read: Understanding CSS Specificity
  4. Read: Code Smells in CSS
  5. Read: jQuery Code Smells
  6. Read: 16 Common JS Mistakes
  7. Read: HTML/CSS Code Standards
  8. Read: JavaScipt Code Standards