Web Fundamentals

Course Description

This class is designed for people who think code, math, and computers in general are intimidating. Through a series of playful challenges, you will learn how computers, code, and the Web actually work. Along the way, you will pick up valuable skills and knowledge that will allow you to do more complex interactive projects in the future. It’s strongly recommended that this class be taken along with the appropriate News, Narrative & Design class.

Learning Outcomes

By the successful completion of this course, students will be able to:

• Build and style websites using HTML and CSS
• Use JavaScript to create interactive webbased experiences
• Independently learn frontend libraries like jQuery and Bootstrap
• Understand and explain of how the World Wide Web works
• Be comfortable reading and dissecting someone else’s code

Course Requirements/Graded Activities

Students must complete all inclass and homework assignments. Assignments should be posted on their GitHub profile for grading. In addition to weekly assignments, students will be responsible for completing supplemental readings. Midterm and final projects make up a large portion of grading and are to be completed on-time for in-class demos.

Midterm Assignment

Students will build and host a mock newspaper website on GitHub Pages. They must use HTML and CSS to structure and style a homepage, section and article for the newspaper. Students will be graded based on completion of the requirements, creativity, hierarchy of information and design. The website must include:

• Homepage (index.html)
  • Title of newspaper
  • Navigation bar with sections (e.g. NY, politics, opinion, tech…)
  • One link must lead to the section you build, the others can be dummy links
  • List of articles
• Section (e.g. politics.html)
  • Title of newspaper
  • Title of section
  • Related articles
  • One article must link to the article you build, the others can be dummy articles
• Article (article.html)
  • Headline
  • Byline
  • Date published
  • Body text
  • Image

Final Assignment

Students will reimagine a feature article–to be hosted on their Github Pages website, which will be built and maintained throughout the duration of the course. Students will not be expected to report a new feature article, but to bring to life a previously published piece. They are expected to treat this article as if it were to be published online in a publication such as the New York Times, New Yorker, NPR, The Guardian, etc. The feature should contain:

• A captivating introduction (hero image, video, etc). Examples:
  • NYTimes: Rural voters can swing the iowa caucuses
  • NPR: Life after death
  • NYTimes: A Gift for New York, in Time for the Pope
  • NSFP: Lonely, lazy, stoned & broke
• Written body
• At least two images
• Pull quotes (blockquotes)
• An interactive component: map, audio, video, form inputs, or chart

Technology Requirements

• Should include an index.html file, a style.css file, and app.js file
• Should incorporate a grid system (Bootstrap, materialize) to make site mobile-responsive
• Should use at least one jQuery component
• Should be hosted github pages account