Spark Boulder, Summer 2017
Session 0: Special Edition
Introduction, first HTML page
A little about me:
Head to https://classbot.hoff.tech, and click on the HTML slides for Session 0.
Navigate back and forth using the arrow keys.
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
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.
Check your email for an invite!
If you didn't get one, shoot me an email at firstname.lastname@example.org and I can resend it.
We're using Slack for:
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 :)
You will have 20 assignments total in this class, one for each session. Don't worry - they're all pretty easy!
Now, open up a Direct Message with @classbot on Slack.
Look for "Direct Messages" on the left sidebar, and click the
+button. Type in
classbotand hit go.
@classbot-betafor now :)
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.
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 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 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.
June 5th - July 5th
This is pretty stuff, like content, layout, and design.
July 10th - August 9th
This is interaction stuff, like changing the content on a page dynamically, listening for user interaction, and communicating with servers.
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.
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.
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!
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.
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.
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".
index.htmlthat exists at
https://hoff.tech/. Internet, do you know where I can find
22.214.171.124, which is probably some huge datacenter in Oregon, and finds another computer there.
126.96.36.199! I need the file
https://hoff.tech/." and sends the file to my computer.
index.htmlfile, and displays it in the browser.
Wow! That's a lot. The key takeaway here is:
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.
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.
"I have an app idea, know any programmers?"— Paul McKellar (@pm) December 11, 2015
"I have an idea for a song, know any musicians?"
"I have an book idea, know any writers?"
Enough talk, let's do this
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!
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)
Put the following text in your new file:
<h1>Yournamehere's super duper awesome portfolio site</h1>
Save your file in your new folder
Double-click the file that you just saved
It should open your web browser...
We just used something called an HTML tag to tell the browser what to put on our page. It created an HTML element.
h1stands for Heading 1. It's generally used to indicate the visible title of a page.
asdfasdfasdfis the text that we wanted to render as a Heading 1.
<h1>(the opening tag) marks the point that we want to start making text a Heading 1.
</h1>(the closing tag) marks the point that we want to stop making the text a Heading 1.
Edit your file, and replace your
Don't forget to "reload" your browser!
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:
submit 4 http://my-awesome-portfolio.site44.com/index.htmlon @classbot.
With our remaining time, you can work on the assignment for tonight, ask more questions, or try this short lab below!
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:
<h1>, <h2>, <h3>, <h4>...
<ol>, <ul>, <li>
<a>← can you make this point to another page of yours?
Stuck? Remember "How to Learn Web Development"!
Informational, unfinished, in-progress, or deprecated slides!
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.
There's a couple reasons that I prefer building sites by hand, vs sites with a site builder:
Sites made with a site builder are huge
You learn more about the fundamentals of the internet by building sites by hand
Sites built by hand are easier to customize and extend
We usually make the distinction between the front end and 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.
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.
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.
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 back end of Google is unbelievably complex. Many, many things happen on Google's servers every time you make a search.