Front End Web Development

Spark Boulder, Summer 2017

Session 5: The Final Session (not really)

Client Project Kickoff: Working with Clients

More dumb fun web stuff

Web Design in 4 Minutes

This guy's portfolio page is pretty great too!

Project 2: Client Project

For your second project, I'd like you to work with a client to build something web-dev related for them!

The scope of your project is really up to you. I'd recommend building some kind of landing page or marketing site for the client - HTML, CSS, text, images, links, everything.

If the client wants you to improve on an existing site, it's possible, but I'd be careful - monkeying around with prepackaged Wordpress/Squarespace themes is a pretty easy way to get a headache.

If you've already got a client, great! If you need a client, I'd recommend first reaching out to @dannywalsh on Slack, and if you still can't find anyone, you can try emailing some of the folks listed on readings 9.

A couple things:

FAQ

Q: Do they have to pay me?

A: Nope! They don't have to. Part of the class work and all.

Q: Are they allowed to pay me?

A: Of course! (but make sure it's a small amount, otherwise you'll have to sign paperwork and stuff)

Q: What if I can't get it done in time for session 9?

A: I don't expect this to be completely done by Session 9! Your clients will likely be finnicky and temperamental, and delays in projects happen. Submit your site whenever it's all done, hopefully by the end of the class.

Q: Does the client have to use what I make?

A: Nope - the client is under no obligation to publicly use your work. If they would like to, they totally can!

Tonight: working with clients as a web developer.

First, I'm going to talk about general advice for being a freelancer and working with clients, and then I'm going to talk about specific advice for getting your client projects done for the class.

Most of this advice applies to people who are interested in doing freelance/consulting work, or would like to run a freelance/consulting shop. Regardless, cultivating these kinds of social skills is going to help you no matter where you end up.

Let's begin!

The client pipeline

To be a freelancer/consulting web developer in real life, you need to do 3 things:

  1. Talk to potential clients (go out and network, talk to every single person that you know and say that you're looking for work, hand out business cards)
    • (Keep track of them too, so you can keep following up with them! Trello is great!)
  2. Turn potential clients into real clients (sign a contract)
  3. Actually do web development for clients

Finding potential clients

Talk to EVERYBODY.

No seriously!

Everybody you know might have:

The best way that you can find potential work is by going to events. Meetups are great - pitch nights, entrepreneurial events, business events, all that kind of good stuff.

Rub shoulders, get contact information, and follow up with the people that you meet! Put them on your trello board, if that helps!

You may or may not find work at technical meetups - lots of companies want to come to those to pitch you to come work for them, but you probably won't find many nontechnical people who are looking for freelancers there.

For this class, we've made it easy - you can bug @dannywalsh on Slack to find a client that might need some web work done. If that doesn't work out, you can always contact someone on the list for readings 9, but that data's a little old. Feel free to use your own client (that isn't yourself) if you'd prefer too!

On the stereotypical computer science introvert

I can be a pretty convincing extrovert for about an hour or so a day. After that, I get a headache and I just want to retreat to my office to be alone.

For introverts, freelancing might kind of suck. Understand that at probably 20% of your time as a developer, no matter if you're an employee or freelance, is going to be spent talking to people. For freelancers, those people are more likely to be nontechnical.

For extroverts, freelancing might be pretty sweet - but remember that being a freelancer isn't all about shmoozing and talking to people all the time. You need to, you know, do some actual web development once in a while. And you need to spend enough time on it to be good at it, or otherwise people won't hire you.

Estimating

When a client comes to you with something they'd like built, their first question is usually:

How much will this cost?

This is a pretty hard thing to figure out. You can generally bill clients for projects in two ways:

In either case, you need to get good at estimating. Estimating is the art of saying "given these features that you want developed, it's going to take me X hours/days to build."

The only way to get good at estimating is to complete lots of projects, and regularly think about how long it takes you to do individual parts of projects.

....which brings us to the next question:

What's my hourly rate?

Set your hourly rate at whatever you want. It doesn't really matter, because you will inevitably set it too low.

You are way more valuable than you think. Web development is hard, and not many people have the patience to do it.

When in doubt, increase your rate by 10% after every successful project. If you're taking on more work than you can handle, increase your rate.

In general, you want to clients to be a little bit uncomfortable with how much your charging, but not so much that they look elsewhere. It's a fine line.

For reference, my current rate is $80/hour, with discounts for large projects. It's not uncommon for solid, experienced freelancers to charge $150/hr.

In general, never work for "exposure" (which is just a bullshit way of saying "free"). Of course, the class is the exception, because I want to have your skills be put to use without testing your ability to market yourself. However, if someone ever asks you to work for "exposure", hit me up, and I can point them in the right direction.

Landing a client

