spacewaffle / fewd

Lesson plan for General Assembly's Front end web development course

FEWD Outline

Session 01

• Instructor and class intros
• Ice breaker (three things to bring to an island)
• Intro to course and tools
• Intro to web dev lecture
  • How does a browser render a webpage
  • 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
  • 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

• Homework review
• 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

Exercise

• Update your resume using CSS
• Creating boxes (pair programming challenge)

Homework

• Finish your resume using CSS
• Build the two webpages in the design folder

Session 03

• Homework review
• External stylesheets
• CSS selectors in more detail
• CSS positioning
  • static, relative, absolute, fixed
• Column layouts
  • float/clear
  • line-block

Exercise

• Creating boxes part 2 (pair programming challenge)
• Creating layouts

Homework

• Build the webpage in the design folder

Session 04

• Homework review
• HTML forms and styles
• HTML tables and styles
• Job board code along

Homework

• Continue to work on job board layout

Session 05

• Homework review
• Twitter Bootstrap
• Intro command line and Node.js
• CSS preprocessors

Homework

• Finish job board layout optionally using Bootstrap and/or LESS
• Treks layout optionally using Bootstrap and/or LESS

Note: topics this class will require Node.js to be installed

Session 06

• HTML/CSS Quiz
• Intro to programming
• Word problems
  • Create a program that will add two numbers and display the answer
  • Create a program that will add or subtract two numbers and display the answer
  • Create a program that will get the sum of the numbers between 1 and n and display the answer
• Hello World in JavaScript using node
• JavaScript basics
  • data types
  • expressions
  • operators
  • variables
  • conditionals
  • functions
• Code along to do the first two word problems in JavaScript (execute using node not a browser)

Homework

• Complete the following word problems in JavaScript (execute using node not a browser)
• Write a function that takes two numbers as parameters and logs which one is larger. So if you give it 5 and 10, it will say something like '10 is larger than 5'
• Modify the above function to now tell if you if the numbers are the same as well as which one is larger (if in fact one is larger). So for instance if you give it 5 and 5, it will say 'they are the same', if you give it 3 and 4, it will say '4 is larger than 3'
• Modify the fullName function from class to always display the names with all capital letters even if the parameters are all lowercase (hint: this requires a function built into JavaScript, ask Google and I'm you'll find it)

Session 07

• JavaScript basics cont.

  • functions in more detail
    • return
  • loops
  • arrays
  • objects

• Shopping cart code along

• Word problems

  • Create a program to get the sum of the numbers in an array

Homework

• Exercisess on github

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

Homework

• Take two of the exercises from the last homework and create a UI for them using jQuery. There's no wrong answer for this as long as it works, so be creative! Bonus points for using Bootstrap to make it look good.

• If you want more of a challenge, try to implement the jQuery fadeOut() function on your own without jQuery (hint: you probably want to use a function called setInterval() or setTimeout())

Session 09

• Task manager group project
• One on one meetings with students

Homework

• Finish the task manager project, either with or without objects

Session 10

• Intro to Ajax
  • JSON
• Events in more detail
• Task manager with an API

Session 11

• Creating an API using Node.js

Session 12

• Testing JavaScript
  • Jasmine
  • Selenium
• Advanced JS topics
  • ES6
• Design patterns

Session 13

• Intro to JS MVC frameworks using AngularJS

Session 14

• More advanced HTML/CSS layouts

Session 15

• How to launch a website
• Work on final projects

Session 16

• Mobile websites

Session 17

• Data visualization

Session 18

• Student choice

Session 19

• Work on final projects

Session 20

• Final project presentations