CPSC S115: Introduction to Full-Stack Web Development

Prework & Module A

Programming Fundamentals Ruby Basics and Object Oriented - Programming Syllabus

Unit Learning Objectives Reference Topics Competency Based Hours Assignments Pre- Work

1 • Understand the value and uses of • Git • Quiz: Git Basics 15 version control with Git • commit • Git Todo • Complete the full Git project flow • push • Git Flow • Work with the computer through • pull • Git Merge the command line and BASH • remotes Conflicts • add • Command Line Mystery • fork • merge • BASH • intro • ls • cd • pipes

2 • Create basic web sites using • Basic HTML • HTML Album 15 HTML • Lists Cover • Publish sites to different web • Tables • HTML Blog hosts • Images • HTML Issue Bot • Understand the distinction 9000 • Links between styling and content • HTML Map • Validatio ns Contact Forms • Site Publishing Code Along • Publishi ng • HTML5 Video to FTP Codealong • Publishi ng • HTML5 to Github Semantic Pages Elements Codealong • HTML5 • Forms • Media

• Video • Semantic Elements

3 • Understand how to use CSS to • CSS Selectors • CSS Kitten 5 style HTML elements • Class Wheelbarrow • Lay block objects out using the • Id • CSS Graffiti box model Override • Element • Create interfaces for mobile and type • CSS Issue Bot web 9000 • Page Layout • Use the Bootstrap framework to • Box model • Creating increase speed of development • Overflow Columns Codealong • Fluid Height • CSS Layout Quiz • Float • ZHW Shoes • Centering Layout • Box Styles Codealong • Adding Responsive Features Codealong • Bootstrap Carousel Codealong

4 • Create basic decision trees • Conditionals • More Vowels 20 • Receive input from the • if Command Line • Badges and • switch/c ase Schedules • Manipulate strings • Looping • Deli Counter • Work with Basic Looping • while • Phone Number • for Formatter • do...whil e • Cartoon • Command Line Input Collections • gets • Jukebox CLI • Manipulating strings • reverse • upcase • interpola tion • gsub

5 • Why and when to use arrays • Adding • My Each 20 • Work effectively with adding and • Push removing from arrays ○ << • Oxford Comma • Removing • Apples and • pop

• Acting on arrays with • shift Holidays iteration and introspection • Introspection • Song Sorter • Retrieve, add and delete • flatten arrays nested inside other Tweet • uniq • arrays Shortener • include ● • indexed access • Iteration • Key for min • each value • map • Spotify API Lab • select • detect • Nested Data • 2D arrays • multi-di mension al arrays

6 • Why and When to use Hashes • Adding • Hashketball 25 • Adding, removing and ○ []= introspecting hashes method • NYC Pigeon Organizer • Manipulating and • Removing and • Apples and normalizing data into nested introspection Holidays hashes • select • map • detect • Nested Data Module A

7 • Understand why Object • History of OO • Class and 20 Orientation was created • OO Patterns Instances Lab • Understand the benefits of • Separation of • Instance Object Oriented Programming Concerns Methods Lab • Differentiate between • Managing • Instance Instances and Classes Internal State Variables Lab • Implement Methods and • Classes vs. Instances • Object Properties in Classes Attributes Lab • Classes have behaviors • OO Meowing Cat • Methods • Classes have attributes

• Instance Variable s • attr_aces sor • setters • getters

8 • Understand the Object • Creating an init method • Object Initialize 15 Lifecycle • setting Instance Lab • Create an initializer Variables in init • OO Basics • Other Defaults

9 • Work with the concept of self • Class Constants • OO Basics w/ 20 • Understand Class level • Creation Class Constants constructs • Why do we use • OO School them? Domain • Self • OO Counting Sentences • Class Variables • Class Variables • Why use them? and Methods • Using as a Lab collection of all • Ruby Puppy created instance s • Advanced Class Methods Lab • Class Methods • understanding the all method • Creating class methods • Private Methods • OO Program ming as interface based program mining • How to define