So you have a list of potential clients. You've met with them, they seem totally stoked to get you working on their project, they have an idea of how much it's going to cost, let's do this!

Sign paperwork!

If you want, you can use Bonsai, and just use their standard contract. I really like this contract - it's explicit about work ownership, background IP and my right to put the work on my portfolio.

Things that you'll want to think about with your client, and include in the contract:

Hopefully nothing goes wrong and you both walk away ecstatic with the results, but you should always cover your ass.

Your Client Project for the class: specific advice

A lot of this upcoming stuff still applies to paying clients, but looks a little different when you do work before/after a contract.

Because you're doing this work pro bono, you can just jump right in!

How to work with your client

It's actually really similar to being a web developer!

  1. Meet with the client, gather requirements and feedback
  2. Build something
  3. Repeat

Step 1: Meet with the client, gather requirements and feedback

First, arrange a meeting with your client - face-to-face is best, but video chat should be fine. You can set up a phone call as a last resort, but you won't be able to read body language or emotion as well.

Absolute easiest video chat software is http://appear.in/, but Hangouts and Skype work too.

In the meeting, you want to find out a couple things:

  1. Find out what they're currently using as a web presence. Facebook page? Twitter? Tumblr? Wordpress? What do they like about it, and what don't they like about it?
  2. What do they want their web presence to accomplish? To show people dates and times? Menus? Portfolio projects? Who is their site for? Customers? Potential employers?
  3. What other sites do they like or are inspired by? There's lots of great reference material from similar businesses, competitors or freelancers.

These kinds of questions help determine what kind of content, layout, and styling you should use.

Step 2: Build something

Start small! Get to something demoable ASAP. Create a draft on site44, so that you've got something the client can take a look at as you go.

Placeholder images, text, all totally fine. You'll iterate on this as you go.

Step 3: Repeat

It's scary as shit showing off something that you've made - it's gonna feel half-assed, and look kinda lumpy, and it's probably held together with popsicle sticks and glue, but show it to your client anyway.

Your client will like some stuff and not like other stuff, and give you feedback. Write it down!

Now you've got some concrete, tangible feedback on a concrete, tangible site - go improve it, and do it all over again!

Things that you will probably be able to do

Landing pages and Marketing sites - these are not web apps, and your client should understand that. These contain information about the client or the client's business, with information about products, projects, hours, contact info, or ways to get in touch with the client via social media, email, or a physical location.

Generally, these can be broken down into two formats:

Single-page sites - big long scrolling page with several sections. Each section consists of different info, images, links, etc. Generally only one big long scrolling page on a single site.

Multi-page sites - several different smaller pages, each with one or two sections of dedicated info. Each page can generally access the other through a navbar or something.

Things that might be too much work

Blogs & product pages - these are generally updated pretty frequently. I'd stick with links to Medium or Shopify.

Shopping carts, checkouts - This requires significant backend coding. If they need something like that, I'd recommend Shopify.

Contact forms - also requires some backend coding; e.g. a server to actually manage and send emails. Stick to links to social media.

After playing around with this for a while, I found http://formspree.io/, which is a service that lets you set up client-side contact forms super easily. Definitely not required to use this - if you'd like to get it set up on your (or your client's) site, try it out! Hit me up if you have any questions at all.

Assets that you will need from your client

Images - product images, team photos (group and individual), background images, office images

Text - Slogans, product descriptions, customer testimonials

Links to social media - Tumblr, Facebook, Twitter, Medium, Instagram

Embeds

Embeddable elements can make your life easier!

They usually have some options to customize them - poke around in the documentation!

Google around to find other things that you can embed.

If you want to embed something specific, and they don't have embeddable elements, then you might be able to use http://embed.ly/ to do it. Ask me if you need help.

Setting up your site44 site with a custom URL

You don't have to do this! But if your client wants to use a custom URL (not a site44.com one) and you feel comfortable, go for it!

  1. Buy a domain (I usually use Namecheap)
  2. Go into your Namecheap dashboard, and click "Manage" on the domain that you're trying to connect.
  3. Head into the "Advanced DNS" section, and find the "Host records" section.
  4. Add new record -> CNAME record
    1. Host: www
    2. Target: domains.site44.com
    3. Hit the checkbox to save
  5. Head back to site44, and create a new site with your own domain.
    1. Instead of using a site44.com domain, put the name of your site (www.your-site-name-here.com) in the "Use your own domain" section, and click create.
    2. It might not validate right away! The internet is slow sometimes.
  6. Once it validates and you create the new site, copy all your files into your new dropbox folder.
  7. Marvel at the vastness of your ultimate cosmic power!

What questions are there?

Stuff for tonight:

How to be a Web Developer

Excelsior! 🚀

Appendix

https://toggl.com/worst-client-types-infographic