Web Development

The first version of the prework we tried to assemble all of the best resources for learning to build a web application in Rails. With our students, we noticed that the pre-work wasn't preparing them as well as it could have. We were missing a big opportunity. Our students expressed that the pre-work went for breadth over depth. Rather than honing in on ruby, the meat of our curriculum, a lot of time was spent on HTML and CSS which is an important but secondary piece.

We strongly belive that learning should have context, and you should know what your goals are. Each section will address which learning objectives it will cover, and at the beginning we expect all of you to check out the Ruby assesment so you know what you'll be expected to do at the end. There's an infinite amount of things you could spend your time learning, part of the value of the prework is that we can narrow the scope to only the most essential. If you can achieve fluency in the following topics we believe you'll flourish at the Flatiron School.

Setup

To complete these units, you will need a Treehouse and CodeSchool account. They are each normally $25 a month, so figure you might spend $50-$100 depending on how quickly you get through the material. So far the fine folks at CodeSchool have created a $9 trial month for all Flatiron Preworkers. Register using that link. Treehouse will offer something similar soon. You also will need a CodeAcademy account which is free.

You should also have a Rails Development environment setup. There are lots of guides for that on the internet and depending on your OS and setup, it's a bit of a process. You could always use the cross-platform Install Rails.

Note to students accepted into the Flatiron School. We will provide you with an account to treehouse and codeschool, feel free to use your own to get started, but we cover those costs for the duration of the prework and semester.

Thoughts

One of the challenges in learning how to code is that you probably don't even know what you're supposed to learn. When creating this prework, we had 4 goals in mind.

Full Stack

We'll present the full stack of technologies required to build a webapp from the ground up. We don't care if you use ERB or HAML. The web is built on HTML and everyone should learn it. Whether NoSQL or RDBMS, understanding the fundamentals of schema design and SQL is crucial. Students shouldn't shy away from depth. How can you be a web developer without a proficiency in these skills?
Linear Progression

The material is presented in order, going from web basics and computer basics, to markup, to styling, to version control, to programming, and then to databases and web frameworks. You learn the basics of code through Ruby and then finally move to Rails that builds upon the rest. Thus you start at the lowest level, the literal HTML the browser renders, and progress up through levels of abstraction until you finally get to the kitchen sink that is the Rails framework. As a beginner, don't try to learn Rails without knowing basic HTML/CSS and ruby. It's a disservice to your education.
Curated Resources

There is such a plethora of amazing content on learning to code. We liked the consistency of going to a few sources that all shared common interfaces and learning patterns, like videos and interactive portions. So this isn't a complete list of all the resources, but more a curated list of what we think works well together (with lots of feedback from alumni). We would love it if you submitted a github issue with more materials you've enjoyed.
Language Agnosticism

In the end, programming is about abstractions and expressions. The mechanics of code are universal and exist in all modern languages, like python, ruby, and javascript. We teach Ruby because we love it. Thinking your language choice, especially as a beginner, matters, is like thinking that you can only write poetry in English and not in Spanish. Obviously the beauty of poetry is in rhyme and meter, in metaphor and simile, in cadence and rhythm, not in the king's English. Why should code be any different? At Flatiron, you're learning how to think, how to break problems down, how to express yourself, how to abstract ideas, and how to work together. We just learn that through Ruby.

Learning Objectives

The goal of this tutorial is to be able to do the following:

Be comfortable navigating your development environment
Understand where programming skills fit into the "web"
Understand what pieces make up a web application
Develop a level of comfort with the most common ruby patterns in web development
Understand the basics of version control and why it is used
Have a basic understanding of HTML including forms
Through Rails you should learn the following:
- RESTful interfaces
- HTTP
- Routing
- Where ruby fits in the web development stack
Develop a comfort with basic SQL queries
Have a basic understanding of an ORM, ActiveRecord
Develop a basic knowledge of HTML and CSS

The Basics

Term Definitions

Thanks to the amazing team at Skillcrush, lots of tech terms are artfully explained. These are the ones you 100% need to know.

