Instructor 101 Guide

How to egghead - 101 Instructor Guide

What is egghead?

egghead.io is a community where web developers learn from each other through short lessons and courses teaching the tools of our trade.

Our instructors hail from every continent but Antartica. (That’s next.) egghead instructors are platform-agnostic, learning-enthusiastic, and badass by definition, however they define it.

egghead was created by a small team of web developers who know how essential it is to keep learning. There’s always a new tool or framework to figure out. We made egghead so the experts—that is, anyone with a skill—can create a lesson to share their knowledge with people who need it.

01_sharing_knowledge

Have 10 spare minutes? You can learn a skill.

Have a skill? You can be an instructor (and get paid for it).

What are lessons like?

egghead lessons are bite-sized, practice-ready video tutorials for busy web developers.

Every egghead lesson consists of a single screencast that’s 1–10 minutes long. You’ll record your screen as you talk through a code example, just like you’re explaining how you solved a problem to a coworker. The goal of each lesson is to give learners a specific piece of knowledge they can use right away.

There’s an art to teaching concepts as an egghead instructor, but you don’t need to be nervous. Or shy. Just be yourself, no matter who you are or what your lesson is about. Just be sure to edit out the “umm”s and “uhh”s.

What makes egghead different?

We believe variety is the spice of learning. No two people learn the same way, so no one person can be the de facto teacher of anything. You’ll find two, sometimes three egghead lessons covering the very same topic. If one lesson doesn’t offer a breakthrough moment for a learner, we bet another will.

02_diverse_instructors

So if your dream topic is already taken, it’s not taken at all. Go ahead, press record, and share what you know from your perspective.

Who should be an instructor?

You should be an instructor. Here’s why.

How do I get started?

If we sent you an invitation, we’re so glad you’re learning more. If you haven’t accepted yet, sign up right here right now. After you finish reading this guide and know egghead style like the back of your hand, you’ll record a 30-second lesson snippet that we’ll help you shape into your first published lesson.

If we haven’t sent you an invitation, we’re equally glad to see you. You can audition by recording a 30-second lesson snippet. (No pressure, deep breath.) Read through this guide, hit record, and introduce us to your skills and way of doing things.

More on creating and uploading your 30-second videos

No more questions?

Great! We have more answers anyway.


Getting Started

Why be an instructor?

We get it. The last thing you need is another commitment. (You probably see the word “commit” in your sleep.) Good news: egghead instructors have zero obligations. It’s a lowkey side hustle that can seriously pay off.

You get paid

egghead instructors get paid every time someone watches one of your published lessons. More accurately, we pay you monthly based on your views for the preceding month. We market our content quite a bit, but feel free to share your lessons widµely.

03_eggo_raining_money

The more content you publish, the more money you’re likely to make. More on payment.

You’re an expert

You heard us! You’re an expert. egghead instructors aren’t necessarily senior developers or technology directors (though some are). They’re just people who love writing code. You’re an expert when you share knowledge other people are looking for. So share it!

Cement your knowledge

Explaining something helps you understand it better. If you’re learning a new skill or framework, there’s no better way to nail it than to record yourself talking about it (and re-record and edit until the holes in your logic disappear). Pop quiz yourself and make some money while you’re at it.

Make career moves

egghead instructor looks 👍 on a resume. Published lessons are portfolio gold. egghead gives you a platform—and all you need to do is give your knowledge a voice. We’ll amplify it for you.

04_career_advancement

Get egghead.io access for life

Here’s a serious perk: Every egghead instructor gets a lifetime membership to egghead.io with access to all of our premium lessons and courses. That’s a lot of learning to do, with lots more to come.

Work with good people

You should always do your due diligence before partnering with any organization. But we give you our word: egghead is a low-key company whose sole focus is making web developers better at what they do.

Most of us at egghead HQ are developers too, so we know how busy you are. We’ll support you, we won’t give you deadlines (seriously—you produce content only when you want to), and we’ll pay you fairly and quickly. Honestly, egghead is the company we always wanted to work with, so we created it for ourselves and for all the smart, badass developers out there.


Joining Slack

05_slack_eggos

Slack is where we communicate.

Once you’ve signed up for egghead and created your instructor profile, you’ll receive an invitation to our Slack channel. That’s where you can meet other instructors from all over the world, talk shop, and get all the support you need from the egghead team. As an instructor, you have access to the egghead Slack for life. Bring your best emoji game.

06_emoji_lineup

Right when you join Slack, we’ll create your private instructor channel. That’s where we’ll share feedback with you, hash out lesson ideas, and answer any questions you have.

When in doubt, Slack!


Meeting your coach

Your success as an instructor is the #1 priority at egghead—and we know success doesn’t come without support. You’ll need some guidance to create the world-class screencasts our members expect. That’s why we pair you with an egghead coach right when you start.

Your coach is a seasoned instructor who will help you nail egghead style through ongoing support, feedback, and brainstorming. Got questions? #ask! Big stuff, little stuff, rough drafts, fire away.

07_coach_gif

Slack with your coach to:

  • Brainstorm lesson ideas
  • Solidify the theme, scope, and goals of a code example
  • Get a second pair of eyes before uploading screencasts
  • Talk through feedback
  • Get answers on administrative stuff like contracts, equipment, etc.

Even after you’ve published a few lessons, your coach is available whenever you need them.

Plus, you can reach out to egghead's founders John Lindquist (@john) and Joel Hooks (@joel) with any questions or concerns. John and Joel are 100% dedicated to you and the rest of the egghead instructors. Slack us!


Create your 30-second lesson

We want to help new instructors get the hang of egghead style as fast as possible. We know you won’t nail it right away—that’s okay! That’s expected!—so instead of creating an entire lesson, we ask you to record a 30-second video first. That snippet will tell us plenty, and we’ll be able to give you feedback on your code example, instruction style, and the technical stuff.

08_30second_lesson

What we're looking for

Don't be too concerned about subject matter, audio, or video quality at this point. You want to dial in your:

09_lesson_basics

Our technical guide has you all the details you need to confidently press record. Think you have it figured out? Share a screenshot of your screen setup on Slack.

Pick a topic

...but of course, you’ll need to cover something specific. Since your video isn't intended for publication, keep it simple. No need to solve the internet just to impress us! Just pick a topic other web developers would find interesting, in the language of your choice. Python, Ruby, Rust, whatever you’re feeling.

Some quick ideas:

Bracket Adding elements to an array

Star Using variables in JavaScript template strings

Equals Centering elements in a div

Need help? Hit us up in your private Slack channel.

Start with the code

11_start_with_code

Before you record your clip, create your example: a before and after of your concept explained in code. You might provide the code in two states with a small diff explaining at a glance what your 30 seconds will teach. For simple topics, the before might be a blank screen—totally fine.

Need a gut check? Share your code on Slack using a Github gist.

Hit record

You've got a topic. You've got the code. Your screen is setup and ready to go.

Now, you need to record your screen as you take your code from its start state to its finished state. Be efficient! 30 seconds goes by fast.

Don't worry about it. Don't edit it. Don't fuss over it. Just let it start the conversation.

Share your recording on egghead.io

You can upload your video by submitting an application on egghead.io.

gold_invitation

If we invited you to be an egghead instructor, you’ll then finish your egghead registration and be prompted to join Slack if you haven’t already.

We hope you’ll turn this snippet into your first published lesson, or you might start fresh with a whole new topic. Either way, you’ll come out of this exercise understanding the advantages to recording in small chunks with a tight feedback loop. And then you’ll be ready to record for real.

