Spark Front End Web Development

Spark Boulder, Summer 2017

Session 0: Special Edition

Introduction, first HTML page

Today:

How to Learn Web Development

Hi there! I'm Ken.

A little about me:

Follow along in the slides!

Head to https://classbot.hoff.tech, and click on the HTML slides for Session 0.

Navigate back and forth using the arrow keys.

Note: This is Session 0!

In most programming languages, when you have a list of items, the first element of the list is at index 0.

There are a total of 20 sessions in this course, and our final session is session 19.

For each session:

You can see all the readings, slides, and assignment descriptions on https://classbot.hoff.tech.

To submit assignments, you'll use @classbot on Slack, which we'll talk about in just a bit.

Slack!

https://sparkfrontendwebdev.slack.com

Check your email for an invite!

If you didn't get one, shoot me an email at ken@hoff.tech and I can resend it.

We're using Slack for:

I'm not a huge fan of email (post-Microsoft email trauma), so I send all class-related announcements through Slack. You may want to download the desktop and mobile apps so you get notifications.

@classbot!

All assignments should be submitted to @classbot on Slack. (I'll show you how to do that in just a minute here.)

You can submit assignments as many times as you want, and as early/late as you want! We'll always record the most recent grade. Type grades to get an idea of how you're doing.

(Obviously, don't submit work that isn't yours to @classbot. I'm expecting you to abide by the CU Honor Code, and @classbot records all submissions.)

Every semester, I try to improve the assignments a little bit. You can work ahead and complete all the assignments if you want, and the content that we'll be teaching will be roughly the same. Keep checking your work by running grades on @classbot occasionally.

If @classbot ever goes down (or becomes unresponsive) please let me know! Just mention or DM me on Slack. Always working out bugs :)

Assignments?!?!?!

You will have 20 assignments total in this class, one for each session. Don't worry - they're all pretty easy!

Let's do the first assignment now!

Check out the first assignment on https://classbot.hoff.tech. (Assignment 0)

Now, open up a Direct Message with @classbot on Slack.

Look for "Direct Messages" on the left sidebar, and click the + button. Type in classbot and hit go.

Avoid @classbot-beta for now :)

Then, type submit 0 http://sparkboulder.com into the direct message with @classbot.

That's it! That's how you'll submit all of your assignments in the class.

In the future, you'll submit a URL that contains the page that you've created for the assignment.

Projects!

Over the course of the next 10 weeks, I'm going to have you complete 4 different projects.

You can present your project to the class, if you want! Definitely not required.

Just like all of the other assignments, these aren't formally "due" anytime.

These projects won't be formally graded at all, but they'll be included in your "report card" at the end of the class. They're also really cool to show off to potential clients and employers!

Treehouse

Treehouse is our textbook for the class.

It has tons and tons of well-produced videos on web design, development, tools, and mobile development!

Each session, I'll select a couple videos to watch before class, and answer any questions about it that you might have during class.

You're not required to complete any of the Treehouse quizzes, and I'm not tracking if you actually watch the videos.

$25/mo - if it's a hardship, message me on Slack and let me know.

Site44

Site44 is our hosting service for the class.

Here's how it works:

Pretty cool! Last time we used something called Firebase Hosting, but that turned out to be a huge headache. This makes hosting super easy.

$5/mo, with a 30 day free trial - if it's a hardship, message me on Slack and let me know.

Schedule Overview

Sessions 1-10: HTML, CSS, Bootstrap

June 5th - July 5th

This is pretty stuff, like content, layout, and design.

Sessions 11-20: Javascript, jQuery

July 10th - August 9th

This is interaction stuff, like changing the content on a page dynamically, listening for user interaction, and communicating with servers.

Grading

There aren't any formal grades!

There will be 20 assignments total - Each assignment is weighted equally (and they're relatively small). Attendance is taken. Run grades on @classbot to see your current grades.

I provide attendance, assignment completion information, and an internship recommendation to the internship placement services at the end of the course.

Office Hours

I'm pretty much always on Slack! I get notifications from all channels, 24 hours a day.

My dedicated in-person office hours are 2 hours before class - 5:30pm-7:30pm, Mondays and Wednesdays, here at Spark.

If that doesn't work for you, message me on Slack and we can find a better time.

Help! This class is too hard!

Don't worry - web development is hard. I still feel like a complete noob at it, every day!

Completing all of the assignments is meant to be a goal of this class, not a requirement. If you're struggling with the assignments, that's okay! Get as much done as you can. Showing ability to work hard and learn is far more important than making a number tick up.

In class, ask a lot of questions, even if they seem like dumb ones - other people have the exact same question, I promise.

Above all, continue Googling, write more code, and keep your ass in the chair until you make some progress!

Help! This class is too easy!

First, complete all of the assignments in the class. They might change a little bit as I update them, but they teach the same concepts for the most part.

Once you've completed all the assignments, I can work with you on some advanced assignments. Things like transpilers, preprocessors, templates, build pipelines, and frontend frameworks are all fair game.

If you're really really itching for a challenge, go check out https://www.stockfighter.io/ https://www.hackerrank.com/. If you'd like recommendations for other wargames to try, we can do that too.

What is web development?

Let's check out a couple pages for examples:

https://www.google.com/ ← Duh

https://www.facebook.com/ ← You're probably already on this one right now!

http://info.cern.ch/hypertext/WWW/TheProject.html ← This is the very first website!

http://www.bloomberg.com/graphics/2015-paul-ford-what-is-code/ ← This one's really cool. I highly recommend checking this out later.

How does the internet work?

That is...a bit of a difficult question. Let me abstract.

Let's say that I type https://hoff.tech/index.html into a browser address bar and hit "Enter".

Wow! That's a lot. The key takeaway here is:

Whenever we want to view a site on our computer, a computer out there on the internet sends us some files, like index.html.

What's the difference between front-end web dev and back-end web dev?

In front-end web development, we're only going to be modifying the index.html file that my computer gets.

In back-end web development, we'd be changing which index.html file the computer on the internet gives us. (For example, if it's a profile page for Ken, vs a profile page for someone else.)

