Programming for Non Programmers Bootcamp

Taught by me, Hartley Brody 😄

The class is organized by General Assembly. More information here.

Sections

What is Programming? (1hr) We'll start by answering the most basic question of the weekend. What is programming? How does a computer think? What can it do? Where does code run? We'll answer some of these questions with an ice breaker exercise.
Primer on HTML, CSS & JS Intro (1hr) We'll take a look at the basics for the three universal website technologies: HTML, CSS and Javascript.
The "Front" End (1hr) The frontend of any web application or web site is the code that runs in the visitor's browser, as opposed to code that runs on the site's own web server. Let's take a look at the frontends of a few simple sites, using tools that our browser provides. Explore and try editing them on the fly.
Building our own static websites (1hr) Now for the fun part. Using sublime text, we'll write our own HTML and CSS to build web pages. We'll start out by all building similar sites following a template, and then we'll get to add more content and customize them.
Adding Javascript (1hr) Javascript brings our static websites to life. We'll write some Javascript code that interacts with the DOM and listens for events.

The "Back" End (1hr) Today, we're going to look at the backend, or code that runs on a web server, as opposed to on a visitor's computer.
Application Programming Interfaces (1hr) Sometimes, you want to outsource your backend to someone else. Maybe they have data you want access to, or maybe they perform some complex function that would be hard for you to build yourself. We'll look at how you can connect to a backend by making HTTP requests from within your frontend.
Building a Nutrition Tracker (2hrs) Now that we know how to build a basic frontend, add functionality to it with Javascript and interact with a backend via API calls -- let's put it all together! We'll build a small app for tracking our meals. To save us time, I've already written the code to build out the backend, but we can look through it and interact with it via an API.
Web Development Workflow (1hr) Before we wrap up, we'll touch on a few more topics that are essential to web development. We'll look at the day-to-day workflow of the average web developer, and some other tools and resources that can make us more productive.

By the end of the class, every student should be able to....

...explain what programming is.
...explain the client-server model and the difference between the "front" & "back" ends.
...write HTML, CSS and Javascript to change how a webpage looks and behaves.
...use Chrome's developer tools to inspect a website and learn how its frontend works.
...explain how to interact with an API and 2 reasons why you might want to.
...explain the day-to-day workflow of the average developer.

List several different places that code can run.
Illustrate the concept of coming up with and executing simple instructions.
Build and demonstrate a static web page using HTML, CSS and Javascript.
Describe what sorts of code could run on a client versus a server.
Build and demonstrate a basic web application written in Javascript that stores data.