For the past few months, I have been actively taking part in reorganizing egghead.io‘s documentation for their technical instructors. Though the teaching method seems “simple” when executed properly, it’s actually pretty hard to nail down.
To help get new instructors get acclimated with the teaching style, egghead holds monthly cohorts. There, coaches spend a month helping instructors learn and internalize the teaching style.
egghead.io provides information-dense video lessons that get right to the point to help developers learn new skills in an extremely wide range of software development related areas. The instructors are web development professionals and open source contributors who share their expertise.
All instructors teach utilizing the “egghead style.”
⭐️ Find me on egghead: Hiroko Nishimura
They make their documentation available to the public so that anyone can begin recording “egghead style” lessons and start teaching. You can find them at howtoegghead.com. It’s a great resource for any content creator looking to expand their reach into making video lessons.
My First egghead Lesson
I officially received my invitation to teach at egghead this month! I began my new-instructor cohort in the beginning of August, and already, I’m learning so much.
I’m already fairly well-versed with the “egghead-style,” having been chest deep in the documentations for the past few months. But there’s something different about actually doing what you write and read, as opposed to being a casual bystander.
So for any egghead fan who’s interested in taking a peek at what goes on “behind the scenes,” or those of you who are interested in potentially one day teaching on the platform, I decided to share my (potentially embarrassing) iterations as I created my first egghead lesson!
Though it may seem like all of the instructors were born being able to code and talk at the same time and articulate eloquently, I hope to show that it’s a learning process for everyone, and everyone was a beginner back in the day!
I personally hope that one day, few years in the future, I’ll look back at this post, watch the videos, and go “Huh! So that’s how I started! Well, look I am now!“
As you might recall, I have created a few online courses with LinkedIn Learning (Introduction to AWS for Non-Engineers), and have written a bit about the process as well. But this was a completely different experience!
30 Second Demo
First thing egghead has you create is the “30 Second Demo.”
This is the get instructors comfortable teaching in “egghead style” from the start. Instead of creating a full-blown lesson that may be up to five minutes long, we begin with 30 seconds. This way, it’s easier to iterate and provide feedback.
A great reference here is the egghead Lesson Style Guide.
egghead Lesson First Take
Title: Create image fade effect by setting opacity in CSS using the “:hover” selector
💡 When you create a title, you first ask “How do I…” and fill in the latter part of the sentence. “How do I…. create image fade effect by….” Once you get a question, just remove the “How do I…,” and you’ve got yourself an egghead-style title!
Description: Learn how to change the “opacity” property of an image to create a “hover-over” effect with CSS using the “:hover” selector. The “opacity” property specifies the transparency level for an element (in this case, an image). By changing the opacity, you can change how “faded” an image looks. By utilizing the “:hover” selector, you can set the opacity rate of the image on mouse-over to create the “fade in” or “fade out” effect.
💡 egghead actually recommends that you write the Summary first. And then your Title is a Summary of the Summary. Refer to “Thinking in Lessons” for a deep-dive into the thought process!
I recorded using Screenflick and edited using iMovie.
The audio is obviously very uneven. But by the time I was done with recording and editing, I had spent so much time and energy that I felt like it was actually pretty good! If it were up to me, I would’ve uploaded it right there!
And then I got the feedback… 🤪
First Take Feedback
One of the coaches did a video and text feedback (having both was really helpful).
General
- Great job scoping the lesson. It is hyper-focused on a single topic.
- Clean setup with no distractions.
Screen Setup
- Maximize readability.
- We want this to be a crisp and legible output.
- Increase font size (22px) to fill whitespace (code + browser)
- Set your resolution to 1280×720 (HiDPI)
Lesson Edits
- 00:10 – 00:20 – Show the process
- Could you try typing out and narrating what you type? A big benefit of screencasts is seeing your workflow, even the small things!
- If there’s a lot of boilerplate code that needs to be added, that’s a great time to copy/paste
- 00:26 – 00:31 – Iteration of the output
- Show Fade out effect & Fade in effect
- Seeing the different end-results is important for the learner to solidify what they are looking for in the output giving the possible states.
- END – Recap the lesson
- It’s a good way to show the full data flow of the lesson from start to finish.
- A good example of a recap is Kent’s “In review”
egghead Lesson Second Take
Title: Use the “:hover” selector in CSS to create “fade-in” and “fade-out” effects for images and text
Taking the coach’s advice, I decided to do both “fade-in” and “fade-out” effect. I also added in text to show that using the “:hover” selector works on any “element.”
Summary: Learn how to change the “opacity” property of an image to create a “hover-over” effect with CSS using the “:hover” selector. The “opacity” property specifies the transparency level for an element (in this case, an image). By changing the opacity, you can change how “faded” an image looks. By utilizing the “:hover” selector, you can set the opacity rate of an element – in this case, an image and text – on mouse-over to create the “fade in” or “fade out” effect.
Editing Take 2
For this take, I used ScreenFlow to record AND edit. And I’m really glad I tried ScreenFlow out (egghead recommends ScreenFlow or Camtasia), because it made editing so much easier!
I definitely spent an hour or two to edit this second iteration. It did occur to me after I put my 150% into recording and editing the lesson that maybe I shouldn’t put 150% into recording and editing a lesson that I’m going to have to re-record anyways. But I think because I did put my 150% in, I probably gained experience points. In turn, the experience will make my future recording and editing much easier. I hope!
I maximized the space used as much as possible, made the font sizes larger, and utilized SwitchResX to change my desktop resolution to HiDPI.
Once I started recording, I quickly realized that I cannot type/code and talk at the same time. So I ended up doing a voiceover in some parts and just typing then talking. Afterwards, I’d split the audio from video to make it seem like I’m typing and talking at the same time.
Maybe I’ll figure it out some day. But this year is not the year.
Second Take Feedback
General
- Great second iteration.
- Clean screen set up!
- Great lesson flow!
- Love the iteration at the end.
- Great job changing the title, a couple of edits.
- 1. Create image fade effect by setting opacity in CSS using the :hover selector
- 2. Use the :hover selector in CSS to create “fade-in” and “fade-out” effects for images and text
- 3. Use the :hover CSS pseudo-class with the opacity property to create “fade-in” and “fade-out” effect
Lesson Edits
- 01:00 – 01:10 – The only thing I’d suggest is explicitly showing us that the opacity property can take a value from 0.0 – 1.0, not just 0.3
egghead Lesson Final Take
Title: Use the :hover CSS pseudo-class with the opacity property to create “fade-in” and “fade-out” effect
By this take, 3 weeks had passed since I recorded the initial two takes, so I had lost my script. (I was waiting for my microphone!) So it’s a bit different from what the first two takes were. I’d like to think I utilized what I’ve learned over the past 3 weeks and improved upon my first attempts!
Summary: Learn how to change the “opacity” property of an element to create a “hover-over” effect with CSS using the “:hover” selector. The “opacity” property specifies the transparency level for an element (in this case, an image and paragraph text). By changing the opacity, you can change how “faded” an image looks. By utilizing the “:hover” selector, you can set the opacity of an element – in this case, an image and text – to change on mouse-over to create a “fade in” or “fade out” effect.
New Microphone
I used ScreenFlow to record and edit the third take as well.
Until this take, I was recording audio with Sony WH-1000XM3 headphones. While the noise-cancelling headphones did ok, it’s definitely not the best if you’re trying to get very good quality recording out.
Last weekend, I finally received the Shure BETA 87A from egghead, so used it to record the 3rd take of the lesson.
I created a microphone test video and posted it on Twitter, and the difference between the different audio input sources I’ve been using is pretty wild! (I purposefully left a really loud fan running in the background to see what all of the microphones would do, which is the sound you hear with the BRIO and MacBook tests.)
Covering Up Distractions
While I managed to make fonts larger and use up more of my screen, Zac pointed out that I missed some distractions. (I thought maybe it won’t matter because the text was so tiny 🤪)
Mainly, the little footer text in my Atom IDE, and the top portion of the browser. I used a package called “Zen” for Atom to get rid of the footer in the IDE. And used the “Annotations” feature in ScreenFlow to create a white box to cover up the URL bar.
Here’s how it came out:
Sound Only Playing on One Side
So the audio setup made it so that I am only recording on one side. To make sure people can hear my voice on both speakers, I needed to set ScreenFlow to record only one track:
If you did this BEFORE you recorded, you’re good to go! But I, of course, missed the memo. It was only AFTER I finished recording AND editing that I found out it’s only playing on one side…
Fortunately, Lauro helped me get it straightened out.
If you herpa-derped like me, here’s a quick fix!
You need to go back to your ScreenFlow file, highlight all of your audio, and then change the 2nd track’s volume level to 0%. Then, go to the 1st track’s gain, and put it to 12 o’clock.
Now, if you export the file to .mp4, you’ll have the sound playing from both speakers! 🙌🏽
Publishing on egghead
Title: Use :hover CSS Pseudo-Class with Opacity Property to Create “Fade-in”/”fade-Out” Effect
Apparently titles can only be 90 letters long, so I had to cut it down!
Summary: Learn how to change the “opacity” property of an element to create a “hover-over” effect with CSS using the “:hover” selector. The “opacity” property specifies the transparency level for an element (in this case, an image and paragraph text).
By changing the opacity, you can change how “faded” an image looks. By utilizing the “:hover” selector, you can set the opacity of an element to change on mouse-over to create a “fade in” or “fade out” effect.
Instructor Feedback Cycles in Action
You can watch all cycles as I take in coach feedback and iterate to improve the lesson from start to finish here:
The egghead Way
I hope this post was informative for anyone who is thinking about becoming an egghead instructor, or just interested in how people record and iterate on their technical lessons!
While I’m not a novice to course creation, it’s my first time creating AND editing my own courses. It was also my first time teaching via screen share, so I learned a lot. It’s pretty cool to be able to feel yourself improving with every round and iteration, too!
One thing’s for sure, though: I’m definitely not a “type and talk at the same time” kind of person 😂
As of February, 2021, I have six lessons and an introductory CSS course up on egghead!
⭐️ Find me on egghead: Hiroko Nishimura
⭐️ Find me on LinkedIn Learning: Hiroko Nishimura
⭐️ Find me on Twitter: @hirokonishimura
Wow, so much work goes into that. But good job! =3