Learning Web Design in the Time of Coronavirus: How the Workshop went Online

A guide to putting together an online course in the time of a pandemic.

jagannath bhat
TinkerHub
6 min readMay 13, 2020

--

Photo by Allie on Unsplash

I have to start with the pandemic because it halted a lot of my plans. When they announced that the classes in colleges would be suspended due to the outbreak, I was busy planning a workshop in my college.

I was getting a lot of freelance work, building apps with React, and I was hoping I could teach some students in my college how to use React so that I could share some of the work with them. But obviously it didn’t work out.

I do not have a hard time sitting in my house all day, because that is what I usually do. Usually, I work on some project or watch a Netflix series.

On one such evening, I received a call from Gopikrishnan Sasikumar, Director of Projects and Initiatives at TinkerHub Foundation. He proposed a plan for a Learn From Home program for students who were stuck at home statewide.

Learn From Home is an initiative by TinkerHub to help students cut off from college continue to learn new things that would help them in their careers. I agreed to take part right away.

After a video conference with other mentors and organizers, I decided to take up the web design course — HTML, CSS, and JS, and as a bonus — Material Design and Firebase hosting.

The course was designed to run for six days, one topic per day. This is how I went about delivering content on all six:

Step 1: Making YouTube Videos

For the Learn From Home — Web Design course, I decided to record videos and upload them on YouTube. This way, students would be able to start learning at a suitable time.

In addition, the videos I upload online would be publicly available. It would enable people who couldn’t take part in the Learn From Home program to learn. Since the video is always available, students can go watch it whenever they want. With all this in mind, recording and uploading my videos online seemed like the best way to go about the course.

Tools — Recording Software, Microphone, Editor

I usually record my videos early in the morning. Ubuntu 18 is the only OS I use on my laptop. So my videos were all recorded on Ubuntu. I used a software called Kazam to record my screen.

I had used Kazam to make such videos in the past and it works well. It records the screen with/without the mouse pointer and with/without audio. I used Kazam to record the audio as well through my earphone mic. I use a 1More Piston earphone, which isn’t very expensive but does the job.

During the recording, I made a lot of mistakes and there were times where I paused to fix something that went wrong. But you won’t find them on my videos because I edited them out. That’s the only reason I edited my first video — to cut out the mistakes.

I use Kdenlive to edit my videos. It doesn’t have as many features as Adobe Premiere Pro, but it is enough for me. Since I used Kazam to record both the screen and the audio, I didn’t have to add the audio in the edit, the video already came with the audio.

Trouble and Troubleshooting

However, it did pose a problem. The audio quality wasn’t good. The videos weren’t audible enough. I didn’t realize that because I was replaying the video after editing, at full volume on my laptop.

After uploading the video with the poor audio, I shared the video with everyone I knew. I didn’t receive any feedback first, because none of my friends were going to watch my lecture about web design first thing in the morning. But soon I started receiving complaints about the audio. By that time, a lot of people had viewed the video.

So I had to quickly edit the video, increase the audio volume, reupload the video, and share the new link wherever I had shared the first link. So day 1 didn’t go really well.

The next day, I recorded the audio on my phone separately. The recorder on my phone was way better than Kazam. From then on, I began recording the screen using Kazam and the audio using my phone. I added the audio later on Kdenlive.

On the second day of the course, the feedback was better. The audio was good and they were able to follow what I was saying. Crisis Averted!

Step 2: Slack Channel for Communication

We used Slack to coordinate the participants of the Learn From Home program. There were Slack channels for each course. In my videos, I asked the participants to share their progress and post queries and feedback on the web design channel.

The biggest disadvantage of conducting classes online is that you don’t get instant feedback. When conducting classes in person, you see the faces of your students and get an idea if they are able to follow what you are saying or not. Or whether they are bored and waiting for the recess. All of this is really helpful to steer your class in the right direction and know when to take a break.

But this is difficult when you host an online class. Even if it is through video conferencing. Not everyone will have their cameras on and not all of them will have a good quality camera. Hence it was crucial to get feedback from the participants through Slack.

I couldn’t change the videos I had already uploaded, but I could make changes in the subsequent videos and also explain in detail the common doubts that people were asking in the next video.

In some cases, the doubts were cleared even before I read them. This is the best thing about peer-to-peer learning. Students don’t have to depend on this one person at all times. They learn from each other.

Peer-to-Peer Learning

One of the main difficulties that the participants had was that most of them used Windows and I was recording on Ubuntu. Although the steps are the same, the errors that appear when using Windows were different. I haven’t used Windows in a long time and I wasn’t able to clear all their doubts.

Fortunately, the participants were able to help each other out. In some cases, the doubts were cleared even before I read them. This is the best thing about peer-to-peer learning. Students don’t have to depend on this one person at all times. They learn from each other.

Step 3: Web Design — Further Reading and Resources

Web design is one of the easiest things you can learn by yourself. I learned it on my own at w3schools.com. Freecodecamp.org is also a good place to start.

There are also plenty of good free video courses on YouTube, Udemy, and other platforms. One such YouTube channel is Traversy Media. Definitely check out his YouTube channel if you want to learn any web technology.

However, if you want to learn more about what’s latest in web technologies, you have to do some research on your own. There are tons of new tech getting created in the web technologies field, and not all of them are going to have well-defined courses.

The only source available might be the official textual documentation by the developers of that tech. So, my advice to all those who completed my video lectures is to Google some new tech and learn them on your own. Good Luck!

You can find the videos I recorded for Learn From Home here —

If you liked this content, feel free to share and let your friends know. If you have questions, please post them in the responses below and I’ll be happy to answer.

Thank you for reading!

--

--