Front End Web Development

Week 1 – jan 23 – Syntactically Awesome Stylesheets

  1. Introductions
  2. Syllabus: GD431_Syllabus
  3. Course Overview
  4. bitca.mp (April 7-9) + Baltimore Hackathon (April 28-30)
  5. All Projects
    1. All sites should be responsive and look good on mobile, tablet, and desktop devices
    2. The site should work on the latest versions of Chrome, Firefox, and Safari (Bonus Points for Internet Explorer)
    3. Use CSS or a CSS precompiler like SCSS, PostCSS, or LESS, but do not use CSS frameworks such as Bootstrap or Foundation.  (I’ll make an exception for something very barebones such as Milligram)
  6. Resources
    1. The Sass Way
    2. CSS Inheritance
    3. CSS reference
    4. Normalize.css
  7. Tools
    1. Install SASS
    2. How to debug in the console review
  8. Homework (due jan 30)
    1. Your First Sass StyleSheet on codeacademy  OR
    2. Assembling Sass Foundation on Code School OR
    3. Journey into Mobile on Code School

Week 2 – jan 30 – Javascript & JQuery Review

  1. Topics
    1. Javascript
      1. Setting and Comparing Variables
      2. Loops
      3. Arrays and Objects
      4. Conditionals
      5. Functions
    2. JQuery
      1. Request-response
      2. Error codes
  2. Readings
    1. Interaction is an enhancement
    2. Progressive enhancement is dead
    3. Progressive enhancement isn’t dead, but it smells funny
  3.  Demo
    1. Using JQuery to request a JSON file (jquery.getJSON())
    2. Debugging javascript in your console
  4. Homework (due Feb 6)
    1. Javascript or JQuery level of your choosing on Code School
    2. Set up an account that allows you to host your work online
      1. Namecheap for education (includes free .me domain)
      2. Kickassd (free web hosting for students)
      3. Github Education pack
      4. Github Pages
      5. Hawkhost ($2.24/month)

Week 3 – feb 6 – Javascript Object Notation (JSON)

  1. Topics
    1.  JSON
    2. Embedded expressions
    3. Templating
  2. Resources
    1. Javascript Objects
    2. Javascript Object Notation (JSON) 
    3. MDN JSON object
    4. JSON Formatter
    5. JSON Validator
    6. JSON Data Set Sample
  3. Demo
    1. How to display a JSON object using an embedded expression
    2. How to use Handlebars.js
  4. Project (due Feb 20)
    1. Create a single-page site that displays data from a provided JSON file
    2. Follow these rules:
      1. Perform a client-side request to retrieve provided JSON file
      2. Use only Javascript, jQuery, (or Moment.js and a templating library such as Handlebars.js if you’re feeling ambitious)
    3. Be sure the site is hosted online so you can link others to it
    4. Everything else is up to you to interpret and display the data as you wish.

Week 4 – feb 13 – Public Data

  1. Topics
    1. Freedom of Information Act (FOIA) requests
    2. Open Data
    3. Bias, Manipulation/Misrepresentation, and Ethics
    4. Funding data collection
  2. Additional Readings
    1. How Helsinki Became the Most Successful Open-Data City in the World
    2. The Internet Archive is Building a Canadian Copy
    3. How private contractors are taking over data in the public domain
    4. Does Your State Provide Good Data on Your Schools?
    5. How Facebook’s Newsfeed Algorithm Works
    6. FBI no longer to accept emailed FOIA requests
    7. The US Needs Real Data to Confront Bias in Police Shootings
    8. FBI Says It Has 487 Pages Of James Comey Talking Points, Refuses To Release Any Of Them
    9. COINTELPRO
    10. Hillary Clinton Gives U.F.O. Buffs Hope She Will Open the X-Files
    11. CIA Frequently Requested Records
    12. 50th Anniversary of the Freedom of Information Act
    13. Tracking U.S. government data removed from the Internet during the Trump administration
    14. Target Algorithm Guessing Pregnancies
    15. Aisles Have Eyes
    16. Mobile Phone App Spyware
    17. Your Vizio was Probably Spying on You, Says FTC
  1. In-class coding time
  2. Project
    1. Finish your single-page JSON sites (due Monday, Feb 20)