Domain
Ever wonder what that thing in the top of the browser is?: POP & IMAP
POP, IMAP, SMTP Oh My! It's only email, don't be scared.: API
We're building programs that can talk to other programs. Their APIs are their languages. Sort of.: WYSIWYG
You can't always get what you want, but sometimes, What You See Is What You Get.: IP Address
There's no place like 127.0.0.1, there's no place like 0.0.0.0, there's no place like localhost.: Web Server
Apache, Puma, Unicorn, Thin, IIS, Mongrel, don't be scared, they are just the beasts behind the world wide web.: Bugs
The term 'debugging' was coined by Grace Hopper when she literally removed a moth from her computer to get it working.: DNS
Finally understand how 74.125.228.4 actually means google.com: The Cloud
It's like instead of your head being in the clouds, it's all your infrastructure.: Command Line
Live deep in the nix heartland and become a loving extension of the shell.: Version Control
Rule 1. Never lose code. Rule 2. Never lose code.: Grid Systems
Just because we're not designers doesn't mean we shouldn't appreciate and respect their grids.: Rails
Not liking Ruby on Rails is like not liking parfait.: Cookies
There's probably a pun we could come up with, but we take security seriously.: 404 Error
The web's best easter egg.: Responsive Design
Keep your mind like water, but your design should be fluid and screen independent.: SEO
Despite what you might read, it's basically just black magic, the dark arts, the voodoo that gives traffic.: Hex
Because green to you might not be green to me. So there's these really specific codes we use for colors.: Ruby
The. Best. Programming. Language. Ever. Period. We. Promise.: CMS
All applications are basically just content management systems anyway.: Pseudo Code
First learn to express yourself. Then learn to code.: HTTPS
Insecure content warnings? HTTP Sniffing? Here's why.: Open Source
It's sort of impossible for me to quantify the impact open source software has made, but at least 64% of the top million websites are powered by it.: AJAX
And one day in February 2005, the Internet suddenly felt different.: Frontend / Backend
What's the difference? Turns out, less and less.: Javascript
The most pervasive and ubiquitous programming language since Flash.: Programming
It's awesome.: Database
Just think Excel spreadsheet on crack. Better. We mean better.: CSS
We could never love anyone that didn't appreciate the importance of a separation of content and style.: HTML
All documents should come in this format.

The Command Line

Min 2hr Max 6hr

The command line is your home base. It's probably one of the most important differences between a consumer of a computer, and a user. Many developers have all sorts of crazy short cut keys set up so that they can use their computer solely from the command line without ever having to reach for the mouse. It's vitaly important that you start thinking like a developer, rather than a consumer. Getting comfortable with the command line is the first step. If you feel like you're spending too much time on this section, and you've accomplished the learning objectives, move on.

Learning Objectives

Navigate a file structure
Use your terminal to type commands
Make files and directories from the command line
Open files from the command line

Tasks

Command Line Tutorial

http://bit.ly/command-line-tutorial

A short tutorial on some bash basics written by the wonderful team at Flatiron

Getting Started with the Console

http://teamtreehouse.com/library/console-foundations-2#getting-started-with-the-console

Environment and Redirection

http://teamtreehouse.com/library/programming/console-foundations/environment-and-redirection

Console Foundations is a great video series by Treehouse that covers lots of Bash Stuff. Some of it is more advanced, so we only included a few sections we feel are crucial. But feel free to skip around. The stuff about Environment Variables and PATHS is important. But it's short and worth going through at least once.

Some Bonus Material

The following are great resources, they just are a bit advanced and longer. We highly recommend you putting in the time to read and go through these examples, but don't worry if they are confusing. Do your best, always.

Learn the Command Line the Hard Way

http://cli.learncodethehardway.org/book/

The venerable Zed Shaw gives us a short book about your shell. Not the easiest or best resource, but it's still pretty good.

Command Line Basics

http://blog.teamtreehouse.com/command-line-basics

HTML & CSS

Min 15hr Max 20hr

The source of all content on the web, HTML is a crucial markup syntax to understand. We will be covering very little HTML through the course and we seriously expect you to know what the basic tags are and when to use them.

Learning Objectives

HTML Fundamentals
HTML Text Formatting
HTML Tables, Forms, and Iframes
HTML5 Elements
CSS Fundamentals
CSS Selector Statements
Building Page Layouts
Positioning
Rollover Image Sprites
Responsive Layouts

Building a HTML and CSS Website From Scratch

http://www.skillshare.com/Build-a-HTML-and-CSS-Website-From-Scratch/1216366887

Now it is time to investigate building a website from scratch. One of our instructors, Jon Grover, has an excellent SkillShare class that will take you step-by-step through building a responsive static website.

Some Bonus Material

Javascript Foundations

http://teamtreehouse.com/library/websites/javascript-foundations

This is a beautiful guide that we recommend everyone read through as quickly as possible. Don't worry if you don't fully understand this, the Treehouse unit below covers all this through videos and tests.

Treehouse HTML Basics

http://teamtreehouse.com/library/websites/html

This HTML tutorial helps you master HTML. Mastering HTML and its many elements is critical for any type of web professional. HTML or "Hyper Text Markup Language" describes the basic structure and content of a web page.

Front-End Formations

https://www.codeschool.com/courses/front-end-formations

If you are familiar with HTML & CSS already and were able to complete the Treehouse unit pretty easily, we recommend you try this unit. Especially if you are into aesthetics and advanced behaviors as it covers some amazing features of HTML & CSS.

CSS Foundations / CSS3

http://teamtreehouse.com/library/websites/css-foundations-2

Cascading Style Sheets (CSS) is a language used to describe the visual look of a web page. Using CSS, it is possible to change colors, margin, padding, fonts, and much more.

CSS3 (Cascading Style Sheets 3) is a superset of CSS that adds many new constructs and properties. Support for CSS3 is rapidly improving across all major browsers, making it a critical piece of technology for modern web professionals.

CSS Cross Country

http://www.codeschool.com/courses/css-cross-country

A beautiful and interactive tutorial from the amazing people at CodeSchool.

Responsive Websites

http://teamtreehouse.com/library/websites/build-a-responsive-website/

The Smells Like Bakin' cupcake company needs their website to work on tablets and phones. We will modify the code of their pre-existing website so that it is flexible and fits beautifully into a wide variety of screen resolutions and devices.

GIT

Min 1hr Max 4hr

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Learning Objectives

Have a basic understanding of what version control is
Understand what git and github are, and how they are different
Get a working version of Git on your system with your personal identity
Understand and be able to perfom all basic local Git operations: creating/cloning a repository, making changes, commiting changes, and viewing history

Try Git

http://www.codeschool.com/courses/try-git

Get an introduction to the basic concepts of Git version control.

WAT?

What is version control?!

from Github's "About Version Control" Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. Even though the examples in this book show software source code as the files under version control, in reality any type of file on a computer can be placed under version control.

Getting Starting with Version Control

http://git-scm.com/book/en/Getting-Started-About-Version-Control

A beginner guide from the Git Source Control Manual

Enter Git & Github

Git is a set of tools for local version control. Github is website that hosts your code and allows remote version control.

Difference Between Git and Github

http://www.jahya.net/blog/?2013-05-git-vs-github

Git Basics and Setup

https://help.github.com/articles/set-up-git

Now let's set up your local installation of git so that it knows who you are!

git config --global user.name "Sandi Metz"
git config --global user.email sandimetz@example.com

Finally, go to Github and create an account if you haven't yet.

Some Bonus Material

Git Real

http://www.codeschool.com/courses/git-real

A more advanced introduction to the core of version control with Git.

Git Immersion

http://gitimmersion.com/

Git Immersion is a guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it.

The Git Book

http://git-scm.com/book

The entire Pro Git book, written by Scott Chacon and published by Apress, is available here.

Git Videos

Four videos covering some basics from the creators and maintainers of Git.

Programming

Ruby

Min 20Hr Max 40Hr

My conscience won’t let me call Ruby a computer language. That would imply that the language works primarily on the computer’s terms. That the language is designed to accomodate the computer, first and foremost. That therefore, we, the coders, are foreigners, seeking citizenship in the computer’s locale. It’s the computer’s language and we are translators for the world.

But what do you call the language when your brain begins to think in that language? When you start to use the language’s own words and colloquialisms to express yourself. Say, the computer can’t do that. How can it be the computer’s language? It is ours, we speak it natively!

We can no longer truthfully call it a computer language. It is coderspeak. It is the language of our thoughts.

_why's poignant guide to ruby

Programming allows you to automate common, repetitive tasks on the computer. Developers use programming languages to write software, the software you interact with every day. From your alarm clock to your computer; from the web to the satellites orbiting our planet, software powers all of it.

Ruby is a programming language that we can use to do any task that needs to be automated. For example, something that is really irritating is a cluttered "Downloads" folder on your Mac. We could write a program that moves a file to a new folder, based on it's file extension, whenever we download something. A "scripting-language" would be best suited for this task.

