Course Schedule

Intro to Web Development DM-UY 2193/B

Fall 2016

NYU

Integrated Digital Media • Technology, Culture & Society Department

Jason Sigal [email protected]

Fall 2016 • Mondays & Wednesdays • 2:30-4:20PM • Magnet Rm 813 • 3 credit hrs

Office hours by appointment or directly before class

All dates and assignments are subject to change at the discretion of the professor! This page and Slack are the official sources for all dates and assignments.

Mon 9/5 (No Class)

Wed Sept 7th

In Class:

  • Introductions
    • your name
    • something you did over the summer
    • why are you interested in the web? What are your goals for the class?
  • Course Intro / Overview [Slides]
  • Discussion: What makes for good web design? We looked at craigslist.org and slack.com.
  • Discuss Syllabus
  • Discuss HW

HW:

  • Read: Jon Duckett - HTML/CSS:

    • Chapter 1 Structure
    • Chapter 2 Text
    • Chapters 3, 4 and 5 will be assigned Monday, so feel free to get a jump start...

  • Download a text editor of your choice:

  • Sign up for Slack here (using your @nyu.edu account) and post your first Ticket To Leave in the General channel. Also join the Homework channel.

Mon 9/12

In Class:

  • Discuss Reading

  • Text Editors

  • Intro to HTML

    • HTML - creates structure for the web, describes the structure of a page
    • Structure: hierarchy, what’s important, meaning, how should it be interpreted by a person (or a computer)
    • Elements - describe the structure of a page
      • Element Tags - Elements typically have opening and closing tags, and you can put content in between the tags. <tag>content goes here</tag>
    • Attributes
      • Provide additional information about the element.
      • Syntax: attribute="value"
    • All HTML pages have the following elements: html, head, title, and body.
      • Text
      • Links
      • Images: <img src="path" alt="description of image" title="hover over me">
      • <!--comment: images have no closing tag -->
      • Lists

  • FTP

    • How to set up your Domain, Hosting
    • (S)FTP - transfer files to your server

  • Review HW

HW:

  • Create a "Hello World" web page with:

    • Your name
    • An image
    • A list
    • A link
    • Upload the entire folder as a .zip file to the #homework channel

  • Read: Jon Duckett - HTML/CSS:

    • Chapters 3 (Lists), 4 (Links) & 5 (Images)
  • Set up server space & FTP (Due next Monday)
    • Download an FTP Client like Cyberduck (recommended) or Filezilla.
    • Get Server Space:
      • Option 1: NYU provides free server space. Email Elton [email protected] to set up an appointment and mention a few times you are available to meet with him in Magnet 883. IDM’s FTP server info: http://sites.bxmc.poly.edu (Use active mode)
      • Option 2: Purchase your own domain name + server space through Dreamhost (instructions). Other options include Siteground (instructions).

Wed 9/14

In Class:

  • Review Lists, Links and Images
    • Formatting images for the web
    • Relative / Absolute Paths
  • Intro to GitHub + GitHub Pages
    • Download GitHub desktop application
    • Git - Version Control
    • Key vocab from the GitHub Glossary:
      • repository - Project folder.
      • commit - A revision to a file or set of files. Add files before committing them.
      • fork - A personal copy of another user's repository that lives on your account
      • clone - A copy of a repository that lives on your computer instead of on a website's server.
      • merge - Combine changes. Git can merge changes automatically.
      • push - Send your committed changes to a remote repository
      • pull - Fetch changes and merge them
      • pull request - A request to merge (pull) changes
      • remote - A version of a repository that is hosted somewhere else, for example on GitHub's server.
    • GitHub - a website to host "git repositories"
    • GitHub Pages - an easy way to host a static web page through GitHub

In class exercise:

  • Fork my repo to your github account
  • Clone it to your computer
  • Edit the index.html to add a link to your GitHub account
  • Commit your changes
  • Push your committed changes to your fork
  • Submit a pull request from your fork to the original repo. I will merge in the changes.

HW:

  • Choose Your Own Adventure:
    • Create a multi-page website using what we learned about relative paths
    • Upload via GitHub Pages and share a link with the class
  • Read "Elements of User Experience" Chapter 2
  • Read Jon Duckett - HTML/CSS:
    • Ch. 10: Introducing CSS
  • Attend the Friday session to set up server space through NYU (more info)

Mon 9/19

In Class:

  • Present Choose Your Own Adventures
  • Discuss Elements of User Experience (Slides)
  • Intro to CSS (Slides)
  • Review GitHub: Fork my project, add your name + github profile link

HW:

Wed 9/21

In Class:

  • Grids in Graphic Design & "Grid Systems"

  • CSS Positioning

  • Intro to Wireframes

  • "Mobile First"

  • Review Midterm Project Plan assignment

