iRAT
Hand in your test papers.
Mini Lecture
Clarification
Rank the following CSS Selectors by specificity
- #foo .bar .qux
- #foo div ul li p a
- .bar #foo
- #foo .bar p
- #foo #baz
What color is this text?
<p class="title" id="red">Hello, World!</p>
#red .title {color: red; border: 1px solid green}
.title {color: green; font-size: 34px;}
p {color: black; font-size:20px; border: 1px solid orange;}
- Black
- Red
- Green
- Orange
What color is the border?
<p class="title" id="red">Hello, World!</p>
#red .title {color: red; border: 1px solid green}
.title {color: green; font-size: 34px;}
p {color: black; font-size:20px; border: 1px solid orange;}
- Black
- Red
- Green
- Orange
What font size is this text?
<p class="title" id="red">Hello, World!</p>
#red.title {
color: red; font-size:12px; border: 1px solid green}
.title {color: green; font-size: 34px;}
p {color: black; font-size:20px; border: 1px solid orange;}
- 20px
- 34px
- 16px
- None of the Above
Given the following options, which is the best way to diagnose and resolve a problem with a CSS rule not applying to your code.
- Look at your CSS directly
- Use Dev Tools style inspector
- Add !important to the style that's not applying
- Both A and C
A JavaScript function you just wrote is not working, where in dev tools would you want to look first?
- Network Panel
- Element Inspector
- Sources Panel
- None of the Above
Place the following steps in order of effectiveness at solving a CSS problem
- Add a new class to the element in html, and new styles in CSS
- Add an "element.style" style to the element in dev tools
- Check for specificity/cascading issues in Dev Tools
- Check to see if you wrote the CSS rule correctly
Place the following steps in order of effectiveness for diagnosing and resolving a JS function not firing.
- Check to see if you wrote the JS function correctly
- Run the JS through a linter
- Add console.log statements where appropriate to track script execution
- Check the error output of the console
Jeff just diagnosed and solved a problem.
Rearrange Jeff's diagnosis steps in the order you would have chosen and then decide as a team which steps you would have performed and in which order. (you CAN drop steps)
- Effect wasn't showing up on screen
- Found a few missing semicolons, fixed them
- Refreshed page, still had errors
- Checked HTML, was clear of errors
- Checked Chrome Dev Console, saw 2 errors
- Fixed error in his initialization function (1st error)
- Refreshed page, had another error
- Fixed extra comma in a declaration (2nd error)
- Refreshed page, everything worked.
Back to Jeff.
What is the biggest optimization you could have performed?
- Effect wasn't showing up on screen
- Found a few missing semicolons, fixed them
- Refreshed page, still had errors
- Checked HTML, was clear of errors
- Checked Chrome Dev Console, saw 2 errors
- Fixed error in his initialization function (1st error)
- Refreshed page, had another error
- Fixed extra comma in a declaration (2nd error)
- Refreshed page, everything worked.
Create a bug in CSS that can be debugged by dev tools
Among the team, choose the best CSS bug, and explain why you thought it was the best example of a css rule to be diagnosed through dev tools.
Create a JS bug that can be diagnosed by dev tools
Among your team choose the best JS bug and explain why.
Given the following code example: Individually: What is the expected output of this code
var theName = "sara";
var namer = function(theName) {
document.write(theName)
}
namer();
As a team what is the output of this code
var theName = "sara";
var namer = function(theName) {
document.write(theName)
}
namer();
undefined
This script is not performing the task you think it should be. Choose the between lines where placing a console.log() would be most effective in checking to see if the function is firing at all.
var theName = "sara";
var namer = function(theName) {
document.write(theName)
}
namer();
- 1-2
- 2-3
- 3-4
- 4-5
- 5-6
What is the console.log function you should write to check to see what name is set to inside the function?
var theName = "sara";
var namer = function(theName) {
document.write(theName)
}
namer();
console.log(theName);
Sara's code isn't printing out her name. Which of the following mistakes in this code is the actual cause?
var theName = "sara";
var namer = function(theName) {
document.write(theName)
}
namer();
- theName should be passed into the function
- theName is not a global variable
- document.write(theName) is missing a semi-colon
- namer is not properly initialized as a function
I'm having a really tough time using Dev Tools. I'd like you to write up some instructions for me to do the following:
- Start with this page: (http://jsbin.com/IdAFaJa/1/ )
- Add your team name to the H1 tag
- Apply your team color to your team name
- Add an unordered list with your team member names after "members"
- Create a custom css class for your team member names.
- Apply that style to the list of names
- Find an image on wikipedia commons (http://commons.wikimedia.org) for your team mascot:
- provide the search term used to find that image
- Insert it between the text: "Team {Your Team Name}, Go <img>'s"
- Image should be 300x300px
- Image should have a border of 5px inset of your team color;
Final Project Introduction
Create a REAL web app
Working with Empire Justice Center (EJC) to create a web-based foreclosure app.
Each team creates their own version.
Teams determine the criteria for critique.
In the end one team will emerge victorious, and be chosen by EJC to go live.
This is job experience, put this on your resume.
Project Proposal
- Scope of the project
- Style Tile
- All published on GitHub
Project Midterm
- Mobile First, Responsive Prototype
- Foundation 5
- Information Architecture in place
- Layout finalized
Final Project
- Jekyll-based static web app
- Using data sources for content
- Javascript is a requirement
- Cross-Browser compatible to IE 9
Unit 2 Preview
- User Research
- Collaborative Design
- Style Tiles
- Scope
Work Study Available
See me for details