access levels

10 • Be able to model a domain • Domain Modeling • OO Email 10 with OO principles • Deciding on Parser • Work with larger projects and properties • Anagram chunk them into smaller • Deciding on detector segments methods • OO Cash Register • What should be public vs. private

11 • Understand the power of • Why Relationships are • Belongs to 25 relating objects important Object Lab • Use a belongs to relationship • Belongs To • Has Many • Use a has many relationship • Adding to all Objects Lab • Collaborate between two class variable • Collaborating objects • Domain modelin Objects Lab • Use a has many through g a belongs to • OO My Pets relationship • Has Many • OO Kickstarter • Reciproc al • OO Banking relations hips • Has Many • Domain Objects modeling a Through Lab belongs to • Adding to class variables in both direction s • Collaborating Objects • Relation

ships that aren’t ownership • When to separate behavior s/attributes into new classes • Has Many Through • Domain Modeling Has Many Through • Has Many Through just two different has many relations hips

12 • Understand the value of mass • Mass Assignment • Mass 20 assignment • Problem with Assignment • Use simple meta manual assignm LAb programming ent • Custom Erorrs • Passing in an • OO Triangle options hash • Meta programming • Using the send method • Using send to implement mass assignment

13 • Grab data from websites using • Gems and Bundler • Scraping 5 Scraping • Where to find Flatiron • Integrate third party code gems • Scraping using gems • Open Source Kickstarter • Gem version control with Licensing Bundler • How to choose gems • Installing and requiring gems • Using a Gemfile • Scraping • Nokogiri • Using CSS Selectors

14 • Working in large ruby • Domain Modeling • Playlister CLI 5 projects • Task Breakdown practice • Student • Understand how to break Scraper large problems down into • Tic Tac Toe smaller, workable chunk with AI • CLI Data Gem Assessment

Module B

Web Frameworks: Web Development with Rails Syllabus

Unit Learning Objectives Reference Topics Competency Based Hours Assignments

1 • Understand the uses of • SQL Introduction • Bear Organizer 5 SQL • Installing SQLite • Aggregate • Understand the layout of • SQL Basics Functions Lab basic databases • SELECT • Install and run basic commands with SQLite • INSERT • Use Aggregate functions • UPDATE • CREATE • ALTER • Using .sql files • SQLite data types • Aggregate Functions • SUM • COUNT • MAX • MIN

2 • Understand what a JOIN is • Relational Databases • SQL 10 • Understand foreign keys in • History Crowdfunding Lab has many/belongs to • Relations as related relationships to ruby object • SQL Library Lab • Understand Complex joins relations and Join tables • JOIN Statements • foreign keys • Left Outer Join • Left Inner Join • Sorting and Grouping Data • ORDER BY • GROUP BY • Complex Joins • Many-to-Man y

relationships • Join tables • Understand how ruby can • SQLite gem • Pokemon 10 talk to SQLite Databases • Execute Scraper • create table • results 4 • Understand the value and • Mapping Objects to tables • Mapping to 10 power of ORMs • Working with string Table Lab • build a simple ORM interpolating INSERT • Mapping DB to • Work with the inheritance • CREATE Table from Ruby Lab and meta-programming attributes • ORM update Lab required for ORMs • Mapping Tables to Objects • ORM Bringing it • Dynamically create all together attributes • Dynamic ORM • all method Lab • find methods • Bi-Directional mapping • UPDATE • save checking for persistence • Dynamic ORMs • meta programmin g attributes • Refactoring common behavior to super • Use ActiveRecord as an • ORM To Active Record • Translating ORM 15 ORM • Translate previous to AR • Understand all the features custom ORM • ActiveRecord ActiveRecord provides methods into Create, Read, • Use tasks to perform ActiveRecord method Update, Delete database migrations • Use ActiveRecord • Rake Lab ::Base • Writing Migrations • ActiveRecord Costume Store • Activerecord