Week 5 – feb 20 – President’s Day – Data (Part 1)

  1. Single-Page JSON Site Critiques
  2. Topics
    1. Data Design & UX
    2. Data Visualization
  3. Readings
    1. The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations
    2. Envisioning Information
    3. The Best & Worst Data Stories of 2016
    4. Providing Reasoning and Methodology behind visualizations
    5. Climate Data
      1. Help Scientists Back Up Government Climate Data
      2. Scientists Frantically Copying Climate Data
      3. Canadian Scientists Warn U.S. Colleagues: Act Now to Protect Science under Trump
  4. Resources
    1. bl.locks.org
    2. d3.js
    3. Aligned Left d3 tutorial
    4. chart.js
    5. leaflet.js
    6. three.js
    7. dygraphs
    8. rawgraphs
    9. CartoDB
    10. …and many more
    11. Rune Madsen’s Programming Design Systems
    12. NYTimes Graphics
    13. 2016: The Year in Visual Stories and Graphics
    14. Mapping Police Violence (and team)
    15. Data&Society
    16. Data Stories
    17. The Sun Foundation
    18. How Data and Design Can Work Together
    19. Visualization Types
    20. The 100 Best Infographics
    21. 9 Infographic Designs that Will Leave You Inspired
  5.  Project (due march 20)
    1. Choose a dataset:
      1. ()pen Baltimore
      2. The Planetary Data System
      3. Department of Labor Women’s Bureau Data
      4. US Government Open Data
      5. NYC Open Data
      6. NASA Open Data
      7. NOAA Open Data
      8. USGS Science Data Catalog
      9. Housing and Urban Development
      10. FOIA Data
      11. White House Open Data (archived)
      12. …and many more
    2. Export as .json (or tab-separated values .tsv / comma-separated values .csv if necessary) (Note: To look at the data so you can design from it, you can import a CSV into excel/numbers and create rough visualizations as a reference)
    3. Design a 1-page Data Visualization/Infographic Site
      1. One visualization/infographic based upon the dataset of your choosing
      2. Compelling title and ~250 words narrating the data (do not need to be contiguous: think labels/legend/captions/tooltips/button text/explanatory welcome message).
      3. Separate, linked page with 250-500 word methodology behind infographic (see example)
      4. What is timely?  Provocative?  Controversial? What do others need enlightening on in 2017?
      5. Bonus: Interactivity

Week 6 – feb 27 – Brigitte in India

  1. Sal Hernandez teaching
  2. Topics
    1. Processing Data
    2. Greater complexity in structuring JSON
  3. 1-on-1
  4.  Homework
    1. Client-side or server-side Javascript framework track on Code School
    2. Continue working on Infographic site design (due March 20)

Week 7 – march 6 – Brigitte in India

  1. Sal Hernandez teaching
  2. Topics
    1. React.js
    2. Interactive filtering demo
  3.  Homework
    1. Client-side or server-side Javascript framework track on Code School
    2. Continue working on Infographic site design (due March 20)

Week 8 – march 13 – Spring Break – Enjoy your time off!

Week 9 – march 20 – Data (Part 2)

  1. Critique Infographic Site Designs
  2. Topics
    1. Structuring data for an infographic
    2. Coding an infographic
  3. Project (due April 3)
    1. Begin building 1-page infographic site from the design

Week 10 – march 27 – Data (Part 3)

  1. Topics
    1. More tips and tricks on working with data
    2. Local storage and other optimizations
  2. In-class coding time
  3. Project (due April 3)
    1. Continue working on building Infographic site

Week 11 – april 3 – Application Program Interfaces (APIs)

  1. Infographic site 1-0n-1 code reviews
  2.  Topics
    1. Requests and responses
    2. Objects
    3. RESTful API
  3. Readings
    1. RESTful API
    2. HTTP response status codes
  4. Resources
    1. json:api
    2. Building the Front-end for the JSON REST API-Powered Single-Page Web App
    3. Use a Google Spreadsheet as your JSON Backend
    4. Server-side React
    5. REST API Tutorial
  5. Project (due May 1)
    1. Research and choose a recommended API or one that interests you
      1. Read its documentation thoroughly to make an informed decision
      2. Look at examples of other successful uses of the API such as YouTubeInstant (warning the videos autoplay) built by Standford student Feross Aboukhadijeh
    2. Brainstorm and outline an approach for using the API.  Be able to answer what you’d like to build with it and how you plan to tackle the work by next week.  (We will do one-on-one approach discussions April 10)
    3. Design and build a single-page app using data requested from your chosen API using Javascript/Jquery and/or any libraries and frameworks of your choosing.

Recommended APIs: Pokéapi, OpenWeatherMap, Commerce.js, Dropbox, Google Maps, Twitter, YouTube, SoundCloud, Stripe, Instagram, Slack, Yelp, Twilio, Facebook, Pinterest,

Week 12 – april 10 – APIs (continued)

  1. One-on-one discussions about API project approaches
  2. In-class design time for API project (due March 20)

Week 13 – april 17 – APIs (continued)

  1. Small-group feedback
  2. In-class coding time for API project (due March 20)

Week 14 – april 24 – APIs (continued)

  1. One-on-one feedback
  2. In-class coding time for API project (due March 20)

Week 15 – may 1 – Final Class

  1. Final API project critiques
  2. One-on-one code reviews