Front End Web Development

Spark Boulder, Summer 2017

Session 19: Return of the Session

Social Network Front End Show-and-Tell, wrap-up/party 🎉


It's the end of the class! Freak out!

On August 23rd at 9pm (1 week after the class ends), report cards get generated!

Report cards include grades on all assignments, attendance, and links to projects:

Remember to check your grades with grades on @classbot!

Remember to create separate site44 apps for your projects so that potential clients and employers can see them!

The Social Network Front End Project

For your final project, I'm going to have you create the front end to the Spark Front End Web Development Social Network.

All of the students in the class are on the Social Network! You can create new posts, and everyone else in the Social Network can see those posts.

For your front end, you'll need at least 2 pages:

You'll need to make requests to the API to create and get posts on the Social Network. All of the API documentation is up at

Some notes:


More dumb fun web stuff

Really, really cool one today!

When you load the page, you get a fragment appended to the URL (a fragment is the # bit). This creates a new game, and sends some information off to the server, including unique info about your browser, so you can share a read-only URL with others. Every time you edit the page, it sends your edits to the server, and the server runs your garden continuously.

When you load a URL that already has a fragment, it loads up that specific game, and the controls if you’re accessing it from the original browser.

More from this guy + xkcd collab:

It's the last session WOOHOO

Who wants to show off a Spark Front End Web Development Social Network Front End?

Who wants to show off literally anything at all?

Any last things that you want to learn?


I'm going to this meetup! You should too! It's a great way to meet new people, new contacts who can give you jobs. Plus you might learn something! Hang out, eat pizza, drink beer, etc. Yay!

What happens after the class ends?

The Slack is going to still be around, and I’ll still be responsive on it!

I’ll add everyone to the #alumni channel on Slack so that we still have a place to hang.

It's possible that Spark will decide to run a Frontend Web Dev class again - if that happens, you may want to leave the #general channel so you don’t get excess notifications.

What happens to @classbot after class ends?

@classbot will still be around for the next month or so! If you still need to submit assignments, try to do it during that time.

I turn off @classbot when the class isn't in session, to save on hosting. But, I believe that you can still "wake up" @classbot to submit assignments if you need to - just navigate to and it should wake @classbot back up. (Fair warning, I haven't tested this.)

Future freelance/consulting/contract work

If you do freelance work for a client you’ve never worked with before OR for a nontrivial amount of compensation (>$500), I’d recommend signing a contract before beginning any real work.

You can use the Hofftech Standard Contract, but it's possible that I'll move my contracts and billing stuff over to Bonsai.

Obligatory Hofftech Pitch

If you ever need help with anything, say hi! Totally down to grab coffee and look at your code. (you obviously don’t need to pay me)

If you or someone you know is working on a charity, 501c3, or social impact project, let me know. I can usually spend an evening or two on the project in exchange for pizza and beer :D

And if you find someone that needs an app (or anything else) built, definitely get in touch! I’d be happy to hire you on as a subcontractor so you can make some money and get some more experience.

When you realize that web development is your life, forever

The End

It’s been awesome having you guys! Stay in touch!

You can always, always reach me at (or on Slack) for anything at all! Help with web dev stuff, job searching, news about your life, getting a beer to catch up, whatever! I love hearing about student life post-class.

I’ll miss you all :'(

How to be a Web Developer

  1. Look stuff up on the internet
  2. Make stuff
  3. Repeat

Excelsior! 🚀


Parallaxed Pugs: The Puggening!

Here's a dumb fun web dev project!

First, go download a crapton of pugs and put them in your project folder:

Then, create your index.html:


        .pug {
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            height: 100vh;
            max-width: 100%;

        .pug1 {
            background-image: url("pugs/pug1.jpeg");

        .pug2 {
            background-image: url("pugs/pug2.jpeg");

        .pug3 {
            background-image: url("pugs/pug3.jpeg");

        .pug4 {
            background-image: url("pugs/pug4.jpeg");

        .pug5 {
            background-image: url("pugs/pug5.jpeg");

        .pug6 {
            background-image: url("pugs/pug6.jpeg");

    <h1>oh my god look at all these pugs</h1>
    <div class="pug pug1"></div>
    <h1>i just love all their little squished faces</h1>
    <div class="pug pug2"></div>
    <h1>isn't pug such a funny word</h1>
    <div class="pug pug3"></div>
    <h1>i love pugs</h1>
    <div class="pug pug4"></div>
    <h1>pugs pugs pugs pugs pugs</h1>
    <div class="pug pug5"></div>
    <h1>it took me way too long to make this</h1>
    <div class="pug pug6"></div>
    <h1>YAY FOR PUGS</h1>