HW:

  • Read Design School for Developers: Sketching and Wireframes
  • Read Learn Layout
  • Finish HW from last class (add a .css file to your multi-page site, update your github, and share a link in the #homework channel). Feel free to experiment with some of the CSS positioning covered in today's class.
  • Start work on your Midterm Project Plan. Be prepared to talk about your ideas in front of the class on Monday. In particular, be prepared to discuss the Project Goal, Target Audience, and Competitive Analysis.
  • Draft a wireframe of a specific page of your site, using a tool of your choice. Suggestions can be found on the Readings & Resources page. Use a grid. Share a link/image in Slack in the #homework channel with YourName_-_FirstWireframe as the filename.

Mon 9/26

In Class:

  • Review Project Plans & Wireframes
  • Review CSS Positioning
  • More on Grid Systems
  • In-class CSS Positioning exercise

HW:

  • Read Jon Ducket - HTML/CSS:
    • Chapter 11: Color
    • Chapter 12: Text
  • Read Typeography for User Interfaces
  • Keep working on the CSS positioning exercise from class (raw html and instructions are in the #general channel on Slack).

Wed 9/28

In Class:

  • Continue midterm Project Plan & Wireframe presentations
  • Review CSS positioning exercise
  • Style Guides
  • Slides

HW:

  • Read Importance of Color, Fonts and Icons
  • Read Brad Frost - Atomic Design
  • Do a Learning Log about Style Guides (aka Design Systems / Pattern Libraries). Find an interesting article and/or example and analyze it for the class. Many examples here.
  • Create a Style Guide for your project (to present Wednesday). Style Guide should be HTML & CSS. See the slides above for inspiration.

Mon 10/3

In Class:

  • FTP
  • Review CSS Hierarchy & Organization: BEM
  • CSS: Color
  • CSS: Font/typography

HW:

  • Prepare midterm project proposals with updates (style guide, revised wireframes, actual content). Submit a PDF to Slack homework channel titled YourName-_ProjectPlan-_Oct_5.pdf

Wed 10/5

In Class:

  • Present Your Style Guides
  • Mobile First & Responsive Web Design
  • Media Queries (Mobile)
  • In-class exercise: media queries navbar
  • Do a Learning Log about Media Queries, Responsive Web and/or Mobile First.
  • Make progress on your Midterm Project.

HW:

  • Create a skeleton page (i.e. a template with HTML/CSS + actual content) for one page of your site. Make it responsive so that the layout responds to different screen sizes. Focus on the layout—you can add style later. Incorporate Media Queries discussed in today's class.

Mon 10/10 (No Class)

Wed 10/12

In Class:

  • Present responsive skeleton pages
  • CSS3: Flexbox
  • Intro to CSS3 Transitions, Animations, Transforms and Filters

HW:

Mon 10/17

In Class:

HW: Work on Midterm

Wed 10/19

In Class:

HW:

  • Work on Midterm (due Monday at noon)

Mon 10/24

Midterm Presentations

Wed 10/26

Midterm Presentations

HW:

  • Read Jon Duckett - Javascript:
    • Chapter 1 (ABC of Programming)
    • Chapter 2 (Basic JavaScript Instructions)
  • Do Midterm Self-Evaluation & Self-Reflection (due Friday at Noon)
  • Catch up on your Learning Logs. As a reminder you should have ten (10) by the end of the semester.

Mon 10/31

In Class:

  • Intro to JavaScript
  • Syntax
  • Variables
  • Booleans
  • Debugging (Console)
  • Slides

HW:

  • Read Intro to Developer Tools: Console
  • Read Jon Duckett - Javascript
    • Ch 3: Functions, Methods & Objects
    • Ch 4: Decisions & Loops

Wed 11/2

In Class:

  • Learning Log Presentations
  • JavaScript Loops, Arrays, Objects
  • HTML Canvas element
  • Intro to p5.js library & in-class example
  • Slides

HW:

  • Make an animated drawing with the p5.js library
  • Read Jon Duckett - Javascript:
    • Ch 5: Document Object Model (DOM)
    • Ch 6: Events

Mon 11/7

In Class:

  • Learning Log Presentations: Katherine & Farzan
  • PSA: Back Up Your Stuff
  • JavaScript DOM, Functions & Events
  • Slides

HW:

Wed 11/9

In Class:

  • Learning Log Presentations: Swati & Leo
  • jQuery

HW:

  • read How jQuery Works
  • Make something fun with the jQuery library that includes an event listener, and DOM manipulation.

Mon 11/14

Wed 11/16

HW:

  • Prepare initial Project Plan to present on Monday.

Mon 11/21

  • Final Project Proposals

Wed 11/23

No Class (Thanksgiving Break)

Mon 11/28

  • Learning Log Presentations: Drona & Akash K
  • Intro to SCSS

HW:

  • Read about jQuery AJAX
  • Review Jon Ducket - HTML/CSS: Chapter 7, "Forms"
  • Read Jon Ducket - Javascript: Chapter 8, "Ajax & JSON" & Chapter 9 "API's"

Wed 11/30

  • Learning Log Presentations: Nico (& Sierra)
  • Forms, JSON & API's
  • HW:
    • Prepare for user testing on Monday. Upload a PDF/file to Slack with:
      • Website Name
      • Wireframes
      • URL to a "Click-through" work-in-progress of your website ready for user feedback
    • Finish API example from class: update the DOM with jQuery as users query the Open Weather API.

Mon 12/5

  • Learning Log Presentations: Sierra, Jason & Derrick
  • User Test Click-Throughs

Wed 12/7

  • Learning Log Presentations: Tamar & Rashid
  • Animation w/ JS libraries - notes
  • Questions / work on final projects

Mon 12/12

Final Presentations

Tue 12/13 (Make Up Class)

Final Presentations

Wed 12/14

Final Presentations

results matching ""

    No results matching ""