Hey, did you notice? No matter if I want the page at https://hoff.tech/ or the page at https://hoff.tech/index.html, the same thing shows up. Interesting!

Fun fact: this is a pretty great interview question for software developers, and some folks have tried documenting the most complete answer.

Why should I be a Web Developer?

Everyone needs a website. Really! Even you!

Web developers can work at just about any company.

Web developers can also do consulting or freelancing!

It's easy to work remotely as a web developer.

You can work at all levels of the "stack" - you can work on the UI on the front end, the APIs on the back end, or a blend of both!

And, of course, web developers make a bunch of money. But that shouldn't be the primary reason that you do it :)

Software Engineers vs Web Developers: don't let people tell you that because you're a web developer, you're not a real software engineer. They do the same thing, just at different levels of an application.

Hey, can you build an app for me???

https://estimatemyapp.com/

Let's Make a Website!

Enough talk, let's do this

Atom

First, download Atom: https://atom.io/

Atom is a text editor, as opposed to a word processor, like Word or Google Docs.

Text files only contain characters (mostly just letters, numbers, and punctuation), and no text formatting (color, style, size, etc)

Alternatives include Sublime Text, Visual Studio Code, and Notepad++

(if you have a text editor you prefer, use that! I just like Atom)

Disclaimer: you will see me do lots of neat little keyboard tricks and hacks with Atom, because it's just so gosh darn cool. The problem is that I don't think about them anymore because I just do them out of habit. If you see me do something cool that you want to learn how to do, stop me so that I can explain!

Next

Make a folder for your site

Put it wherever you want on your computer. (Your Desktop is a great destination any time of year!)

Open Atom, and make a new file.

(⌘-N on a Mac, Ctrl-N on a PC)

Then

Put the following text in your new file:

<h1>Yournamehere's super duper awesome portfolio site</h1>

Save your file in your new folder

Name it index.html.

Double-click the file that you just saved

It should open your web browser...

HTML Tags

<h1>asdfasdfasdf</h1>

We just used something called an HTML tag to tell the browser what to put on our page. It created an HTML element.

Try switching it up

Edit your file, and replace your h1 tags:

<p>asdfasdfasdf</p>

What happens?

Don't forget to "reload" your browser!

What questions are there?

How to Learn Web Development

Assignment 4, Project 1: Portfolio Site

For your first project, I'd like you to create a simple portfolio site. Nothing too fancy!

You can put whatever you'd like on it! You can include things like:

Really, anything you want! I'm not "grading" these. You can submit them whenever you want.

If you'd like to see a couple examples of other portfolios, you can check them out on the readings for session 4. Some of these are pretty advanced! I just want you to create something simple that you're comfortable with.

A couple things:

While we're still here:

With our remaining time, you can work on the assignment for tonight, ask more questions, or try this short lab below!

Use some more tags!

Try creating a short "About me" site. Show it off, if you want!

(this is just an informal in-class assignment - no need to submit it later!)

Try out these tags:

Stuck? Remember "How to Learn Web Development"!

For next time:

Excelsior! 🚀

Appendix

Informational, unfinished, in-progress, or deprecated slides!

On Wordpress/Squarespace/Wix/stuff like that

Making a site with Wordpress/Squarespace/Wix is like making cookies from a tube, as opposed to making cookies from scratch.

You can get some amazing results from a tube, but if you try to customize it and switch it up, you're going to have a bad time.

Cookie dough in a tube Cookie dough from scratch

There's a couple reasons that I prefer building sites by hand, vs sites with a site builder:

Front End Web Dev vs Back End Web Dev

We usually make the distinction between the front end and the back end of a site or web app.

The front end of a site or web app is sometimes referred to as the client. It's the bit that's actually shown and stored on your computer - usually some HTML to show you specific content that you requested, CSS to style that content and make it readable and pretty, and JavaScript to provide interaction on the page and further communicate with the back end of a site or web app.

The back end of a site or web application is sometimes referred to as the server. It's stored on a large machine in a datacenter somewhere, and runs a bunch of complicated code that serves up web pages across the internet, as well as communicates with clients/web pages that want more information.

With complex web apps (Facebook, Bloomberg), the line between the front and back end is pretty fuzzy!

We're only going to focus on the front end in this class.

Front End Web Dev vs Back End Web Dev

Let's dive a bit deeper on the very first web site: http://info.cern.ch/hypertext/WWW/TheProject.html

The first site is pretty simple. You can click links, which take you to other pages on the site, but that's about it.

The front end of this site consists only of HTML (content) - it doesn't have any CSS (styling) or JavaScript (interaction and communication).

There isn't much going on with the back end of this site - when you click a link, the computer that the site is hosted on "serves a new page" and that's it.

Front End Web Dev vs Back End Web Dev

Let's dive a bit deeper on Google: https://www.google.com/

Google appears to be pretty simple - you can put your search in the text box, and it starts doing things.

That's interaction, and there's also communication happening with the computers that do the "indexing" of the internet (your personal computer isn't searching the entire internet every time you Google something).

The front end of Google is pretty complex - lots of HTML (content), CSS (styling), and Javascript (interaction and communication).

The back end of Google is unbelievably complex. Many, many things happen on Google's servers every time you make a search.

What's it like being a Web Developer?

At a company or "shop" (larger consulting company):

Freelancing or consulting: