Front End Basics

HTML, CSS, and JavaScript

Objectives

• Understand the difference between Front-End and Back-End Code
• Understand the roles of HTML, CSS, and JavaScript

Front End Vs. Back End

1. The Front End is the stuff that you see and interact with: HTML, CSS , and JS
2. The Back End is everything else: so many choices!
3. Restaurant Analogy: The backend is everything that happens in the kitchen; the front end is what is plated and sent to your table

http://skillcrush.com/2012/04/17/frontend-vs-backend-3/

HTML

• HyperText Markup Language
• Defines the structure of a webpage
  • "put an image here"
  • "put a form here"
• The "nouns" of a webpage

CSS

• Cascading Style Sheets
• Defines the style of HTML
  • "make all text purple"
  • "give the first image a yellow border"
• The "adjectives"  of a webpage

JavaScript

• Adds logic and interactivity to a page
  • "Do some math"
  • "Change color when the user clicks"
  • "Load new data from twitter"
• The actions or "verbs"  of a webpage

Demo CodePen