week3.md

Week 3 - Inspector, More CSS and Boxes

What You'll Learn

• How to create your own HTML and CSS files
• How to use the Web Inspector
• CSS and Why the Internet is Made Out of Boxes

Today's Session

Quick review

How did you accomplish this exercise?

• Take a look at this image. Now, here's the HTML code behind it. Can you use CSS classes to make it look the same as the image?

Creating Your Own HTML and CSS files

Before we get too far into HTML and CSS, I want you all to have the ability to create files on your own computers.

• Folder Structure
• index.html file
• style.css file
• How to preview your HTML files using a web browser
• How to link to your CSS file from your HTML file

Web Inspector

The web inspector is avaiable in Chrome, Safari, or Firefox, but we'll be focusing on the Chrome version.

Why use it?

• Debug your code
• Test your code
• Test performance

What are some things can we do in it?

• 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:

• Video tutorial
• Text tutorial
• Official Chrome page

Why the Internet is Made Out of Boxes

• 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