Ruby is one of the most popular languages to create web applications. A web framework is a tool that makes developing for the web relatively simple. The most popular web frameworks for Ruby are Sinatra and Ruby on Rails. All of these languages and web frameworks are considered server side languages as they will be run on an actual web server.

Learning Objectives

Basic Ruby syntax
Defining a method
Looping and iteration
Ruby data structures
The concept of self

The CodeAcademy Ruby Track

http://www.codecademy.com/tracks/ruby

We think the CodeAcademy Ruby Track is a comprehensive and engaging way to cover the fundementals of the Ruby Langauge. Do it all. The super super important parts are:

But again, we highly recommend you do it all, twice possibly.

Treehouse Ruby Foundations

http://teamtreehouse.com/library/programming/ruby-foundations

The Treehouse Ruby series is a great beginner resource. It's a bit slower paced, so feel free to move faster if you got through the CodeAcademy unit easily.

Learn to Program

http://pine.fm/LearnToProgram/

Chris Pine's Learn to Program is a classic book that is mostly available online for free. Read it all. Then buy it and read it again. By the point in the prework, the fundementals of Ruby should be pretty clear. Pine's book is also available at: http://it-ebooks.info/book/36/

Flatiron School Ruby Assessment

http://bit.ly/flatiron-ruby-assessment

Our assessment for basic Ruby knowledge. This is the high bar you can shoot for in your Ruby understanding. You shouldn't be able to complete this on your own, that's what we do at the Flatiron School!

Some Bonus Material

Ruby Bits

http://www.codeschool.com/courses/ruby-bits

Learn all the little bits that make Ruby one of the most popular programming languages amongst non-programmers and programmers alike.

Web Development

There are many mediums, through which one can deliver applications. You can have Desktop Applications, Embedded Applications and Web Applications to name a few. At Flatiron School we focus on building Web Applications.

In a previous section you built a static website using HTML and CSS. You used markup languages to tell the browser how to render the content you were displaying. In order to have the ability to interact with your users and store the information they give you, we'll need to add more technologies to our toolbelt. These technologies are usually referred to as your "Stack."

A stack usually includes the following:

Operating System: a collection of software that manages computer hardware resources and provides common services for computer programs e.g. Linux
Web Server: Software that helps deliver web content to a client e.g. nginx
Database: An organized collection of data. SQLite for example.
Programming Language, like Ruby
A Web Framework like Ruby on Rails

We've already covered the basics of your operating system and done a brief intro to Ruby. Now we will do a short intro to the language that is used by most of the databases we will be using, SQL.

SQL & Databases

Min 4hr Max 10hr

In order for a web application to be useful it needs to store data, access that data and organize the data. This is the job of a database. Typically web apps respond to user input and do one of four things, create, read, update, or delete data in a database. Ruby serves as a kind of intermediary between the user and the database and Ruby can communicate with a database in its native language, which for our purposes is SQL.

Learning Objectives

Understand what a database is used for
Be able to create, read, update and delete data
Understand how you can relate two tables in a database (ex. products and categories)
Be able to write a simple SQL join between two tables

Treehouse SQL Course

http://teamtreehouse.com/library/programming/database-foundations

The Treehouse SQL course is comprehensive and easy to follow. It uses MySQL, which is a powerful database server that we don't really use at Flatiron for teaching purposes, but learning how to install it and use its GUI isn't a waste of time. So feel free to gloss over the MySQL setup / specific stuff, but it's useful.

ZetCode SQL Course

http://zetcode.com/db/sqlite/

A more technical introduction to SQL through SQLite3 and the Terminal. It's short and intense, but try to get through the entire thing. A nice bonus is if you want to start playing with SQLite and Ruby, go through the other Zetcode SQLite and Ruby tutorial.

Rails

Min 8hr Max 16hr

To build a Rails application you'll need to be able to save and retrieve data from a database using SQL, send HTML and CSS back to the browser, navigate your computer using the command line, and use git to version control your source code. Because Rails requires so many skills at once, we don't want the focus of the prework to be Rails, but rather getting introduced to the concepts necessary to build modern web applications. Hopefully the first time we talk about Rails in the classroom, it won't be the first time you've heard the terms controller or route, but it's also not the goal to master Rails before you get here. With that in mind, feel free to spend as much time as you'd like exploring Rails through the following tutorials. However, we're going to cover all of this in depth during the semester so it's probably best to use these turorials as a guide for the component skills you'll need to build web applications. For example, how much Ruby do I need to know? Can be answered by building a Rails application and seeing how much Ruby you need to know.

Learning Objectives

Understand how to create a basic data model
Posting data from a web form to create new objects in the database
Controllers
Routes and URLs
The Params Object
Gathering data from a database, sending the data from the controller to the view

Getting Started with Rails Guide

http://guides.rubyonrails.org/getting_started.html

This guide covers getting up and running with Ruby on Rails. After reading it, you should be familiar with:

Installing Rails, creating a new Rails application, and connecting your application to a database.
The general layout of a Rails application.
The basic principles of MVC (Model, View, Controller) and RESTful design.
How to quickly generate the starting pieces of a Rails application.

Rails for Zombies

http://www.codeschool.com/courses/rails-for-zombies-redux

Ruby on Rails, the most popular framework in-use by Zombies. That's right, you can basically be brain dead and use Ruby on Rails. No offense to brain dead people or zombies.

That's right, in theory, if you've gotten this far, you are ready to make a billion dollars and build a simple version of Facebook!

Michael Hartls Rails Tutorial

http://ruby.railstutorial.org/ruby-on-rails-tutorial-book?version=3.2

This has long been the best Rails tutorial on the web. Please make sure you are using Rails version 3.2 This is a great project to get a sense of what a beginner web application is. The amount and complexity of the Ruby he uses in this tutorial is pretty minimal but you can start to get a sense of what Ruby it'd be useful to know to be able to feel comfortable building web applications.

Some Bonus Material

Rails for Zombies 2

http://www.codeschool.com/courses/rails-for-zombies-2

In part 2 of Rails for Zombies, you learn even more about how to use this amazing framework.

Learn Ruby on Rails

http://learn-rails.com/learn-ruby-on-rails.html

Daniel Kehoe has been maintaining amazing Rails tutorial apps at RailsApp for a few years now. He's taken the best from these starter apps and compiled them into a great app-driven tutorial.

Advanced Topics

Testing

Testing with RSpec

http://www.codeschool.com/courses/testing-with-rspec

Write code that tests your code. If it seems like a post-modern nightmare, that's because it sort of is.

Rails Testing for Zombies

http://www.codeschool.com/courses/rails-testing-for-zombies

After eating all these brainz, you're probably pretty smart. Now learn how to prove that your code works.

Aesthetics

Website Basics

http://teamtreehouse.com/library/websites/website-basics/website-basics

Beyond HTML and CSS, there are several basic technology skills that every web professional should know. Some of these include uploading files to the web via FTP or purchasing domains and hosting.

Graphic Basics

http://teamtreehouse.com/library/websites/technology-foundations/graphic-basics

Graphic basics is for developers and designers alike, to become familiar with the difference between vector and raster, units and increments and saving for the web.

Aesthetic Foundation

http://teamtreehouse.com/library/websites/aesthetic-foundations

Aesthetic Foundations will cover the elements and principles of art, along with color theory. This basic knowledge will provide a design language that enables more effective communication amongst designers and other team members.

Fundamentals of Design

https://www.codeschool.com/courses/fundamentals-of-design

Improve the visual competency of any website or application by keeping design in mind. Learn the fundamental design principles of typography, color and layout.

Javascript

Javascript Roadtrip Part 1

https://www.codeschool.com/courses/javascript-road-trip-part-1

An introduction to the very basics of the JavaScript language. Build a foundation of JavaScript syntax and learn how to use values, variables, and files.

Try jQuery

https://www.codeschool.com/courses/try-jquery

Simplify web development with the amazing javascript library jQuery, in use by over 220 million websites.

jQuery The Return Flight

https://www.codeschool.com/courses/jquery-the-return-flight

Now that you've got the basics of javascript and jquery, take flight as a captain of the browser (or something)!

Best Practices

Rails Best Practices

http://www.codeschool.com/courses/rails-best-practices

"Any fool can write code for machines, it takes a programmer to write code for humans."

About

Credits

First, we'd love to thank all the amazing people who created these source materials. Most of it is from CodeSchool and Treehouse, with a bit from Zed Shaw, and some from the people at Skillcrush. Obviously there are a lot more resources out there for learning these topics. This guide is just my current preferences and tries to put them in a linear fashion so skills can build upon each other. Hope it helps someone. Oh and the theme for the site was purchased from WrapBootstrap.