Introduction to Web Programming

In this class, you will learn how to create web site using HTML, CSS and JavaScript.

Schedule

Meeting Time: Sunday 10:40 am

Weekly Plan (subject to change without notice)

WeekTopicAssignment/Project/Quiz
Week 1Intro to HTML/CSS: Making Webpages: Intro to HTML. Assignment 1
Week 2Intro to HTML/CSS: Making Webpages: Intro to CSSQuiz 1 Assignment 2
Week 3Intro to HTML/CSS: Making Webpages: HTML: Link, Table and Comments.Quiz 2, Assignment 3
Week 4Intro to HTML/CSS: Making Webpages: CSS: Text PropertiesRecipe Book Project Demo, Assignment 4
Week 5Intro to HTML/CSS: Making Webpages: Web development tools: Chrome, Editor, Debugger etc.Blog project demo, Assignment 5
Week 6Intro to HTML/CSS: Making Webpages: CSS: Layout Assignment 6
Week 7Intro to HTML/CSS: Making Webpages: CSS: Layout (2) Quiz, Paper Prototyping Presentation, Assignment 7
Week 8Intro to HTML/CSS: Making Webpages: CSS: More selectors and other ways to embed CSSEvent invite project demo. Assignment 8
Week 9 (Nov 12)Intro to JS: Drawing and Animation: Drawing BasicsDemos Assignment 9
Week 10 (Nov 19)Intro to JS: Drawing and Animation: ColoringAssignment 10
Week 11 (Dec 3)Intro to JS: Drawing and Animation: VariablesAssignment 11
Week 12 (Dec 10)Intro to JS: Drawing and Animation: Animation Basics
Winter Break
Week 1 (Jan 14)Intro to JS: Drawing and Animation: Interactive Programs and Resize with variablesReview. Finish the challenges and project in these two sessions
Week 2 (Jan 21)Intro to JS: Drawing and Animation: Text and StringsHomework Week 2
Week 3 (Jan 28)Intro to JS: Drawing and Animation: FunctionsHomework Week 3
Week 4 (Feb 4)Intro to JS: Drawing and Animation: IFHomework Week 4
Week 5 (Feb 11)Intro to JS: Drawing and Animation: LoopHomework Week 5
Week 6 (Feb 25)Intro to JS: Drawing and Animation: ArrayHomework Week 6
Week 7 (Mar 11)Intro to JS: Drawing and Animation: ObjectsBookshelf Project
Week 8 (Mar 18)Intro to JS: Drawing and Animation: Object-Oriented Design
Week 9 (Mar 25)Intro to JS: Drawing and Animation Review. Slides
No class (April 1)No class. Spring Break
Week 10 (April 8)Intro to JS: Drawing and Animation Quiz. 24 card game Quiz
Week 11 (April 15)Advanced JS: Games and Visualizations Scene management, Buttons
Week 12 (April 22)Advanced JS: Games and Visualizations Transformation
Week 13 (April 29)Advanced JS: Games and Visualizations 2048 Game
Week 14 (May 6)Advanced JS: Games and Visualizations Side Scroller
Week 15 (May 13)Advanced JS: Games and VisualizationsMemory Game
Week 16 (May 20)Advanced JS: Games and Visualizations2048 Gamee
Week 17 (Jun 3)Advanced JS: Games and Visualizations2048 Game
Week 18 (Jun 10)Advanced JS: Games and VisualizationsTBD

Format of the class

  1. Project Demo and/or Quiz
  2. Lecture
  3. Work on Project
  4. Finishing assignment at home if not finished in class

How to log into Khan Academy Class Room

Resource

The following resource will be very helpful for you to learn Web Programming.

Online Classes and References

Tools and References

Online Editor

Desktop Editor

Debugging

Quick Reference and Books

Beautiful Web Projects

Students' Project