Week 1

Introduction to Web

This course will teach you full stack web development. That means you'll be able to build both the UI and the backend for your website.

In this class, you will (hopefully) learn:

  • How to write HTML and CSS
  • How to write vanilla JavaScript, front end framework JavaScript, and backend JavaScript.
  • How JavaScript works and what it can do for you.
  • How HTTP servers work and how (most of) the internet works

What you need

Web development can be done on any computer, anywhere.

  • An internet connection
  • A web browser
  • A text editor

How the Front End Works

When you visit some website, your browser gets a lot of text, which it puts together to make the page that you see.

There are three main kinds of text that get sent to your browser:

  • HyperText Markup Language (HTML), which is mostly a list of things that you're seeing.
  • <p>When you visit some site...<p>
  • Cascading StyleSheets (CSS), which defines how something looks. CSS adds styling to your page.
  • html {
    		background-color: #eee;
    		font-family: 'Roboto', sans-serif;
    		font-size: 20pt;
    	}
  • JavaScript, the full programming language that runs on your browser. Its main purpose is to add interactivity.
  • var i=7+4-3*2;
    	var hello="Hello World!";
    	console.log(hello);
    	console.log("7+4-3*2 is " + i);
w

Keep In Mind

  • JavaScript is the programming language you'll use to make your website interactive. Don't overuse it though, because it's the slowest thing on the page.
  • JavaScript is not Java. They make very different decisions about how they act as languages, even if they share a lot of superficial similarities.
  • When in class, don't focus on memorizing syntax. You will be writing code for the Internet here, so use the Internet to your advantage as much as possible.

I personally recommend MDN, the Mozilla Developer Network, and Stack Overflow. I do not recommend W3Schools.

That being said, the best way to learn is to jump in and write some code. Press the F12 key (or if that doesn't work on Mac, press Cmd+Option+J) to open your browser's developer tools. You can also right click the page and click Inspect. For now, any browser is fine, but if you're going to do a lot of web development, you should be using either Chrome or Firefox. You can enter JavaScript code in the console tab.

Understanding Layout

HTML defines the layout of a web page. You can think of it as defining nested boxes which rendered from the top to the bottom of the page.

The above page is an example of a layout that can be created with some simple HTML and CSS.

First Lines of Code

In most programming languages, variables are at the core of your code. They are places to put information that you will use later in your program, whether that information is a number, some text, a list of values, or a new kind of data you make up on your own.

Creating JavaScript variables is pretty straightforward. Use var before creating a new variable, and once a new one is created, anything can be put in it, namely numbers and strings. To put something in the variable, use =. Some examples:

var a=5;
	var b=8;
	var c="Hello World!";
	a="Hi World!";
	c=3.14;

We can also use basic math operations. Namely, +. -. *, and / work pretty much as expected with numbers and are called binary operators.

5+8.3    //returns 13.3
	var frac=3/5    //puts 0.6 in frac
	4*(7-6+5)       //returns 24
	3.7+2.5*5       //returns 14.7
	div="a" + "bc"  //Reassigns frac to "abc"

They work a little like functions: they take two inputs and give you back the result in its place. These pieces of code that the computer simplifies for you are called expressions. They're the basic building blocks of your code.

Conditions

In any programming language, it's important to make decisions based on some external factor, often the user. To do this, we use booleans, which are either true or false. They're almost always used to test if something is true, and then execute some code based on that. We can compare two numbers with binary operators like >, <, >=, and <=. You can also use the boolean operators !, &&, and || to combine and change your conditions.

4>=6  //returns false
	2<3 || 5<=3     //returns true
	!(4.5>5 && 4>3) //returns false

However, equality is a bit more complicated, since = was already taken for the assignment operator. JavaScript uses == and ===. == tries to convert both values to the same type before comparing, while === doesn't.

3=="3"         //returns true
	3==="3"        //returns false
	3===3          //returns true

JavaScript is weakly typed, so that means that you can try to convert anything to anything else, including a boolean. If you do, only 0, NaN, and "" will return false, or be "falsey". There are a few more falsey values, but those are the only strings and numbers that are falsey.

Wrap Up

We learned about three kinds of data that JavaScript can work with in variables: numbers, strings, and booleans. We also learned how to use these data types in expressions to have our program do basic manipulation of that data. Those expressions often have operators in them that tell our program what we want to do with our data.

The type of data we're working with isn't clearly defined when we write our code, so we have to keep in mind that we can mix types. That's sometimes what you want, but remember to keep it in mind. In more complicated programs, it results in some problems.

Thanks for coming! Let me know what you thought about this class by filling out this anonymous survey.