• Rake TV-show • Create custom rake tasks • Explain Rakefile • Migrations • Explain value of migrations • Write change migrations • Run migrations without rake • Run migrations with rake

6 • Understand associations • ActiveRecord Macros • Activerecord- TVland 5 in ActiveRecord • has many • Map ActiveRecord • belongs to association to previous associations in ruby • has many :through • migrations with relationships

7 • Understand the history • Working with the Internet • Rack Todo 5 and current status of • HTTP Verbs • Rack Lab HTTP • What is a protocol • Work with the HTTP Request cycle in ruby and • HTTP Request Rack headers • Understand Rack as HTTP • URLs Middleware • HTTP Responses • Params • accessing params • Rack • Using the params hash • Value of middleware

8 • Implement the HTTP • Sinatra in app.rb • Sinatra Hello World 10 Request/Response Cycle • Sinatra as a gem • Sinatra Basic Routes with Sinatra • Simple GET Lab • Understand the value of requests in • Sinatra Basic MVC and how to

implement it in Sinatra sinatra Views Lab • Render front end with ERB • Moduler Sinatra applications • Sinatra Views templating • Shotgun Lab • Sinatra Routing • Different HTTP Verbs in Sinatra • MVC • Values of MVC • Separation of Concerns • How MVC works in Sinatra • Views • Templating • in line ruby

9 • Understand how to gather • Dynamic Routes • Dynamic 15 user input through forms • Symbol routing syntax Routes Lab • Work with form data to • params hash • Basic Sinatra create responses Forms Lab • Basic Forms • Create and parse nested • Sinatra MVC forms to create multiple • Create HTML Forms Lab models in one submit • Post those forms to your • Sinatra application Nested Forms • Parse form data to create • Super Sinatra model objects Forms • MVC with forms • full flow from form to controller, to model creation • Nested Forms • Using the name attribute of input elements • discuss the

value of a nested form • use the nested params hash.

10 • Be able to persist small • Browser data • Basic Sessions 5 amounts of data to the • What are sessions Lab browser with sessions • What are cookies • Sinatra Logging • Understand the basic flow of in and logging logging in/out • inspecting cookies out and sessions in a browser • Sinatra Sessions • Sessions in Sinatra • Setting the sessions hash • Authentication • Explain registration • Login creates a session • logout destroys the session

11 • How to integrate active • ActiveRecord and Sinatra • RESTful routes 15 record into sinatra • Migrations lab • Using multiple controllers • rake and sinatra • Sinatra in sinatra Messages • REST • Playlister • mapping routes to Sinatra activerecord actions • NYC Sinatra • choosing routes constructivel y • Multiple Controllers • mechanics of multiple controllers • How controller choose their view

• ActiveRecord associations in Sinatra • join tables • mapping tables to controllers

12 • Translate Sinatra • Sinatra to Rails • Rails Hello World 5 concepts into Rails • Router Lab concepts • Controllers • Work with Rails File System to serve files using • Models MVC • Views • Static Requests • ERB rendering • Rails generator file structure

13 • Understand Routing and • RESTful Routing • RESTful index 15 REST • method definitions action lab • Create routes that as http verbs • Dynamic Request connect to the • what are the Lab appropriate action different methods • Dynamic Routing • Similarities to Sinatra • How dynamic routing fits into REST

14 • Create dynamic views • Rails URL Helpers • Rails URL Helper 20 with ActionView • difference between Lab • Collect user input using path and route • Rails Form Tag Lab form_for and rails scaffold • Using this with • Rails Create Action link_to Lab • Create Action • Rails Index/Show/ • manual form tags New/Create Lab • POST action • Rails form_for Lab • Edit/Update Action • Formal Affair Rails • difference between • Rails form_for form and

action Lab • Form_for • Rails Blog Scaffold • using automated view helpers • passing in instance variables to helpers • assumed routes • Generators • when to use scaffold • how to generate scaffold • understandin g all the scaffolding creates

15 • Understand the power of • Validation callbacks • Blog Associations 10 validations • presence Validations • Create custom • uniqueness validations • numeric • Work with built in validations • regex matching • Display validation • Custom validations errors to users • Errors • The @errors variable • Describing errors in form_for • resolving errors

16 • Use ActiveRecord in • Associations • Pollywog Ranch 25 Rails • through • Simple Search • Understand complex • Domain modeling • Arel Labs many to many through • Working with JOIN • BnB Associations • Using AR to search and tables sort through data • Searching • Where • Find • ordering • AREL

17 • Understand the power of • Partials • Flatiron BNB 10 refactoring to components • Collection Methods • Use partials for collections, Partials • forms and other reusable views • Form Partials Profile Partials • Use helpers to remove logic • Cross Controller from views Partials • Helpers • Presenter Pattern • Logic in Views • Cross controller helpers

Module C

Javascript: Creating Interactive and Performant Front Ends with Javascript Syllabus

Unit Learning Objectives Reference Topics Competency Based Hours Assignments

1 • Understand the similarities between • JS Basics • JS Debugging 20 ruby and • How to run JS • JS isBetween • Know when javascript is the correct code • FizzBuzz language to use How to read JS • • Donut Lab • Use Javascript to do basic tests programming tasks • JS Data Types • Hashes • Variables • Functions • Strings • Math • Object Literals • JS Control Flow • if statements • looping

2 • Use closures to modify variable scope • Closures • Space Invaders 10 • Understand prototypical inheritance • Lexical scope • JS Tweet Shortener • Scoping with Var • Triangle.js • Anonymou s • Robot Simulator Functions • JS Tic Tac Toe • Inheritance • Prototypes • Constructo rs • Classes as Hashes

3 • Understand when and how to use • Basic jQuery • jQuery Calculator 10 jQuery • JS Libraries • jQuery OO Tic Tac Toe Work with other Libraries • • History of • Task Lister Use Selectors in JS • jQuery • Flickr Image Search • the $ selector • CSS Selectors in JS • Selectors • iteration • Convenienc e Methods

4 • Query and parse a JSON API • AJAX • Temperature Visualizer 30 • Update on screen content • JSON parsing • Spotify with AJAX dynamically • Using • Inflation Calculator $.ajax • Cars Lazy Loading • Async Javascript • Displaying results • JSON • Understand ing APIs • Reading API Documenta tion

5 • Intro to how rails talks to javascript • Consuming APIs from Ruby • JS Manifests Lab 15 • Optimize your javascript with Asset • Using Faraday • CSS Manifests Lab Pipeline • Popular Gems • Bootstrap Example Rails • How to build APIs for Javascript • Building APIs Lab consumption • Returning Basic • Basic APIs Lab Strings • Refactoring APIs Lab • JSON • DIY JSON Serializer Lab Serializatio n • Using to_json Lab • Using Built in Receiving API POSTs Lab to_json • • jQuery Tic Tac Toe • Active Model Serializer • Rails App with a jQuery Front End

2Week Student Projects Syllabus

During this portion of the course students are tasked with working solo to create a project. This course provides an in-depth opportunity for student to demonstrate their learning accomplishments and get a feel for what working at a company is really like.

Students are divided randomly and begin with an initial pitch session. Students are tasked with pitching three different ideas that they are passionate about. Instructors take the pitches and then choose the final project that the students work on. Instructors choose projects based on difficulty and feasibility given the time constraints of the course. Specifically, the projects are required to have the following items to meet the minimum bar of difficulty:

• Must work directly with an API • Must have > 3 Models and Controllers • Must use helper methods to remove logic from views • Must include at least two complex joins • Must have some AJAX functionality

Unit Learning Objectives InClass Lectures Lab Activities

1 • Understand developer flow with GIT • Git none • branches • Feature Branches • Advanced Merge Conflict • GitHub • Pull Requests • Issues

2 • Break a large project into workable chunks • Minimum Viable Products none • Choosing priority features • User Stories • Project Management • Dividing work • Agile Workflow