Quick announcement: I'm planning on splitting our time together in half. Roughly 2-3 hours of demos/new information, and roughly 1-2 hours of lab time on any interactive work you want to do in your studio classes. During the second half of our workshops we can go off in any direction pertaining to a project you're working on.
Also, we have no session on March 15th, instead of March 22nd.
- How to use the Web Inspector
- HTML and CSS Review
- Why the Internet is Made Out of Boxes
The web inspector is avaiable in Chrome, Safari, or Firefox, but we'll be focusing on the Chrome version.
- Debug your code
- Test your code
- Test performance
-
Locate elements
- Highlight both code and what it creates on the page
- Scroll to view elements
- Ctrl+F within the inspector
-
DOM modification
- Change text
- Change tags
- Change attributes
- Delete anything
-
Edit CSS for testing purposes
- Stylesheet styles
- Hover styles
- Computed styles
- Built-in color selector
- Add any new styles on the fly
- Verify/check CSS hierarchy
-
Emulate different screen sizes
- Mobile, tablet and laptop testing
-
Look at resources
-
Inspect cookies
-
Investigate load times
For more information on the inspector:
-
Simple HTML review:
- Create a new HTML file and copy: http://jsfiddle.net/kJHdt/86/light/
- Use HTML to markup the article
-
CSS review:
- Setup an external CSS stylesheet
- Style your HTML with the rules below:
- Make the main headline dark green.
- Use the font family "Georgia" for the main headline and the subheadline.
- Center the text of the main headline and the subheadline.
- Make the paragraphs have a line height of 19 pixels.
- Remove the underline from the links.
- Make the "You might also like" label all uppercase.
- Make an underline appear when you hover over a link.
- Demo: http://sports.espn.go.com/espn/grantland/story/_/id/9175394/out-great-alone
- Exercise: Let's draw some boxes
- Pick any news website you'd like
- Print it out
- Physically draw the boxes on top
- On the CSS Box Model: Box Model Ninja