Week03: HTML + CSS

Photoshop, continued

• Adding fonts
• Pattern fills
• Layer Styles
• Smart Objects
• Saving images for the web: GIF vs. JPG vs. PNG

Intro to HTML/CSS

• Document Object Model (DOM)
• Semantic Markup
• Web Typography
• Box Model
• Block vs. Inline Elements
• Margin Collapse
• Layouts: Intro to Floats

Reference

• Semantic Markup
• MDN HTML Reference
• W3Schools HTML Reference
• HTML tags vs. elements
• HTML Character Entities

Resources

• Google Fonts
• Design inspiration:
  • Behance > Interaction Design
  • Site Inspire
  • Typography using Google Fonts

HTML Tags

• Core
  • DOCTYPE (not an HTML tag)
  • html
  • head
    • title
    • meta
  • body
• Common
  • img
  • h1 - h6
  • p
  • br
  • hr
  • a
  • ul, ol, li (dl, dt, dd, menu, menuitem)
  • <!— —>
• Content Structure
  • section
  • header
  • footer
  • aside
  • nav
  • article
  • div
  • span
• Text Formatting
  • style
  • strong (instead of b)
  • em (instead of i)
  • mark
  • del (instead of strike)
  • ins
  • sub
  • sup
  • q
  • blockquote
  • abbr
  • address
  • pre, code