|
|
| Line 1: |
Line 1: |
| Notes from previous [[Front-end Web Development]] classes. | | Notes from previous [[Front-end Web Development]] classes. |
|
| |
| ==== Class for 2016-06-27: back-end web development ====
| |
| This class is all about the seedy underbelly of web development: the backend! It is tailored toward front-end developers wanting to get a taste of how things come together on the server. We'll talk about PHP, then Express.js, then Rails.
| |
|
| |
| During the recap period, we will set up your computers. But it's best to do this before arriving if possible. Here are the steps used for class preparation:
| |
|
| |
| ----
| |
|
| |
| ===== THE EASIEST WAY =====
| |
| Come to the class in person and get the USB stick from Jeffrey. Then follow the below "easy" steps without having to download anything.
| |
|
| |
| ===== THE EASY WAY =====
| |
| If you would like to follow along, the easiest option is to run a virtual machine.
| |
| * Install [https://www.virtualbox.org/wiki/Downloads VirtualBox AND the Extension Pack]
| |
| * [http://jeffreyatw.com/static/frontend/Ubuntu.ova Download this preconfigured Ubuntu virtual machine (2.89GB)]
| |
| * Double-click the .ova file. You should check the "reinitialize the MAC address" step.
| |
| * Start the machine after installation and you're all set!
| |
| * System username and password are both "'''front-end'''". Feel free to change them if that's uncomfortable.
| |
|
| |
| ===== THE HARDER WAY =====
| |
| If you don't want to use a virtual machine, or would like to set your computer up for further work on your own.
| |
|
| |
| ====== Linux ======
| |
| * To set up Node.js installation, run:
| |
| ** <code>curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -</code>
| |
| * Install required packages: <code>sudo apt-get install -y nodejs lamp-server^ ruby ruby-dev zlib1g-dev libsqlite3-dev</code>
| |
| ** (Press Enter at any prompts.)
| |
| * Install Express: <code>sudo npm install -g express-generator</code>
| |
| * Install Rails: <code>sudo gem install rails</code>
| |
|
| |
| ====== OS X ======
| |
| * Upgrade to at least OS X 10.9, preferably the latest (currently 10.11 El Capitan).
| |
| * Install the Xcode developer tools:
| |
| ** <code>xcode-select --install</code>
| |
| * For Node.JS:
| |
| ** Install Node.JS: http://nodejs.org/
| |
| ** Install Express: <code>npm install -g express-generator</code>
| |
| * To install Rails, run:
| |
| ** <code>sudo gem install rails</code>
| |
| * For PHP, install MAMP: http://www.mamp.info/en/index.html
| |
|
| |
| ====== Windows ======
| |
|
| |
| (I recommend sticking with the aforementioned virtual machine setup, or installing a Linux partition, as it is somewhat difficult to set things up on Windows.)
| |
|
| |
| In all cases where there is a choice, choose 64-bit (x64).
| |
| * Install Git for Windows: http://www.git-scm.com/ (all default settings)
| |
| * For Node.JS:
| |
| ** Install Node.JS: http://nodejs.org/ (all default settings)
| |
| ** Install Express by opening Git Bash and running:
| |
| *** <code>npm install -g express-generator</code>
| |
| * For Rails:
| |
| ** Install the latest Ruby from http://rubyinstaller.org/downloads/
| |
| *** When installing, choose to "add Ruby executables to your PATH".
| |
| ** Install the Ruby Development Kit by following these instructions: https://github.com/oneclick/rubyinstaller/wiki/Development-Kit
| |
| ** Install Rails by opening Git Bash and running:
| |
| *** <code>gem install rails</code>
| |
| * For PHP:
| |
| ** Install the Visual C++ 2012 Redistributable: https://www.microsoft.com/en-us/download/details.aspx?id=30679
| |
| ** Install WampServer: http://www.wampserver.com/en/
| |
|
| |
| ===== THE HARDEST WAY =====
| |
| Install Node.JS, NPM, Express, Apache, PHP, Ruby, and Rails individually. Good luck!
| |
|
| |
| [https://www.youtube.com/watch?v=akGNwcU-Koo Lecture video]
| |
|
| |
| ==== Class for 2016-06-06: Working from professional mockups, cont'd ====
| |
| We will continue working off of our mockup and learn a bit about CSS3 and background images in the process.
| |
|
| |
| [https://github.com/JeffreyATW/noiseco Mockups and assets can be found here].
| |
|
| |
| [https://www.youtube.com/watch?v=m9jWX_GQF6E Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class19 Lecture materials]
| |
|
| |
| ==== Class for 2016-05-23: Working from professional mockups ====
| |
| We'll take the knowledge we gained from looking at the box model, positioning, media queries and CSS3, and work off of a mockup to make a site that could pass as a professional design.
| |
|
| |
| [https://github.com/JeffreyATW/noiseco Mockups and assets can be found here].
| |
|
| |
| This class will require the use of [https://harpjs.com/ Harp], as we'd like to make this as realistic of a project as possible. As a bonus, we'll learn how to use preprocessors like [http://sass-lang.com/ Sass] to help us with our code.
| |
|
| |
| [https://www.youtube.com/watch?v=9pyaTa7pMhY Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class18 Lecture materials]
| |
|
| |
| ==== Class for 2016-05-16: Modern CSS ====
| |
| We'll talk about a number of topics concerning modern CSS development: CSS3, browser support, and responsive design (for mobile devices).
| |
|
| |
| We'll start on [http://jeffreyatw.com/static/frontend/series6/class17/blog.zip this page] and make it mobile.
| |
|
| |
| [https://www.youtube.com/watch?v=kA73S1iaCVc Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class17 Lecture materials]
| |
|
| |
| ==== Class for 2016-05-08: CSS floats & flexbox ====
| |
| Floating and flexbox are two methods behind creating websites with multiple columns, navigation menus, and basically any block element that's stacked horizontally. We'll learn about them by taking a look at some examples, discuss the pros and cons of each, then take a [http://jeffreyatw.com/static/frontend/series2/class4/mockup.png mockup] and create a site from it.
| |
|
| |
| [https://www.youtube.com/watch?v=45crnboPpsg Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class16 Lecture materials]
| |
|
| |
| ==== Class for 2016-04-25: CSS positioning ====
| |
| We're going to let JavaScript take a backseat for the rest of the series, and we'll begin to focus on CSS concepts. This time, we'll focus on positioning of elements: using absolute, relative, or fixed positioning to put the elements anywhere we want on the whole page. We'll use [http://jeffreyatw.com/static/frontend/series6/class4/mockup.png this mockup] along with [http://jeffreyatw.com/static/frontend/series6/class4/assets.zip these assets] to put together a page that demonstrates positioning.
| |
|
| |
| If have been daunted by the complexity of JavaScript programming, this should be a much simpler, straightforward class.
| |
|
| |
| [https://www.youtube.com/watch?v=gqT6IBMPglo Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class15 Lecture materials]
| |
|
| |
| ==== Class for 2016-04-18: React and Redux ====
| |
| We'll take a look at [https://lunch.labzero.com Lunch], an app I'm working on using [https://facebook.github.io/react/ React] and [http://redux.js.org/ Redux]. We'll see how it compares to our jQuery and Angular apps, and how React's unidirectional flow, along with Redux's state management, allows us to build an efficient, powerful application.
| |
|
| |
| Because of the complexity of this subject, we'll only be skimming the surface with this pre-written app. React generally requires a good knowledge of the intricacies of JavaScript, so consider this a light introduction.
| |
|
| |
| [https://www.youtube.com/watch?v=Iydma-sfKwA Lecture video]<br>
| |
| [https://github.com/labzero/lunch Lecture materials]
| |
|
| |
| ==== Class for 2016-04-11: directives, routing and AJAX with AngularJS ====
| |
| We'll continue learning the basics of [https://angularjs.org/ AngularJS] by learning how to encapsulate behavior into reusable elements, load data from the back-end, and create a site that acts as if it has multiple pages while remaining a single-page app.
| |
|
| |
| We'll build off the [https://github.com/JeffreyATW/fwd/tree/master/series9/class12/noisetwitter work from last week.]
| |
|
| |
| [https://www.youtube.com/watch?v=SKdKHcJ4eRw Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class13 Lecture materials]
| |
|
| |
| ==== Class for 2016-04-04: intro to AngularJS ====
| |
| We'll learn about the basics of [https://angularjs.org/ AngularJS] (version 1), a popular client-side MVC application framework. Frameworks such as these make it easier to manage data-rich views by keeping everything in sync with each other, and with data in the back-end. To understand how libraries like AngularJS differ from [http://jquery.com jQuery], we'll be taking our [https://github.com/JeffreyATW/fwd/tree/master/series9/class10/noisetwitter NoiseTwitter] app and converting it from one that uses jQuery into one that uses AngularJS instead.
| |
|
| |
| [https://www.youtube.com/watch?v=7h2Oz4DiviU Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class12 Lecture materials]
| |
|
| |
| ==== Class for 2016-03-28: Forms ====
| |
| We'll create a Bootstrap-based landing page with a sign-up form. We'll learn about built-in HTML5 validation, but also use the [http://jqueryvalidation.org/ jQuery Validation plugin] to help us where browser support is necessary.
| |
|
| |
| [https://www.youtube.com/watch?v=pwMGFVeXI0A Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class11 Lecture materials]
| |
|
| |
| ==== Class for 2016-03-21: Ajax ====
| |
| We'll talk about Asynchronous JavaScript and XML, a technology that allows us to talk to a server without leaving the page. jQuery makes this easy. We'll add Ajax functionality to [https://github.com/JeffreyATW/fwd/tree/master/series9/class7 the Twitter app]. We'll use this [https://github.com/JeffreyATW/fwd/blob/master/series8/class10/noisetwitter/source/tweet.php PHP file] to test it out.
| |
|
| |
| If you don't already have web hosting, please sign up for some at [https://www.nearlyfreespeech.net/ NearlyFreeSpeech.NET] for free (or very cheap). Also, install the [https://filezilla-project.org/ FileZilla Client].
| |
|
| |
| [https://www.youtube.com/watch?v=ajhVV5wTJ1I Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class10 Lecture materials]
| |
|
| |
| ==== Class for 2016-03-14: HTTP, SFTP, and Git-based web hosting ====
| |
| We'll talk about file transfer: HTTP, which is the method of getting and sending information in the web browser; SFTP, which is a method of securely uploading files to a web host; and how to use Git to host a site.
| |
|
| |
| We'll set up free web hosting accounts at [https://www.nearlyfreespeech.net NearlyFreeSpeech.NET] (which you should sign up for now), and upload to them using [http://filezilla-project.org the FileZilla client] (which you should install now).
| |
|
| |
| [https://www.youtube.com/watch?v=I8oIC5Jyx1k Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class9 Lecture materials]
| |
|
| |
| ==== Class for 2016-03-07: starting a new project ====
| |
| A text editor and web browser are all that's required to start a project - but how about getting a head start? We'll talk about [https://harpjs.com/ Harp] and [http://getbootstrap.com/ Bootstrap], two tools that will greatly help us with the setup of a new site.
| |
|
| |
| [https://www.youtube.com/watch?v=Gm4sSCT-9GE Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class8 Lecture materials]
| |
|
| |
| ==== Class for 2016-02-29: jQuery, cont'd ====
| |
| We'll continue learning about jQuery by focusing on [https://github.com/JeffreyATW/fwd/tree/master/series9/class6/noisetwitter the example we worked on last class]. We'll add functionality to it that will make it seem more like the real thing.
| |
|
| |
| [https://www.youtube.com/watch?v=3iaBQOgY4qo Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class7/noisetwitter Lecture materials]
| |
|
| |
| ==== Class for 2016-02-22: jQuery ====
| |
| We'll introduce jQuery, a JavaScript library that makes web programming a whole lot easier. jQuery is the most popular of many libraries that allow us to interact with the document easily, while also providing us with a few tools that are missing from the base language.
| |
|
| |
| To learn what jQuery can do, we'll add some scripting to [https://github.com/JeffreyATW/fwd/tree/master/series9/class6/start this sample web app].
| |
|
| |
| [https://www.youtube.com/watch?v=cY2oRWIYhK0 Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class6/noisetwitter Lecture materials]
| |
|
| |
| ==== Class for 2016-02-08: JavaScript, cont'd ====
| |
| We'll continue discussing JavaScript basics: arrays, objects, creating functions, and scopes.
| |
|
| |
| [https://www.youtube.com/watch?v=YFnDmrLXqf0 Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class5 Lecture materials]
| |
|
| |
| ==== Class for 2016-02-01: JavaScript ====
| |
| We'll talk about JavaScript: making web pages interactive through client-side code. We'll use the console, which is part of the browser's developer tools, to demonstrate the basics of the language. This and next week's class can be treated as a general introduction to programming.
| |
|
| |
| [https://www.youtube.com/watch?v=fAxEb3JViWk Lecture video]<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class4 Lecture materials]
| |
|
| |
| ==== Class for 2016-01-25: version control (Git) and the command line ====
| |
| This class is a general overview on version control and the command line. Most developers collaborate with their peers by using version control systems, which allows them to keep track of their work in a reliable fashion and push it to the web.
| |
|
| |
| Again, this class isn't about web development per se - it's just an important introduction to using the command line to work with Git, one of the most popular version control systems. Everyone will create their own fork of a repository and check in their work.
| |
|
| |
| During the half-hour before the class, we'll help people set up Git on their computers. On OS X, type <code>git</code> in a Terminal to get started. On Windows you should install [http://msysgit.github.io/ Git for Windows]. Also, please sign up for a [https://github.com GitHub] account.
| |
|
| |
| [https://www.youtube.com/watch?v=Qt4IW_TVTUc Lecture video]<br>
| |
| [https://github.com/JeffreyATW/shakespeare9 Lecture materials]
| |
|
| |
| ==== Class for 2016-01-11: CSS selectors and the box model ====
| |
| CSS selectors are probably the most complex part of the CSS language, so we'll look at them further in-depth. We'll also talk about the box model, the display concept that makes words and containers on the web look like they do.
| |
|
| |
| '''No video for this class.''' [https://www.youtube.com/watch?v=LcKvWkhVezA Here's last series's video.] (audio doesn't work until 33:10)<br>
| |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class2 Lecture materials]
| |
|
| |
|
| ==== Class for 2016-01-04: the basics ==== | | ==== Class for 2016-01-04: the basics ==== |
| <span style="color:green">'''THIS is the class to attend if you are a complete beginner!'''</span> We are starting the curriculum of this class from square one. We'll cover the very basics: | | <strong style="color:green">THIS is the class to attend if you are a complete beginner!</strong> We are starting the curriculum of this class from square one. We'll cover the very basics: |
| * Explaining "front-end" vs. "back-end" | | * Explaining "front-end" vs. "back-end" |
| * Explaining web apps vs. web sites | | * Explaining web apps vs. web sites |
| Line 211: |
Line 14: |
| No recap session for this class. Please show up before 8pm, as physical space is limited. Bring a laptop! | | No recap session for this class. Please show up before 8pm, as physical space is limited. Bring a laptop! |
|
| |
|
| [https://www.youtube.com/watch?v=O-Uf_mlpqns Lecture video]<br> | | [https://www.youtube.com/watch?v=xVtoau13GU8 Lecture video]<br> |
| [https://github.com/JeffreyATW/fwd/tree/master/series9/class1 Lecture materials] | | [https://github.com/JeffreyATW/fwd/tree/master/series10/class1 Lecture materials] |
|
| |
|
| ---- | | ---- |
|
| |
|
| [[Frontend_Web_Development/Notes/Archive|Class notes from previous series]] | | [[Frontend_Web_Development/Notes/Archive|Class notes from previous series]] |