13_audition_stage

If we didn’t send you an invitation, welcome! We’re thrilled you want to join our team of instructors. After you’ve uploaded your video to egghead.io, we’ll review it. If we like the direction your video is headed in, we’ll send you an invitation.

Pro tip: You’ll have a better chance of submitting a 👍 30-second video and getting invited to egghead if you read this whole guide. So keep reading! Then show us what you got!


Getting feedback on your video

Think of your 30-second video as a very rough draft. It won’t be perfect—and it shouldn’t be! It’s a gut check to see how we can help steer you toward egghead style.

Questions? Just #ask.

We’re here to help you. Before you record your video, use your private Slack channel to fire over any questions or works in progress, like:

  • Lesson ideas. We can help you brainstorm or fine-tune an idea you have. (Chances are, we’ll suggest you scale back the scope of your example. Your lesson should cover one topic and one topic only. No more, no less.)
  • Your lesson title and summary. These should be concise and hyper-focused. Before you write any code, make sure you’ve chiseled your lesson idea until it’s simple and able to be tackled in a short video.
  • A draft of your code example. Share it over screen sharing technology with your coach on Slack. Walk them through the steps it took to create the example, and think through any changes your coach suggests.

We’re all about supportive, ongoing feedback at egghead, so when you’re ready to press record, you’re really ready.

An illustration would work here too 🙂

Feedback

Before you upload your video (if we’ve invited you to be an instructor) or tweet it at @eggheadio (if you’re auditioning), ask yourself:

  • Is my screen set to 1280x720 (720p)? (In HiDPI, if possible?)
  • Is my code example easy to understand?
  • Did I guide the viewer’s eyes with the mouse?
  • Did I use those 30 seconds to share useful insights?

We’ll use those questions to guide our feedback, which we’ll share with you over Slack.

After that, we may go through a few rounds of rerecording and feedback until we feel you’re ready to go off and record your first lesson.

Remember: We want you to succeed. We want you to absolutely crush it. Feedback—especially right when you start with egghead—will help you get there.


Receiving your equipment

If you’re looking at your laptop and wondering how you’ll juke the microphone settings to create professional-quality sound quality...no need. We got you!

Once you've created a draft lesson that is almost ready to be published, we’ll ship you a case packed with audio recording toys. With our compliments, of course.

You’ll get:

  • K & M 23150-500-55 Tabletop Microphone Stand with 5/8" Threaded Connector and Mini Boom Arm
  • Shure BETA 87A Microphone
  • Shock Mount to attach the mic to the stand
  • Shure X2U XLR-to-USB Signal Adapter
  • 1 XLR Cable to connect the Microphone to the USB Interface
  • Badass by Kathy Sierra

Our technical guide covers setup and how each item works.


Getting paid

Yes! egghead instructors make money! You receive royalties for all the views your lessons and courses get.

How much you get paid can range from "lunch money" to "paying the bills!", and primarily varies with the quality and quantity of what you publish. Courses take the most effort, but they also make the most money. Even a single lesson can net you rewarding royalties for a long time; with a keyword-rich summary and title, a lesson can surface in search engine results years after it’s published.

$$ BREAK TO DO THE MONEY DANCE $$

The best way to make money is to produce interesting, useful content. Quantity is good, but quality is better. Good content sells itself.

We don't produce sponsored content or run ads on a regular basis. It’s all about eyeballs. 👀

How royalties work

Royalties are paid at the beginning of the month, and reflect how many 30-second segments viewers watched in the previous month. We use PayPal or direct deposit to distribute royalties.

The amount you’re paid depends on the overall gross subscription revenue, and how many 30-second segments were watched in total. We use this basic algorithm in Ruby:

egghead_monthly_revenue ( your_segments / total_segments ) royalty_percent

royalty_crown

When you start making one-off lessons, the royalties will be small. But stick with it, keep producing, and your monthly royalties could hit four figures. Cha-ching.

Make more money with courses

After you’ve made a few standalone lessons and gotten the hang of egghead, you’ll probably put on your entrepreneurial thinking cap. How can you leverage your new skills to make the cash flow?

Courses are the bread and butter of egghead.io. Developers looking to learn want curated chunks of information, and we’ve found that they’re willing to pay for it. Grouped lessons are more likely to be found and watched than one-off lessons, making their royalties far greater than those of standalone lessons.

You won’t be crafting courses right out of the gate, but stick with it. The payoff is worth it.

Keeping it up

Ongoing income is the best. But it takes ongoing work.

Many people create a lesson or two, then stop. There are a variety of reasons people stop making lessons:

  • Way too freaking busy!
  • It just isn't for me.
  • It's hard AF.
  • I can't think of what to record.
  • The money’s not coming fast enough.

One of our primary motivations for creating egghead was to help smart humans get reliable recurring income by sharing their knowledge. This kind of income can change how you think of employment. If you're making $1,000 a month from some content you made a year ago, what can that do for you? That's rent! (Unless you live in the Bay Area or NYC—sorry!) egghead royalties could be the difference between staying in a high-paying gig you hate and taking a position you truly love with an organization that can't afford talent of your caliber. How great would that be?

piggy_bank

Hopefully you’re already in that position, but if not, we want to help you get there. We're totally obsessed, and will do everything we can to support and amplify our instructors. We're in this to have a job that we love, work with amazing, diverse people across the globe, and help people improve their lives by learning how to develop software.

If you want to create a sustainable passive income stream by creating useful learning content for fellow developers, stick with us. We’ll make it happen for you.


Creating Lessons

What makes a great lesson?

Imagine calling a coworker over to your desk to show them something cool you just learned. Would you make a slide deck? Use star-dissolve transitions? Nah, you’d just dive right in.

That’s what egghead learners want you to do. They’re looking for concise, efficient information that respects their time and shows them how to do something. Nothing fancy, just badass.

In the spirit of show, don’t tell, this free course by egghead cofounder John Lindquist shows what makes a great lesson: Record Badass Screencasts for egghead

It’s focused

An egghead lesson discusses a single topic. Don’t stray—stay on point and be concise.

Learners should walk away with a better understanding of the concept covered in the lesson. In just a few minutes, they should increase their vocabulary and learn through a high-quality example.

John Lindquist - Stay on topic

https://www.dropbox.com/s/2p6opnh0qn8r9ao/egghead-stay-on-topic.mp4?dl=0

Its title and summary are precise

Writing concise titles and summaries is the best way to narrow the scope of your lesson so it’s hyper-focused on a single topic. (They’re also the best way to cash—and we mean cash—in on search terms. Mentioning relevant technologies = SEO = 💰)

Your summary should quickly tell learners what they’ll gain from your lesson. You could start by writing, “In this lesson, you will learn to...” One or two sentences are 👌

Your title is the summary of your summary. It should finish the thought, “How do I...”

More on writing titles and summaries

The code example is simple and effective

The code example is arguably the most important part of a lesson. The learner should be able to look at the difference between the before and after code to understand how you’ve applied the concept in the lesson.

If your example is airtight, it will do the instructing for you. Your narration will just serve to support it. Use the “show your work” trick to see if you’ve shown enough.

John Lindquist - Show then maybe explain

https://www.dropbox.com/s/5fxdwvnttkxb2lr/egghead-show-then-maybe-explain.mp4?dl=0

It cuts intros, outros, and stage-setting

