Requirements for Web Programming
On-campus and Online
Prerequisites
Students are expected to have basic knowledge and/or familiarity with:
- Create and upload HTML Web pages that are standards compliant and contain relative and absolute links, tables, images and embedded video or data widgets.
- Design external Cascading Style Sheets that control the layout and visual appearance of a set of Web pages.
- Understand Basic Programming Concepts (variables, arrays, loops and simple functions)
- Understand the Basics of JavaScript to create simple or customize existing code examples.
Textbooks
Optional: MEAN Web Development (2nd Edition) by Amos Q. Haviv - Order
LyndaCampus
- This course makes extensive use of relevant Lynda.com videos, which SC&I students can access for free.
- Login to LyndaCampus (when you first log into lynda, you are given the opportunity to personalize your profile).
- Remember: you must log into LyndaCampus - https://lynda.comminfo.rutgers.edu/Login - to be able to access the lynda.com videos and the login link is also included toward the top of the Lectures page of this course..
- For more information and access instructions, please see http://lynda.comminfo.rutgers.edu. For any difficulties accessing the content of lynda.com please contact SC&I IT Services at help@comminfo.rutgers.edu.
- Prerequisites
- HTML Essential Training
- HTML5: Structure, Syntax, and Semantics
- CSS Fundamentals
- CSS: Page Layouts
- JavaScript Essential Training
- Tools: Code Editor and Version Control
- Becoming a Web Developer: Full Stack vs Front End
- Workflow Tools for Web Development
- Learn Atom: The Basics
- Up and Running with Git and GitHub
- JavaScript
- JavaScript Essential Training
- Computer Science Principles Lab: JavaScript
- Up and Running with ECMAScript 6
- JavaScript for Web Designers
- Debugging the Web: JavaScript
- JavaScript and JSON
- Front-End Frameworks
- Bootstrap 3 Essential Training
- Bootstrap 4: First Look
- Learn React.js: The Basics
- Building a Web Interface with React.js
- Learn AngularJS 2: The Basics
- Angular 2 Essential Training
- Back-End Frameworks
- MEAN Stack and Databases
Software
- File Transfer Protocol (FTP) - you only need to download one:
- Filezilla (Windows / Mac): http://filezilla-project.org/
- WinSCP (Windows): http://winscp.net/eng/download.php
- Fugu (Mac): http://rsug.itd.umich.edu/software/fugu/download.html
- CyberDuck (Mac): http://cyberduck.ch/
- Code Editor for HTML, CSS, JavaScript coding
- Atom (Windows / Mac): https://atom.io/
- Documentation
- Videos: Learn Atom: The Basics
- Downloading and installing Atom (6:02)
- Sublime Text (Windows / Mac): https://www.sublimetext.com/
- NotePad++ (Windows): http://sourceforge.net/projects/notepad-plus/ (if the Download on SoundForge is empty then use this download link)
- TextWrangler (Mac): http://www.barebones.com/products/textwrangler/
- CSS
- Reset CSS
- HTML5 Reset CSS
- Normalize CSS
- Pre-Processors: CSS preprocessors on the other hand, are not restricted by the syntax rules of CSS. They extend the language with features such as variables, nesting, mixins and more, which can help make writing CSS less redundant, easier to maintain and scalable.
- Less: http://lesscss.org/ (runs on Node.js)
- Stylus: http://stylus-lang.com/ (runs on Node.js)
- Sass / SCSS: http://sass-lang.com/ (runs on Ruby)
- Minifier:
- Prepros: https://prepros.io/
- Browser Tools and Plugins
- Chrome
- More Tools > Developer Tools
- Inspect HTML elements and CSS
- JavaScript Console
- Pluglins
- whatfont
- Awesome Screenshot
- Workflow Tools
- Comand Line Interfaces
- Tutorials: Intro | Primer for Beginners
- Task Runners: Google Trends
- Gulp.js: http://gulpjs.com/ | Get Started
- Grunt.js: http://gruntjs.com/ | Getting Started
- Best Node.js Build Systems and Task Runners
- Code Version Control and Code Repository Hosting Service
- Git: https://git-scm.com/
- GitHub: https://github.com/ | Join | Student Developer Pack
- Videos: Up and Running with Git and GitHub
- Installing Git on a Mac (3:44)
- Installing Git on Windows (5:37)
- Configuring Git (7:29)
- Using Git help (2:17)
- Setting up a GitHub account (5:39)
- Adding a remote repository (4:00)
- Compilers
- Babel: https://babeljs.io/ | Set Up
- Bundlers
- WebPack: https://webpack.github.io/ |
- Browserify: http://browserify.org/ | Install (requires Node)
- Tool for compiling node-flavored commonjs modules for the browser.
- Front-End Frameworks: Google Trends
- Bootstrap.js: http://getbootstrap.com/
- Download | Getting Started| Examples | Bootstrap's plug-in library requires jQuery
- Tutorials: W3Schools
- Videos: Bootstrap 3 Essential Training
- Introduction and installation options (5:53)
- Creating a basic template using CDNs (7:32)
- Downloading and installing manually (5:51)
- React.js: https://facebook.github.io/react/
- Install | Get Started | Tutorial
- Tutorials:
- Videos: Learn React.js: The Basics
- Angular.js:
- Download | Documentation |
- Tutorials: W3Schools
- Videos:
- Back-End Frameworks: Google Trends
- Node.js:
- Download | Documentation | Tutorials
- Express.js:
- Download | Documentation | Tutorials
- Videos: Building a Website with Node.js and Express.js
- Databases
- MongoDB
- Download | Documentation | Tutorials
Grading
You will be able to resubmit the individual exercises to improve your score based on the provided feedback. Because of this, the shown grading scale is used.
| 95 - 100 | A |
| 90 - 95 | B+ |
| 85 - 90 | B |
| 80 - 85 | C+ |
| 75 - 80 | C |
Discussions & Quizzes (15% of Course Grade)
There will be class discussions conducted online and several quizzes:
-
Discussions (7.5% of Course Grade)
Discussions will be conducted online, using Sakai, because the online format leads to everybody contributing and better comprehension of the content. -
Quizzes (7.5% of Course Grade)
There will be six quizzes that are related to content to be learned to create the exercises and project.
The quizzes will be "open book" and due on Sunday and one week before the due date of the related exercise or project.
The five quizzes with highest scores will contribute to the quiz grade and each quiz will have a bonus question.
Quizzes will be accessible via the Sakai course site.
Individual Exercises (65% of Course Grade)
There will be five individual exercises that can be resubmitted based on the received feedback:
- Exercise 1: HTML, CSS and JavaScript Basics – Style Web Page using CSS and Add Interactivity using JavaScript (7.5%)
- Exercise 2: JavaScript Essentials – Control Appearance and Interactivity of Web Page using JavaScript (12.5%)
- Exercise 3: Responsive Design using JavaScript Front-End Framework – Create Responsive Web Page using Bootstrap.js(15%)
- Exercise 4: Design of Modular, Reusable User Interface Components using JavaScript Front-End Framework – Create Web Page Components using React.js (15%)
- Exercise 5: Design Single Page Application using Back-End Framework to Exchange Data – Create Single Page Application using JSON, Angular.js, Node.js and Express.js (15%)