/fewdbos16

Primary LanguageHTML

FEWD Outline

Session 01

  • Basics of how the web works
    • how does a browser render a webpage
      • browser -> DNS -> Server
      • different types of HTTP requests
  • Intro to web development
    • browser vs. server code
    • front-end vs. Back-end development
    • what are HTML, CSS and JavaScript
    • what tools to front-end developers use
  • HTML code along using codepen
    • hello world to show how tags give meaning to content
    • HTML syntax
    • p, ul, ol, li, h1..h3
    • links
      • href attribute
    • images
      • src and alt attributes
      • absolute and relative URLs
    • comments
  • HTML file structure
    • html, head, title, body

Homework

  • Code your resume in HTML markup

Session 02

  • Doctypes and HTML validation
  • Block and inline elements
  • HTML structure tags
    • divs, spans
  • Common HTML attributes
    • id, class
  • HTML5 structure tags
    • section, article, header, footer
  • CSS code along
    • syntax and terminology
    • selectors
    • colors
    • font styles
  • CSS box model
    • width, height, margin, padding, border
    • creating boxes part 2 (pair programming)

Homework

  • Update your resume using CSS
  • Website based on given design

Session 03

  • External stylesheets
  • CSS selectors in more detail
  • CSS positioning
    • static, relative, absolute, fixed
    • creating boxes part 2 (pair programming)
  • Column layouts
    • float/clear
    • inline-block
    • creating layouts (pair programming)

Homework

Session 04

  • Review positioning and layout
  • HTML forms and styles
  • HTML tables and styles
  • Job board code along

Homework

  • Complete job board layout

Session 05

  • Twitter Bootstrap
  • Job board code along using Bootstrap

Homework

  • Complete job board layout using Bootstrap
  • Treks layout using Bootstrap

Session 06

  • Intro to command line
  • Intro to programming
  • JavaScript using Node
    • data types
    • variables
    • operators
    • conditionals
    • loops
    • functions
  • First three world problems

Homework

  • Last three word problems

Session 07

  • Arrays
  • Practice in teams
  • Objects
    • built in objects, props, and methods
    • Literals vs. constructors

Session 08

  • JavaScript in the browser
    • places to write JavaScript
    • using the console
    • alert and prompt
  • JavaScript and the DOM
  • Intro to jQuery
    • selectors
    • events
    • DOM manipulation

Session 09

  • jQuery cont.
  • Photo gallery
  • Task manager

Session 10

  • Intro to Ajax/JSON
  • Task manager with a Node.js API

Session 11

  • jQuery and Ajax review
  • Spotify Project

Session 12

  • Bootstrap JS
  • Final project planning

Session 13

  • Foursquare Project

Session 14

  • HTML/CSS review
  • More advanced HTML/CSS layouts

Session 15

  • Mobile topics

Session 16

  • Student choice (Google maps, D3)

Session 17

  • Student choice

Session 18

Final presentation prep

Session 19

Final presentations

Session 20

Final presentations