No “hi, my name is.” No “in the previous lesson we learned about...” Each lesson should exist on its own without any stage-setting—just like this video:

https://www.youtube.com/watch?v=CT_OJZCYncA&

This video doesn't talk about the chicken recipe it covered for the dinner course. It doesn’t explain why you may need a cheesecake-stuffed cookie cake. (Attending a party? Stress-baking?) It doesn’t explain what sugar, cookie dough, and ovens are for the .00001% of the population that don’t already know. It just jumps right in.

When creating your lessons, assume your viewers have working knowledge of the topics covered or will pause the video to learn on their own time. Don’t waste time in your lesson reinventing the wheel (or explaining what wheels are and why they’re helpful).

John Lindquist - Avoid intros and outros

https://www.dropbox.com/s/6x6o608fwiwv28b/egghead-avoid-intros-and-outros.mp4?dl=0

It guides the eyes

Your audience is trying to follow what you're saying. It's crucial that you keep them with you by guiding their eyes.

Highlight the area of the screen you're teaching. Use the mouse to select/click/drag or anything that creates a sense of movement to tell them "You should be looking here!" Remember, this is a video, they're here for the movement, so keep it movin'!

John Lindquist - Guide their eyes

https://www.dropbox.com/s/izvlyf41j6kk6kw/egghead-guide-their-eyes.mp4?dl=0

Slack us!

Still foggy on egghead style? Your coach (and the rest of us at egghead HQ) are here to clear the air. #ask!


What should you teach?

Quick! Come up with an idea! Unfortunately, it doesn’t work that way.

As with writing or drawing, instructing about anything can be daunting. Anything is too big a concept to wrap your head around. That’s why we need prompts.

Tell someone with writer’s block, “Describe your favorite food.” An hour later they’ll have an essay on cheeseburgers. Tell an artist, “Draw a cheeseburger,” and they’ll draw you a cheeseburger good enough to eat (and write about).

cheeseburger

The same goes for egghead lessons. Give yourself a prompt. Make it small and specific.

Finding ideas

You’re surrounded by inspiring ideas for your next lesson. A few places to look:

slack_icon #egghead-lesson-ideas. The egghead Slack is a great resource when you’re stuck. This channel was specifically created to help get you out of a creative jam. Hop in and see if anyone has ideas to spare—@joel usually comes through.

os_icon Open-source projects. If you work on an open-source project, contribute to one, or even just have a favorite open-source tool, you can often find great themes for a lesson in the work being done.

trello_icon Trello cards and dev Slack channels. What particular problems are other developers solving, and how? There’s a lesson.

stackoverflow_icon Stack Overflow. This is a trove of pain from which to develop useful examples. A quick search reveals questions and answers that would make excellent lesson topics.

Problems you’ve solved. What web development challenge did you recently figure out? Tell learners how you did it.

notes_icon Your own education. Are you learning something cool right now? The best way to solidify what you learn is to teach it.

Plain old Googling is helpful, too. Type something like “Laravel how do I” and Google will autofill with popular search items. Lesson idea gold!

Be super-specific

How do I think of good lesson ideas?

You just answered your own question. Use the phrase “How do I” to zero in on a specific topic to cover.

“How do I...debug angular applications with Chrome DevTools”

Or...

“How do i...update ref attributes in React components”

Two lessons ready to record!

But beware—this trick could lead to some overly ambitious ideas, like:

“How do I build an app with Ruby”

You’ll need a few days to cover that one. Think much smaller, and dive into a topic you can thoroughly cover in a few minutes, like:

“How do I create a component with React on Rails?” That can be a lesson. In fact, it is a lesson.

Write it and code it

Think you have your lesson topic? Great! Now you need to stress test your topic to see if it’s focused enough.

[Image: Something like detailing a car...showing very precise work.]

Create these three supporting materials:

  • Your lesson title. Use that “How do I” trick. Does it work for your topic? Does your title cover one thing clearly—and can you cover that thing in a short amount of time? Then you’re good.
  • Your lesson summary. If it’s too long or requires a lot of detail to summarize, you might need to reduce the lesson’s scope.
  • The code example you’ll use to demonstrate the lesson concept. It should be easy to run with very few simple steps. If it requires several steps and screens—and if you anticipate needing to give a lot of background and contextual information to explain those steps—tighten your scope.

Think of these items as the outline you’d create before writing a school essay. If that outline gets too long and ambitious, you need to reel in the scope a bit.

That lesson already exists? Do it anyway!

We have zero qualms about repeating topics. Actually, we encourage it. No one knows exactly what you know or phrases things in your particular way. What’s your take? Tell us! Tell everybody.

Slack us!

Truly stuck? #ask us for a jumpstart, or come up with some ideas and we’ll pare them down.

Remember: Think small. Don’t explain how to build the internet. Just a small corner of it.


What if a lesson already exists?

Do you have a great lesson idea, but someone else got to it first? Make that lesson anyway.

Boy, egghead.io sure has too many lessons on the fundamentals of React!

This was said by nobody, ever. We firmly believe that hard topics need the fundamentals covered by good examples. A lot of them. It helps people learn!

Learning in layers

At egghead, we want to cover concepts in layers. We want to tuck our members in under cotton, wool, and down and help them fully and completely understand complex concepts one bite-sized lesson at a time.

Having one “expert” rule a concept only gives learners a one-sided, one-dimensional understanding of it. Imagine if only one songwriter in the history of music had written a love song, and all the other songwriters had said, “Oh, that concept has been covered before.” We’d be robbed of so many musical love stories, and the essential soundtrack to our own.

So what’s your take on the concept? It’s an essential layer. Add it to the mix.

Diversity on both sides of learning

One of the things that makes egghead different from other learn-to-code services is how much we prioritize our instructors’ diversity. Our instructors live on six continents—Antarctica, you’re next!—and they all have different backgrounds, perspectives, and approaches to coding. That’s awesome!

Our instructors’ diversity also reflects the learners who watch our lessons. One instructor’s way of explaining a concept might not break through to someone, but another instructor’s might. It’s all about the code example you create, your unique turns of phrase, the you that you bring to it.

Beginners are experts, too!

Even if you’re relatively new to a concept, your perspective is important. There’s no replacing the beginner’s mindset—when concepts are new and exciting, when you see them with fresh eyes and clarity.

So even if someone more “experienced” has made a lesson about that concept, make your lesson anyway. Other beginners might learn better from you than the seasoned veteran.


Write the title and summary

Naming things is hard. Naming things is vital.

Giving your lesson a solid title and summary before you hit record helps you define the scope of your lesson. With strong titles and summaries, you also make your content more useful and meaningful to the thousands of developers who will watch it.

Narrow your scope

There are thousands of lessons on egghead that learners find via site and Google search. The best way for them to find your lesson is with a robust, descriptive title.

Let's walk through the process of choosing your subject matter, then writing your title and summary.

Start with an idea:

“I've been working with React a lot lately. Something interesting about React components and their lifecycle methods that fire at particular times?"

That’s a cool concept. You might quickly think of something like this for a title:

React Component Lifecycle Methods

That’s a tempting title! But it's too broad for a bite-sized lesson. Let's narrow the topic down:

"Reading about lifecycle methods in the React docs, I've noticed that *componentWillReceiveProps* isn't as clear as some of the others."

Now we have a target!

Summarize the concept

Continuing to drill down on componentWillReceiveProps, we can write a quick summary of what the viewer can expect:

In this lesson, you will learn to dynamically update a React component's state based on the properties that are passed into it. We will take a look at the React component componentWillReceiveProps lifecycle method, and how to use it effectively.

That’s a strong, succinct concept that you can reasonably cover in a few minutes. ✅

Write your title (the summary of your summary)

Here's a trick to coming up with a good title: Think "How do I..." and then summarize your summary.

You wouldn't say "How do I... react component lifecycle methods: componentWillReceiveProps.

Instead, you would say something like "How do I... use componentWillReceiveProps to manage react component state?”

Use componentWillReceiveProps to Manage React Component State

That’s a strong, specific title that tells learners what to expect from the lesson. People watch screencasts to solve specific problems and learn specific things, and good descriptions help them find the answers they’re looking for.

So our title and summary are:

Use componentWillReceiveProps to Manage React Component State In this lesson, you will learn to dynamically update a React component's state based on the properties that are passed into it. We will take a look at the React component componentWillReceiveProps lifecycle method, and how to use it effectively.

✅✅


Create your code example

The code example shows your concept in action. It’s the foundation of your lesson.

A good example is simple and focused on one ultra-specific concept. After watching your lesson, the learner will have access to the code in Plunker to play around with, so your example should be easy to run with in just a few simple steps without in-depth knowledge of a specific domain.

What should your example look like?

Your code example will almost definitely have two different states: a start and a finish.

The start state could either be:

  • a blank screen, if you’re starting from scratch
  • a structured shell that you add to

The finished state will reflect the concept that you’ve just explained.

The difference between start and finish directly defines the scope and complexity of the lesson. If you can’t get to finish in under 10 minutes or without using complex steps, you should probably revisit your title and summary and scale back a bit. Don’t try to boil the ocean!

If there’s more you want to cover...

There’s always more to learn. Always. We can’t teach it all, and we especially can’t teach everything in a single lesson.

If you’re an experienced egghead instructor with a few published lessons and you want to keep expanding on your example, it might be time to create a course. With courses, one example is used as a connective thread throughout several lessons. Courses are a great challenge, and they often make you more money. 💰

Your code embedded

Every egghead lesson page has a spot for the viewer to find the relevant code. Depending on the lesson’s context, the code may be linked to a GitHub repo/gist, or embedded from one of several popular “code playground” sites like Plunker and CodeSandbox.

Embedded examples let learners play around with your code to apply what they’ve just learned. It’s a good reminder: Though your lesson may feel like a performance, it exists to help other web developers learn. For more information, check out Sharing your code.

Slack us!

Need help with Plunker or want a second pair of eyes on your example? Share it with your coach on Slack. They’ve seen hundreds of examples—some extraordinary, some ehh—so don’t be self-conscious about your coding skills. Your coach will kindly point out anything to fix or ways to tighten your scope.


How to instruct

You’ve nailed your title, summary, and code example. Now it’s time to figure out what you’re going to say.

The “instructor” title can feel daunting. Don’t let it! If you’ve ever shown someone how to do something, you’re an experienced instructor.

Speak to support the code

In your lesson, you should show first (with your code) then maybe explain (with your voice). Your narration is quite simply the explanation of the changes you’re making to your code as you take it from its start state to its finished state.

You won’t be asking questions that teachers typically do, like “What themes can we draw from this?” You will simply relay information, explain how and why you did what, and let the learners soak it in. Keep it simple and focused on the code.

Write a script or outline

Your narration should sound casual but informed, like you’re showing something to a coworker. Some instructors find it helpful to write out a script beforehand so they’re never in doubt of what to say. It’s a great way to cut the “umm”s and “uhh”s and make your explanation as tight as possible.

If you’d rather sound more conversational, less scripted, write out an outline. We’re talking bullet points—the keywords you want to say, the points you want to hit. This approach may require you to edit a few seconds of dead air here and there, but the published narration will sound polished.

Do a dress rehearsal

Have you ever conducted a workshop? Talked at a conference? Presented to your sixth grade class? You know how essential it is to practice your talk before showtime.

Same with egghead lessons. Before you hit record, explain your code example to yourself. Out loud. Enunciate! Be confident! Believe you’re the most qualified instructor in the history of egghead!

You’ll probably trip over your words. You might realize you know how to do something but not how to articulate it. That’s okay—write notes to yourself and put your knowledge into words.

When it’s time to record, you’ll be more than ready.


Speak concisely

By now, you know the drill: egghead lessons are short and to the point. That goes for the videos, which should be 1–10 minutes long. It also goes for your narration. Less is more.

Consider this example:

Hello! Before we get started using Webpack you are going to need to install node. We are going to visit this URL and find the link to install it. Now we press "download" and we should get a file. We can now open that file and extract its contents. Now that node is installed, we can use npm to install webpack globally. Great. Now that webpack is installed globally, we can use it! Open up Sublime or your favorite editor to start working on the config.

Holy backstory! If you think back to our cheesecake-stuffed cookie cake example, we don't have to explain or justify each step in the instruction. We can assume we’re delivering content to smart, capable humans who can fill in some blanks. We have to. There’s instructing to do, and the clock is ticking.

Without the over-instruction, we have a much more concise, energetic start to the lesson.

We've got node already installed. Use npm to install webpack. Now run init and open the config to edit it.

Note how active those sentences are: install webpack. Run init. Open the config. Those are instructions.

How much personality can we bring to our lessons?

Bring all your charm and favorite idioms to your narration as long as they support your code example. That’s what egghead learners come to see: good code. Use the “show your work” trick to determine if you should talk less, code more.


The “show your work” trick

egghead lessons are concise by definition, but there’s another reason to keep your lessons sharply defined.

Too many ideas in one lesson means you’re glossing over concepts. Let’s say you mention “condition X could crash your app” because you want to cover your bases, yet you don’t take the time to really get into that subject. All you’ve accomplished is alarming your audience without giving them any solution.

Show, don’t tell

Show your work! You probably heard this when your high school math teacher forced you to write out the steps to a solution to get full credit for your answer.

It applies to coding instruction, too. The simple act of typing something out, highlighting a block with your mouse, or logging something in the console makes concepts infinitely more approachable.

If a user sees you walk through those steps, they gain confidence that they can do it, too. If they only hear you talking about concepts, they can’t readily tie the concepts back to the code. Worse yet, they might stop paying attention altogether.

Watch on mute

Here’s the trick: Turn off your audio and watch your lesson without sound.

It should be obvious from the visuals what you’re teaching. You may notice periods of 5+ seconds where nothing is happening. “Nothing” usually means you’re getting off-topic and thought it would be tough to show what you’re talking about. When you catch a section of “nothing,” write down the topic you weren’t showing. Save it for another lesson!

With this one trick, you’ll quickly turn one lesson with a lot of tangents into a focused, concise lesson about one topic. Or if you’re interested in creating a course, those tangents could each be a separate lesson.


Record and upload your lesson

Now that you know how to be concise, narrate your lesson, and show your work, it’s time to record for real.

Recording your screencast

We’ve put together an entire Technical Guide to help you record your screencasts. Find out how to:

Okay, that handles the specifics of recording. But the word record is so...official. What if you mess up?

  • Make mistakes! Your video isn't a live presentation. Mistakes and restarts are fine. Sometimes you need to cough, kids run through, a train rolls by. Edit it out later.

  • Stumbling? Rambling? Pause and think it through. Pauses are SO easy to edit out.
  • Slow down. Newbie instructors tend to rush through their lessons. Be slow and deliberate so learners can follow what you’re saying. Slowing down also helps your mouse keep up with your voice.

If you want a second pair of eyes before uploading your lesson, reach out to your coach on Slack. Or go ahead and upload, and you’ll get feedback after that. Remember, we’re here to support you and help you succeed!

Upload your lesson

When your draft is complete, upload it to egghead.io. When you upload any lesson video, it’s automatically processed to make sure its audio is in stereo, the resolution is as expected, and that it’s uploaded to the appropriate storage channels.

You’ll almost certainly get feedback, ❗which isn’t the same as criticism❗ . Your coach knows exactly what we’re looking for and how to tweak lessons to get there. As you go through the editing process, ask your coach to screen share with you so you can get some guidance for the first pass. This can save you hours of trying to figure things out on your own! 🙂

Feedback in hand, you’ll be able to edit and update your video. When your coach gives you a thumbs up, you can update your lesson video for final review and publication.

Sometimes this can take a few minutes. If an hour goes by and your lesson video still isn’t visible, let us know!

Lesson review and approval

Once you complete all the above steps, your lesson will be reviewed for approval. Reviewing means an experienced egghead instructor—someone other than your coach—will watch your lesson and provide feedback. It’s not uncommon that your lesson will require a couple of updates. Just record the required changes and replace the lesson’s video on egghead.

Then we publish! 🍾


When we’ll publish your lesson

You’ve made it to the finish line. Hooray!

Once you’ve uploaded your lesson and gotten the official thumbs up, your lesson enters egghead’s lesson publishing queue.

The queue automatically publishes lessons from top to bottom. We publish several times per week and sometimes daily, depending on how many lessons are in the queue. This way, we make sure we’re keeping our subscribers happy with a steady stream of great content.

New instructors

Lucky you—we move new instructors’ lessons to the top of the queue. This gives you a quick win after going through the process of recording your 30-second sample, making edits, recording your lesson for real, making more edits, and finally getting that coveted approval.

You’ve come a long way. Celebrate!

Experienced instructors

When an instructor has 12 published lessons, they gain the ability to review, approve, and publish their own content! Hot damn!

We trust you to make sure the quality of your lesson is high. You can still ask for review if you want it, or you can simply add your lesson to the publishing queue by approving it like a baller.

Sharing your lesson on social media

After publishing, lessons are added to egghead’s social media sharing queue. This drives a lot of eyeballs to our lessons—our Twitter account has over 45,000 followers.

That’s it!

You did it. You’re a published instructor.

Ready to do it all again?


Creating Courses

Why create a course

After you've created 5 or so stand-alone lessons, it will be time to start discussing your first course.

Courses are the bread and butter of egghead.

A course is a composed set of bite-sized lessons. The course itself should be bite-sized, covering a single topic in depth through a sequence of individual lessons.

The lessons in a course can be enjoyed and understood solo—but together, those lessons allow learners to follow a collective thread and understand a topic in much more depth.

A course will include:

  • a robust summary that can include links to pre-requisites and other resources
  • a list of all the other lessons in the course
  • course notes in the form of a GitBook the community can build together
  • an "enhanced transcript" that assembles all of the transcripts for a course into a usable document that allows the learner to read the entire course as a book
  • the code for each lesson representing its current state, with a readme describing how to execute the code if it isn't embedded.
  • individual lesson summaries with links, etc.

If that sounds like a lot of work, that’s because it is. Each lesson takes a lot of effort, so a course amounts to the effort for all the lessons you need to create, and then a little more.

But the payoff is worth it. Why?

egghead members love them

Humans love curated knowledge. They want to learn a topic in depth, but at a pace that works for them.

egghead courses give hungry learners a sequence to follow, with the promise of greater understanding at the end of ~8–12 lessons. We’ve found that developers are willing to sit down and watch courses—and pay for them.

Which brings us to our next point...

You make more money!

No two ways about it, courses get more eyeballs than individual lessons. It just makes sense: When you publish courses, you publish several lessons at a time. That’s more content and more chances for views.

Not only that: Learners often watch those lessons consecutively. (Obviously. That’s what a course is meant for.)

Once your course is published, it can continue to create a passive revenue stream for you. Learners will keep watching, and the royalties will keep coming in.

You want to do more with your code

When you’re going through the process of crafting a lesson—creating your code example and using the “show your work” trick—you might need to cut out some cool information. Either because it’s off-topic, or because it widens the scope of your lesson way beyond 10 minutes.

Never fear, courses are here.

Turn that excess info into a string of lessons, and you’ll have yourself a course. A course will take one code example and use a few different diffs to show different concepts. If you’re feeling hamstrung by the bite-sized nature of individual lessons, courses give you a little more room to play and showcase what you know.


How to structure your course

There are several types of egghead courses. The most important aspects of a course are tight focus and high-quality examples. If you have those two things, the style doesn't matter.

But it always helps to have a plan, and you might benefit from having a set format to guide you. These course types are excellent places to start.

Documentation

This type of course is a straightforward presentation of the documentation for a library, framework, or tool. Dan Abramov's popular course on Redux is a great example.

A documentation presentation doesn't mean you simply read the docs to the student. Instead, take the docs and present them with high-quality examples.

Project-based

Another favorite is a project-based approach. In this case, the course amounts to a project that the student will build from start to finish.

Our cofounder John Lindquist did this with his Build Redux Style Applications course, using Angular, RxJS, and ngrx/store as its bases.

Cookbook

You can also present a series of problems and solutions in the "cookbook" style. A typical recipe will include some common (or maybe not-so-common) problems, and then provide an example solution for the problem using the tool the cookbook is discussing.

Trevor D. Miller's React Testing Cookbook course is a solid example of this approach.

You decide!

You're smart and creative, and definitely not limited to any of these course types. If you've got an idea for a new way to structure your course, let's hear it!


Write your course proposal

Before you start producing your egghead course, we ask you to write and submit a course proposal.

For you, the proposal defines your intent for the course, and gives you a chance to craft great titles for the course and its lessons to guide your work.

For us at egghead, your proposal lets us think more deeply about the content and structure of the course to make sure it’s solidly planned and delivers a ton of value to your learners.

How to structure your proposal

Here’s a perfect example of a course proposal, and here's a blank template for you to use.

🔥 We strongly prefer you create your proposal in Google Docs. 🔥 It’s the easiest way for us to collaboratively make comments and edits to help you make your proposal perfect.

The proposal should consist of 4 parts:

  • User story
  • Goals
  • Summary
  • List of lessons

Let’s look at each of these in more detail.

The user story

Your course proposal starts with a user story. This is similar to the agile software practice of writing a story to describe who, what, and why we’re creating this thing.

For example:

As a developer, I want to build applications with React and Redux so I can create applications that aren't littered with state.

This short exercise helps you think like your learners to define what challenge(s) your course will help them solve.

Goals

The second section of your proposal lists your goals for the course.

  • What am I trying to teach?
  • Why am I teaching it?
  • What knowledge should the learner walk away with?

Summary

The course summary is one paragraph (or two short paragraphs) that describes the course, the technology you’ll cover, and what will be learned.

Here’s the summary from the example we shared:

In this course we will build an image gallery application that connects to the Flickr API to load its data. We are going to start from an empty directory, and build the application incrementally, discussing the problems that we might encounter along the way. The image gallery is a simple application, but even the simplest applications need to deal with application state. We will use Redux to help us with that aspect of the image gallery. For asynchronous communication, we will learn about redux-saga, a wonderful library that uses JavaScript generator functions to make complex async application “side effects” a pleasure to construct.

Keep in mind that your approved summary will be presented along with the course on egghead.io, so only include content in your proposal that you’d want to publish. These guidelines will help you write a succinct and successful summary.

List of lessons

Finally, the course lists each lesson in the course, including the titles and summaries for each lesson.

There’s an art to writing a lesson title. By now, instructors should know how to write them. For a refresher, they should be concise and follow the "how do I..." format. The lesson summary should be just that: a summary of the technology covered and the goals for the lesson.

For example:

Load data with redux-saga effects from an API in React – redux-saga makes loading data from a remote API in a Redux-enabled React application very simple. In this lesson, we will create a saga that connects to the Flickr API and loads data for an image gallery component.

Sharing your proposal

Your coach will, first of all, be psyched that you’re ready to take the plunge into courses. Share your proposal with then on Slack. Did we mention that Google Docs is the way to go?

Now hop to it.


Your course code example

A course typically has one code example that acts as a connecting thread through the course. You’ll build on it from lesson to lesson.

As soon as your course proposal is approved, you should start building your code example in a tool like Plunker. The best format of your code example will depend on the style of your course. As always, #ask your coach for guidance and a second pair of eyes as you build.

Sharing your code

For each lesson in a course, you’ll provide your code example in its finished state below the video so learners can explore the code on their own.

Plunker is our favorite tool for creating and delivering our examples. We also enjoy CodeSandbox. If they won’t work for the code you’re building, you can use a GitHub repository to store the code example. GitHub repo examples will provide a branch for each lesson, where the branch is the finished state of the given lesson. If your course is the "cookbook" style and uses GitHub, you can just have folders in a single repo for each example.


Record your course

With all the prep you've already done for your course, a lot of the hard work is behind you.

Once your proposal has been reviewed and approved, you can spend some time iterating your lesson plans on paper and building a solid curriculum that will be useful for thousands of developers for years to come!

building_a_course

When you’re ready, record your lessons and upload them one by one as they’re finished.

And you know what? That’s all recording a course is: recording individual lessons that the egghead team will bundle together on egghead.io. By now, you’re an expert lesson-creator, but feel free to read our guidelines to recording lessons should you need a refresher.


Create your course overview

When your course is "lesson complete," it's time to record a course overview. Guess what: It’s another lesson! But a lesson that serves as the trailer for your course.

Here’s a great example of an overview, from the course Advanced React Component Patterns by Kent C. Dodds:

Kent C. Dodds - Introducing Advanced React Component Patterns

https://www.dropbox.com/s/r6lu0h49v9sbfh3/01-egghead-react-introducing-advanced-react-component-patterns.mp4?dl=0

Here’s what Kent did so well:

  • He explained the what, why, and how of the course. In under 2 minutes, you get a very good sense of the learning to come.
  • He showed “scenes” from the lessons including some of the meatier elements covered in the course. It’s like a movie trailer: You’ll laugh, you’ll cry, you’ll learn.
  • He showed excitement for the course. It's a bit of a sales pitch—much like the course proposal you created a while ago, but this time for learners’ approval.

[ Gif: giving the thumbs up ]

Creating your course overview is the perfect way to conclude your production of the course. You get to stitch together “best-of” clips showing your instruction skills at work, act as your course’s hype person, and publish a publicly accessible video (all course overviews are public) that will look great in your portfolio.

Oh and, hey! Congratulations on publishing your first course! 🍾


Maintain your course

Ever heard of "JavaScript fatigue"? 😫

Well, it affects egghead.io courses. Video is a tough format, and because libraries move at a brisk pace and forward progress is always happening—which is great!—egghead content producers have some specific challenges in keeping courses current and usable.

Updates from our review team

Our egghead content team works hard to keep your course as viable as possible, as long as possible. Every day, they review courses on egghead.io to confirm the code and examples are relevant and still work.

Same with our lessons. The content team reviews lessons to confirm they still function with the latest versions of the tools they cover. When updates are needed, our team updates the code and attaches version labels to help students understand the differences between the lesson video and the code.

When it’s time for big changes

Time marches on. Libraries and frameworks get updated. Sometimes, that means courses become outdated or irrelevant. (This is why we created egghead in the first place—to help developers learn quickly because things change all the time.)

If this is the case for your course, the content team will notify you so you can update the lessons on your end. That is, if you want to. But we must say, it's definitely in your best interest to keep your course updated, especially right when progress happens. There’s no better time to stake your claim to knowledge. Relevance pays off. 💰


Screencasting Tips

Prepare your screen for recording

Success on egghead comes down to mechanics. This guide will help you nail the technical aspects of presentation and accessibility, so you can present lessons that are visually clear and accessible for all learners and devices.

Screencasting isn’t easy. It’s a difficult skill to nail—and on top of that, we’re very picky about the screencasts we publish on egghead.io. We can’t publish screencasts with small fonts, blurry text, and low-contrast color schemes that distract from learning. While egghead screencasts are diverse, they must also share a sameness of quality and presentation.

Video: Remove distractions

Always remember accessibility. A wide range of people will access your lessons on a variety of devices of varying quality. Maximizing the legibility of the code you present helps all learners absorb the information to the best of their abilities.

Set your settings

Before you do anything else, adopt these settings:

We deliver content at 720p (1280x720 in pixels). We want this to be a crisp and legible output for the viewer, whether they’re expanding lessons fullscreen on a 65" TV screen or watching them on the bus.

This video shows you how to prepare the screen and mic to do just that

HiDPI mode—also known broadly as DPI scaling, or Retina display on Macs—doubles each pixel, allowing for highly readable text on very high-resolution screens. Use it if possible!

Image courtesy of designmodo.com

DPI scaling on Windows

On Windows, we've had success boosting the code fonts to max out the screen. Aspect ratio is key here, so set your screen to the highest 16x9 resolution and kick the fonts up.

Using DPI scaling features is helpful—you can scale the OS chrome and make UI more legible.

This article can tell you more about pixel scaling on Windows.

Access HiDPI mode on macOS

On Mac, you’ll get the best results if you record at 1280x720(HiDPI) mode. This resolution is achievable on 27" monitors and Retina MBPs. It effectively gives you a visible resolution of 1280x720, but it’s extremely crisp and readable on phones and tablets.

This mode is "hidden" by default. You can achieve it on a Mac with a software tool that exposes the option, like the RDM tool. On Retina MacBooks, the option works automatically. For external monitors, or non-Retina Macs, follow these instructions to enable HiDPI mode:

Another application that works well is SwitchRezX. It's shareware and requires a fee. If you can't use this mode, recording at normal 1280x720 or 2560x1440 are workable substitutes.

By constraining to this small window, you can fill the screen effectively for coding screencasts. The most import thing to get correct is the aspect ratio. We don't want to present with any black bars around the screen. We want to give the user maximum code visibility at all times.

Screen and code layout

The code is the champion of an egghead.io screencast, so it must be comfortably readable for all learners.

  • Maximum space: Give your code maximum horizontal space by using an 80- or 120-character "column" for the code and bumping the font size up to fit.
  • Padding: Allow some padding for the top and bottom of the recording window, which could get cut off by Player Chrome. For instance, if you're recording the terminal, commands toward the bottom might not be visible. You don’t want to frustrate or distract your viewers.
  • 3-column layout: We will typically work in a 3-column layout, with the editor taking up 2/3s and a browser on the right side in the remaining 1/3 of the screen. You might prefer to flip back and forth between the browser and the editor—up to you!

We prefer this 2:1 ratio of code:example. It will look something like:

Notice that the code's font size has been increased to maximize the space available.

Place your example on the right, occupying 1/3rd of the screen. Consider that your example will need to fit in that space when you’re creating it. Choose a simple example with a minimally responsive layout, and you’ll be just fine.

In some cases, the example is replaced by a terminal, or a terminal window shares the right column with the example. In this latter case, the terminal window would be on the bottom-right section of your screen.

Remember that your lesson viewers are here to see the code. Make it the starring feature!

Command line prompt

If you will be showing your command line, we suggest using a minimal prompt to reduce distractions. This example prompt works well for screencasting:

You can use this one by updating your ~/.bashrc or ~/.zshrc with the following:

export PS1="
[e[32m]W
[e[m][e[34m]\$[e[m]"

Note: If you’re on Mac and using Bash, you also need to add a ~/.bash_profile with this:

source $HOME/.bashrc

This tells Mac to load your ~/.bashrc when loading a terminal emulator.

Now that your screen is ready to record, sound up. Time to get your audio ready.


Set up your audio

Good audio starts with quality gear. Your laptop’s built-in microphone sounds decent, but we want you to sound way better than decent.

When you become an egghead instructor, we hook you up! As soon as you have a draft lesson almost ready to publish, we’ll send you a waterproof Pelican case full of professional-grade audio recording equipment. 📬

photo of open case with egghead gear inside

Here’s what you’ll be getting:

  • K & M 23150-500-55 tabletop microphone stand with 5/8" threaded connector and mini boom arm
  • Shure BETA 87A microphone
  • Shock mount to attach the mic to the stand
  • Shure X2U XLR-to-USB signal adapter
  • 1 XLR cable to connect the microphone to the USB interface
  • Badass by Kathy Sierra (to inspire your great ideas)

all the contents layed out to view

Let’s go through each piece of equipment and explain how you’ll use it.

Microphone boom

photo of microphone boom

The boom is a stand for your mic. Booms can range in size and shape. (Action movies require bigger booms than egghead lessons.) This is a very nice, sturdy boom from Germany that folds down for easy storage in the case.

The microphone

photo of microphone

Obviously an important piece of equipment! The Shure BETA 87a is a supercardioid mic, which refers to how it picks up sound: It’s forgiving and blocks out ambient noise.

You can go crazy with mics, spending a huge amount for a smidge better sound quality. You might not use this mic to record a #1 banger, but it still fits into the "sounds very good" column. 👍

Positioning of the mic is important. You should be 2–6 inches away for optimal volume levels. For extra credit, here are loads more positioning tips:

mic positions

(We don’t really give out extra credit, but you might sound slightly better.)

Shock mount (right)

photo of preamp and shock mount

This little piece connects to the boom, and the microphone slides into it before being attached to the XLR cable. It will dampen any footsteps or other vibrations that might be picked up through the stand to the mic. (You’ll most likely be sitting down, but who knows what your kids or roommates are up to.)

USB audio interface (left)

The mic we’re giving you is built for professional audio applications, not necessarily for capturing audio on a computer. This interface connects the mic to your computer, and converts XLR analog signal into 1s and 0s for the computer to store. It has an XLR input (from the mic) and a USB output (to the computer).

Note: ⚡️ The 48v power button needs to be on! ⚡️ Turn the gain up!

XLR cable

XLR is a plug used in professional audio applications. It isn't completely necessary since the pre-amp will plug directly into the microphone, but play around and see if it makes your sound more stable.

XLR

Your final setup should look something like this:

photo of setup all done

Check audio input levels

Once your gear is set up, you'll need to check the audio input levels to make sure your gain is set properly. Here’s a lesson to help you

Ta-da! You’re ready to record.


Record your lesson

Screencasting is one of those iceberg-like tasks: 90% of the work is behind the scenes. Only 10% is visible.

iceberg

Recording your screencast is that 10%. You’ve put tons of thought and time into your lesson scope, code example, and points you want to cover. What distinguishes your success in this final stage is high-quality technical tools. (And careful editing—that’s next.)

Video capture

egghead.io instructors are provided with whatever software licenses you need. Just #ask!

On Windows, the best option for video capture and editing is Camtasia.

On a Mac, the best options are ScreenFlow and Camtasia. Both provide editing features. We tend to prefer ScreenFlow for its standalone simplicity, as Joe Maddalone shows in the video show below, but the decision is completely yours.

https://www.youtube.com/watch?v=3nlJ_wP9dPE&&index=5&list=PL219naRJXQKbQJ60WxsuGfTFv7_fvna51

Capturing audio

There are three ways to record your screencasts. Each is completely 👌

  • All at once
  • Audio first, video second
  • Video first, audio second

All at once is arguably the simplest approach—just type and record the screen. You don't have to think about the video and audio separately. You just have to think about them at the same time, which might be a lot to ask. Give it a try and see how it feels to you!

Audio first means you play back the audio and record your video to match. The trick here is remembering what is said when, so your mouse is ready to move where it needs to.

Video first means you narrate over video playback. It can be challenging to sync and get a natural feeling with narration. Like most things, it takes practice.

For more on audio, see our guide to audio setup.

Record one thought at a time

While you’re recording, do your editing-self a favor: Record in short, high-quality chunks, one thought at a time.

Think of your lesson as a series of paragraphs that take 20 seconds to record. Between each, take a pause. Doing this will help you avoid intense editing to move audio and video snippets around as you build your quilt-like final product.

When you record in chunks, you get better short takes. (You’re not trying to set a record for the longest unedited take here.) By pausing between each section, you can visibly see where you need to ripple delete.

Need an example? Watch John Lindquist show how to record one thought at a time.

John Lindquist - Record One Thought at a Time

https://www.dropbox.com/s/cyy9swbl3ga38kd/egghead-record-one-thought-at-a-time.mp4?dl=0


Edit your lesson

Editing is your lesson’s critical last stop between you and your audience. It’s your quality filter.

Ripple delete

⚡️Ripple delete is your greatest ally. ⚡️ It’s basically deleting the bad parts, a chunk of seconds at a time—like that tangent you go on, that five-second period where you stammer over a word, and those dozens of “umm”s and “like”s you had no idea you said so often. Ripple delete couldn’t be easier or more essential, and it’s available in both Camtasia and Screenflow. 🙌

In the egghead lesson shown below, John Lindquist shows how he uses ripple delete to trim a video from 7:28 to 2:17. Yes, really.

John Lindquist - Edit with Ripple Delete

https://www.dropbox.com/s/a5ahcas02qtxu99/egghead-edit-with-ripple-delete.mp4?dl=0

Editing with Premiere

In time, you can 💥 kick it up a notch 💥 with more sophisticated editing software like Adobe Premiere. Premiere has some significant advantages, but it also has a steep learning curve. We recommend starting simple, and leveling up to a non-linear editing system like Premiere later. If you’re interested, see how some of our advanced instructors use Premiere:

The easiest way to edit is to capture it well

In traditional videography, “in-camera editing” refers to the idea of capturing content so well, it doesn’t need to be edited much at all.

Your first few lessons will feel like a major effort to produce because you have to consider so many different things. You’re teaching complex concepts (web development) and learning complex concepts (screencasting) at the same time.

Believe us: You’ll get better. And better. And better. Just keep practicing and keep recording.

Need help or advice? Please, #ask! You aren’t the first person to do this or struggle at it. Your coach and the other friendly folks on Slack were all in your shoes once, and now we’re here to help you succeed.


Sharing your code

Playing around with code is critical to becoming a better web developer.

For every egghead lesson, we provide a concise, organized, readable code example below the lesson video in a runnable embed, using Plunker or a similar service. That way, egghead members can jump in right away.

Note: You should always record in a local environment using your favorite text editor, and then repurpose your code using Plunker or your service of choice. You do you!

Using Plunker

Plunker allows us to embed even fairly complex apps as runnable examples, perfect for our learners to run with. There are two ways to use it:

  • You’ll typically use Plunker’s public UI and set up your code example there. For standalone lessons, feel free to just do this. It works great.
  • Plunker also supports loading your code directly into the embed via Github. This is an amazing feature that allows us to version control the examples presented to the user. egghead can then handle maintenance on your examples and keep them updated and supported for a much longer time. :muscle:

Much as we love Plunker, there are cases where it just won’t work. In those cases, simply link to a GitHub repository.

Link a Plunker embed to a GitHub repo

Linking a GitHub repository to Plunker is fairly simple and involves configuring the Plunker embed url. We start with https://embed.plnkr.co/ , which is the base embed url. To link to Github we configure the url by adding:

`https://embed.plnkr.co/github/{profile-name}/{repository}/{branch}

{branch} can be replaced with {tag|sha1} depending on how your repo is set up. If your repo is set up with an example in individual folders, you can add that /path to the embed url.

Here’s an example Github repo, which is divided into one folder per lesson.

Additional Plunker embed config

URL parameters can be added to affect how the embed presents itself. The most-used feature is showing specific files (the default being the index and preview). Add ?show= to the end of the url with the various filenames separated by commas.

https://embed.plnkr.co/github/eggheadio-projects/egghead-wikipedia-demo/angular-2-building

You’ll see a complex example of this here.

If you want to go wild, this gist documents quite a few additional parameters you can use.

Build complex apps in Plunker

Before you go any further, stop! You don’t need to build apps in Plunker. egghead will do this for you. Just hit up @zac in Slack and we’ll get to it.

...but if you’re the DIY type, this is actually pretty cool.

Plunker itself doesn’t support the node file system—import and export statements in Plunker will not work. But it is possible to create an in-browser Typescript compiler. This is usually required for Angular lesson examples. Doing this takes a bit of set up, so hang in there!

Here’s what you do.

1) Install jspm on your local machine if it isn’t already. It’s an auto-configure systemjs tool: $ npm i -g jspm@beta

2) Run in whatever dir pleases you: $ jspm init

3) Select all the defaults given to you. Then run: $ jspm i npm:{package_you_want_to_install} For instance: jspm i npm:data.task This will give a verbose working example of the config file needed to achieve in-browser compiling.

4) After init is done, this is the barebones .html page you will need:

5) You then need to create an app.js file in the src directory src/app.js . This file will contain the code you want to run. Any packages that are installed using jspm i npm:{package_you_want_to_install} will create a jspm_packages/npm/{package_you_want_to_install}@1.2.3.json file.

6) ⚡️ Copy those contents. ⚡️ The content will be placed in your SystemJS.config under the packages property as the package you installed. For instance:

7) Jspm will also give you a jspm.config.js file: Copy this file, with some slight modifications.

Note that the "baseURL": property was changed from / to a .

Also note that "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js line was added under the map property (nested in the devConfig property).

8) For Plunker apps, just add this script tag (in index.html ): <scriptsrc="https://unpkg.com/systemjs@0.19.41/dist/system.src.js"></script>

9) Then the two SystemJS.config objects can be added in their own script. Now you’re good to go!

Here’s one last example of a Plunker embed to send you on your way.


Host a demo REST API

Want data to play around with in your next egghead lesson?

egghead co-founder and instructor extraordinaire John Lindquist set us up with a REST API using swapi (The Star Wars API) and json-server. As long as you don’t openly endorse or promote swapi (or Star Wars), you’ll have no issues with copyrights.

If you don’t have a need for any special configurations, you can spin up the server using npx.

npx ships with the latest versions of npm, so you probably already have it installed.

$ npx https://github.com/johnlindquist/swapi-json-server // --> http://localhost:3000

💥 Presto. You’re now running a REST API using Star Wars data. 💥

Build custom data for egghead lessons

Of course, you have endless options for building a REST API.

If your data needs to be unique for the lesson you’re crafting (there’s a lesson for that!), John shows us how to generate a large dataset of JSON data

100 random people

If 100 random people is enough for your data set, grab this gist: 100 people in JSON format.

Serve JSON locally

json-server will serve any JSON file we have ready.

$ npm i -g json-server

$ json-server {data.json}

You're good to go.

Host a REST API

Zeit's now feature is a great way to host any application needing it.

You can use the now command with an app John set up:

$ npm i -g now $ now https://github.com/johnlindquist/swapi-json-server

If this is your first time using now, there will be a small amount of setup, but overall it's a breeze.

There’s a lesson for that, too. Check out Deploy Web Apps with Zeit Now for an in-depth look at now. Watch it right now!


Odds and Ends

egghead on Slack

Slack is where egghead communicates.

There’s a Slack channel for almost every element of egghead. Some channels are specific to instructors and lesson creation. Some are just for fun. All are meant to keep you connected to the egghead community and help you become the best instructor you can be.

If you ever need anything, #ask!

Your private instructor channel

Right when you get started on egghead, we’ll set up a private channel for you. Here, you can work with your coach and other top-tier instructors to nail egghead style and get your first lesson published. Feel free to ask any questions, brainstorm ideas for your first lessons and courses, and share drafts. We’re here to help.

#egghead-chat

This is the "water cooler" channel, where basically anything goes (within the general code of conduct, of course). Many egghead instructors are freelancers or work at home, so this gives us a place to socialize and talk about programming and industry stuff. It is noisy, so you might be compelled to mute this channel, but it’s always here when you need it.

#egghead-instructors

Creating bite-sized code videos is an art form. This is where we discuss it. This channel is a great place to solicit feedback from other instructors and the wider egghead team about your latest lesson ideas, course proposals, and drafts. We've got an amazing group of experienced instructors who are happy to help you. It’s a great community, and you should lean on it whenever you need to.

#egghead-publishing-queue

This is where egghead’s publishing activity is announced by bots. When a lesson is uploaded, or a course/lesson is published, it’s automatically announced in this channel. Keep an eye on it from time to time to see what’s coming down the pike.

#egghead-lesson-ideas

There are so many things to teach about in the world of web development. When we see something interesting or get a request, it gets dropped in here. If you can't think of anything to record a lesson about, ask in here with @joel . There’s always something to teach! 🙂

Etcetera

We've got other channels for specific topics like music & tv, fitness, functional programming, and podcasts. Surprise surprise, egghead instructors are passionate people.

Like most Slack groups, members are welcome to make public and private channels, DM with anyone, litter every channel with emoji and gifs, and even add integrations. Use your good judgment, and if you have any questions, please feel free to #ask.


Our contributor agreement

eggo_signing_contract

egghead has a standard contributor agreement that we provide to all instructors. The agreement protects egghead from any mischief you might cause; leaves all ownership rights to you, the creator; and lays out the terms for payment. You sign it, we sign it, we shake on it.

We like to maintain respectful, easygoing, rewarding relationships with our contributors. This agreement allows everyone to happily work together for years on end.