Full Stack Web Development Pre-Work

Great! You've been accepted to start the Full Stack Web Development bootcamp. Congratulations! No time to sit back and relax though: the fun is just about to begin. We want you to get ready for the bootcamp, which means there is some work for you to do before the start of the Full Stack Web development bootcamp.

Feel free to contact us if you have any questions anytime during the pre-work. Please do so by email to learn@propulsionacademy.com or reach out to our team on Slack.

Note about the exercises

If you complete all the exercises in the pre-work ahead of time (we know you are very motivated and eager to practice, so no surprise in case you do finish them early), please ask for more, and we can create a few new ones for you.

Unit 1. Introduction to the Internet

How the Internet Works

The Internet works because open standards allow every network to connect to every other network.

This is what makes it possible for anyone to create content, offer services, and sell products without requiring permission from a central authority.

It levels the playing field for everyone, and it’s the reason why we have a rich diversity of applications and services that many of us enjoy today. No single person or entity controls the entire Internet, but rather everyone is in charge of the Internet. Visit How the Internet works to discover more and learn about HTTP and HTML, WiFi, DNS, IP addresses and routers, and optionally watch the videos about encryption, public keys as well as cybersecurity!


Unit 2. Tools

Text Editors

There are a lot of text editors our there, from Notepad++ to Brackets, Sublime Text, TextMate, Vim, Komodo, Atom and others. So what editor is best for what I am working on? Let's start by looking at the two most popular on the market, Sublime Text and Atom.

Here's a blog post which will take you through the differences between the two. In the end you decide which one you like more, and of course nothing is set in stone: you can always switch from one to the other.

Sublime Text

Sublime Text is a cross-platform source code editor with a Python API. It natively supports many programming languages and markup languages, and its functionality can be extended by users with plugins, typically community-built and maintained under free-software licenses.

Here's how to set up Sublime Text.

Atom

Atom is a free and open-source text and source code editor for OS X, Linux, and Windows with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub. Follow the tutorials below to setup your Atom text editor.

Basics of the Command Line

The command line interface (CLI) will be your friend by the end of the bootcamp. The sooner you start familiarizing yourself with it, the better.

Git and GitHub

Git is a Version Control System (VCS). 99% of development teams work with some form of VCS, and most of them use Git. The following links will help you understand what Version Control, Git, and GitHub are.


Unit 3. Frontend

In this unit we are going to take a deep dive into the basics of frontend software development.

By frontend we mean all that the user sees on a website or mobile device: content, styles, animations, and all the code that runs in the browser.

Intro to HTML and CSS

HTML is about content. CSS is about how the content looks, not just the styling, but also where it is positioned on the page.

Exercise

Clone the homepage of Google and send the result to learn@propulsionacademy.com.

JavaScript

Getting Set Up

Before going over the exercises you need to set up your environment. There are only 2 things needed for these exercises: Node.js and NPM.

JavaScript has traditionally been used as a client-side scripting language since it is the only language currently supported in web browsers, but it can also be used on the server using Node.js. Although you will install node, we are going to use JavaScript mainly in the browser.

Mac OS

We recommend using Homebrew to install Node on Mac OS.

Then in order to install Node just execute brew install node from the command line. This will also install npm which is the package manager for Node.

Windows

To install Node.js and NPM for Windows you can go directly to http://nodejs.org or follow these steps.

"Hello, World!" in JavaScript

Let's create a "Hello, World!" program in JavaScript.

  1. Navigate to a folder.
  2. Create a new JavaScript file named helloworld.js.
  3. Open the file with your text editor.
  4. Insert the following code into the file: console.log('Hello, World!')
  5. Save the file.
  6. Navigate to the folder with the terminal. Once you are there, run ls to make sure you see your file.
  7. Run node helloworld.js from the terminal.
  8. You should see "Hello, World!" printed on the screen.

Congratulations! You created your first JavaScript program!

JavaScript Basics

jQuery and DOM Manipulation

Exercises:


Unit 4. Backend

Java

Getting Set Up

  • Download the latest version of the JDK for Java 8 that is appropriate for your operating system.
    • Make sure you download the JDK (Java SE Development Kit), not the JRE (Java Runtime Environment).
  • Install JDK 8.
  • Set the JAVA_HOME system environment variable to the full directory path of the installed JDK. Then make sure that the full directory path to the bin directory of the installed JDK is added to the PATH system environment variable. This allows you to run the java and javac executables from the command line.

"Hello, World!" in Java

  • Create a new text file named HelloWorld.java with your favorite text editor.
  • Enter the following as the contents for the file and save it.
public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello, World!");
	}
}
  • Open a terminal (on Linux or Mac) or a DOS command window (on Windows) and navigate to the directory in which you saved HelloWorld.java.
  • Compile HelloWorld.java from the command line by executing: javac HelloWorld.java
  • If the compilation completed successfully you should see a file named HelloWorld.class in the same directory.
  • Run the HelloWorld application from the command line by executing: java HelloWorld
  • You should see "Hello, World!" printed on the screen.
  • Congratulations! You have just written, compiled, and run your first Java application -- all from the command line. 👍🏻

Eclipse

"Hello, World!" in Java (in Eclipse)

  • Start Eclipse and create a new Java project named hello-world.
  • Create a new HelloWorld class in the hello-world project.
  • Copy the source code for HelloWorld.java from the "Hello, World!" section and save the file in Eclipse.
  • Run HelloWorld within Eclipse.
  • You should see "Hello, World!" printed in the Console view within Eclipse.
  • Congratulations! You have just written, compiled, and run your first Java application within an IDE. 👍🏻

Learning Java Basics

  • Complete the following interactive lessons of the Learn Java course.
    • Introduction to Java
    • Conditionals and Control Flow
    • Object-Oriented Java
    • Data Structures
  • To further enhance your understanding of Java, you may optionally wish to complete the Trails Covering the Basics in the official Java Tutorials from Oracle.

Exercises: