I just volunteered to teach web development. Your ideas please

I just volunteered to teach web development. Your ideas please
0

#1

I just went and volunteered to teach web development to a group . The context is this: I visit a local charity that helps foreigners and immigrants with life in Finland. They offer job search training and language curses for example.

I thought I would teach basic HTML CSS and JavaScript to a group of say 4 students that are foreign job seekers in Finland. The schedule would be 1,5 hours daily mon - fri. Even though this is a time limited course for beginners I think of it as an possible opening to a new career for the learners.

My end goals after five days is this: Every learner finish the course as an independent learner equipped with the tools, resources and confidence to proceed into web development on their own.

With this goal I would definitely introduce them to FCC during the course.

Please let me know your suggestions on how to best prepare for teaching, or pointers to teaching resources that may help. I want to make sure I use the time wisely.

If anyone here have any experience teaching in similar context I would love to hear from you. I have taught languages before but this is a new experience entirely. I am myself a learner (Just finished the basic algorithm challenge on FCC) That’s why the group would be small and the time limited to a week.


#2

Hey @Magwit,

First off, that’s a great idea and I applaud you for such generosity.

Due to the time limitations on the course, my suggestion would be to focus on three things:

  1. Igniting a fire in the students of what’s possible if they learned these technologies. I say this because in the end, they are going to need this intrinsic motivation to persevere past the challenges to learn this stuff outside of the classroom. I am no expert, but I used to teach and found this to do wonders for student learning. Feel free to DM me if you’d like to discuss this further :slight_smile:

  2. Help them “get their feet wet” as they say with an introduction to the basics. You said this above in your message with regards to teaching basic HTML, CSS, and JS, and I think it’s a great approach.

  3. Teaching how to learn. This is another one that may give more “bang for the buck” given the time constraints you mentioned. Essentially, learning how to effectively learn (especially online), is such a level-up that will help them in many aspects of life. Here’s a good resource to pull from, though I’m sure there are many others out there.


#3

Exciting opportunity and congrats!

I’ve toyed with the idea of doing the same with some contacts I have in the drop in center groups in Toronto. Just haven’t had time with all else going on…

Keep us posted on progress! And if any of them eventually join the Forum have them @name hey hi hello you!

Very cool.


#4

Definitely direct them to the Learning How to Learn material on Coursera as self study…

And set a goal of having them do some home/work on a Tribute page. So teach to prep them to do the tribute… Even if it’s just the shell of it… That might be too ambitious for a few hours a week but be nice to point to something they can complete if they want to continue…

Edit: The first 20 hours – how to learn anything | Josh Kaufman | TEDxCSU this is a good resource for them as well, 'specially starting out


#5

I am really glad and grateful for the encouragement I have met in the FCC forum.

@tropicalchancer Igniting the fire is an important point but also a tricky one. I see lot of noise around web development as an easy way into a career after 3 months. I am going to avoid making any empty promises and instead emphasize the patience,tenacity and consistency it takes to make progress. The silver lining is that it is never boring, small successes feel great and you are building all kinds of problem solving skills. It may even lead to a career if you stick with it. I am curious to know how you ignited the fire with your students.

@DarrenfJ Learning How to Learn seems a very interesting course. It’s principles are relevant but it is a three week course that would take up time spent at FCC. I think the video with Josh Kaufman is what I was looking for. There are some very good points about breaking down the essentials to get started, both for myself and for the learners. Very much to the point so thanks for that.

At this point this is how I think the basics of my training would look like:

  • Shay Howe for the heart of the coursework. We would be following along the text and the examples. I would have the learners install Visual Studio Code and create a folder for their projects. I thought of using codepen but I think it is better to get experience with using an editor and creating external stylesheet early on. Also no need for a full on wamp stack or local development environment yet.
  • w3schools for reference: Easy explanations and code snippets to test new concepts. MDN is for later.
  • And finally FCC for community and continuity after the training. I see FCC as the way to continue after my introduction. I, and most importantly the whole FCC community, would be available for questions and encouragement in the forums.

Note that I have no JavaScript in my plan.There probably won’t be time but if I do have the time for an introduction I would give one example of DOM manipulation, say a click event, just to exemplify what JS does.

Let me know what you think of this outline.

EDIT: I just had a closer look at Shay Howe’s material. In chapter five Positioning Content he teaches using float for layout. I understabd float is pretty outdated and now effectively replaced with flexbox.


#6

Your training outline looks good! I especially like that you added FCC to it. I’m not sure if you’ll have an internet connection where you’re teaching, but it might even be worth an entire class just taking them through the opportunities within FCC (gitter, forum, medium, youtube videos, etc). I’m imagining asking a question in the forum at the start of the class and showing them in real time as people reply to help (haha might want to prep a few people in advance on the forum to make sure the timing works). :grin:


#7

Prepping a question and response. I like that idea. I’ll see what I can do.

They do have WiFi at the charity so that should not be a problem, Every learner would need to bring their own laptop though.

I just came across a site called internetting is hard. I think I might use this resource instead of Shay Howe’s.

Anyhow it will take quite some time for me to prepare. The charity will also need some time announcing the training and find learners as well before any training begins. But I will keep posting updated on this thread.


#8

I like the idea to volunteer to teach web development, where I could read more about your group and how they help people.


#9

Hi @TSIIAM The organization is called Jomoni which translated to English stands for Joensuu district multicultural association. Joensuu is a municipality in Eastern Finland where I live.

The association organizes cultural and recreational events, seminars, press conferences and other activities that bring people from different backgrounds together. The association helps immigrants around the Joensuu area deal with various authorities and bureaucracy issues as and helps to spread the word about multicultural diversity.

This is obviously a very local organization but there are probably organizations with similar goals everywhere. I just went and suggested my idea to volunteer for a one week course and they liked my idea. Now I got to follow up and plan something useful of course.


#10

I’m bumping this thread since I got a lot of good responses from my first post and people were interested in hearing how the course turned out in the end. I have now finished teaching the course It was a excellent experience all together. It’s been said before that teaching is a great way to learn, and I can definitely attest to that.

I put together some bullet points listing what I learned. I hope the list can be useful for anyone else planning to teach.

  • Get your stuff together. What I mean is keeping yourself and your equipment organized ( monitor, projector lesson notes cables and so on.) I noticed how a little disorganization and fidgeting on my part at the start of the lesson meant that the lesson had a slow start with low energy. Best case is that you have at good amount of time alone in the classroom by yourself before the students arrive.

  • Request-response cycle is a good start I drew a an illustration similar to this image. I think demonstrating request-response cycle is helpful in describing what really goes on between browser and server. When later we moved on to CSS I returned again to the illustration to remind that CSS is an asset that gets sent with the http response. We only worked in a local environment, but I could always point to the illustration to show the context of how things would look like in a real context.

  • There is a tradeoff between choosing Atom vs. Codepen Setting up atom in class takes time. Expect more than one to be confused with the setup. and also where to to store their projects in fact. Remember the student may never have seen a code editor before. And when you say “Project” do they know that all projects are in fact folders? Maybe Codepen would have been quicker solution but you do lose the context of the header and setting up the beginning of a local development environment. Even tough setting up Atom took time it was worth it in my opinion. But there is no definite answer to what tool your student should use. It is a very time and context sensitive question.

  • Explain the workflow… In Atom it’s edit - save - refresh. It may be completely obvious to you but not to the student who may expect the document to update immediately after save.

  • Give homework where the student can create something personal. My idea was that student make a page about a favorite city or town. We got Guangzhou China, Windsor Canada and Tripoli Lebanon for example. The students were happy to talk about their design and their chosen town to the class I also decided to introduced students to . fontlibrary.org. We didn’t study much about typography as such, but being able to pick your own a font is a easy way to give a personal touch to a web page.

  • It’s bigger than you, and that’s a good thing As a offshoot to the course one student got a monthly meetup started with the charity that organized the course. That is a great outcome. But also accept that students have competing interests and not everyone will follow trough.

  • Teaching and demonstrating are not the same thing. We spent nearly all the time with HTML and CSS. I was conflicted whether to introduce JavaScript at all given the time constraints. I decided to demonstrate rather that teach. and I showed the students this example and demoed the event listener on a page.

    document.getElementById("demo").addEventListener("click", function(){
        document.getElementById("demo").innerHTML = "Hello Functionality";
    });
    

    This is not something you normally throw first thing at an absolute beginner. Most tutorials will begin at the logical end of explaining what programming is, and the basic programming concepts and move forward from there. All I wanted to do was just to demonstrate what JS used for and what the code looks like. Here is an example of the code listening for an event and changing HTML when a certain id is clicked. We went through the code keyword by keyword and I explained what each part does. I had no expectation that he student is able to code in this way after class. But at least I hope they have an inkling of what you can build and gotten curious about programming.

  • Internetting is hard is a very good resource. This was effectively my course plan. I also recommend this resource for any FCC campers who wants to move away from Codepen and learn more CSS.


#11

Great post. Should post this to Medium.


#12

[edit: didn’t catch that the class was already over… oh well :grin:]

I had a couple thoughts on this topic. I agree that the is a lot of value in learning an editor early, both because it better shows how to correctly set up projects and using an editor is inevitable if someone is going to keep coding. However, I might also point out that Codepen allows students to make something that much faster without having to worry about some of the minutiae of setting up proper headers/linking assets… etc. It also gives the projects portability, without having to sort through Git. Something that might have value if the student can access to computers outside the classroom.

There is value in getting your feet wet with without being overwhelmed with detail. Of course, you must also balance that with how much time you have, the motivation of the students, and what you are really trying to accomplish with this class. It sounds like the class time is limited so you will need to be very choosy with the material you cover.

If you have the time, you might be able to create a “profile” for the editor you decide to use. That might speed up the time it would take to actually start writing code :slight_smile:

Either way, this sounds like a fun and fulfilling project. Good luck!


#13

Thanks @owel that’s a good point… I might make a longer post on medium with a little more background on why and where someone might want to teach.


#14

Hi @Aaronms You bring up a good pint about the tools. Later on after the course when we had a meetup I gave a short presentation about styling links where did some live coding in Codepen then and there. I also showed how one can set up a pen and fork a project. Later we sent a follow up mail to all attendees with links to the Codpens we’ve created at the meetup. So when it comes to sharing code and trying out new ideas immediately Codepen really shines.


#15

On the first day, find the biggest guy there and just walk up and punch him in the face as hard as you can. You’ll get your butt kicked, but they’ll respect you after that.

Oh wait, that was something else, never mind.


#16

Ha. There was no need punch anyone in the face.That’s another movie you’re thinking of… My class was more “Dead Poet Society” meets “Hackers”.


#17

Yeah, I definitely would have gone with codepen and then once they got familiar with it, explained the few things that make codepen different than normal coding of a web page, maybe write up a handout explaining it. Codepen’s just more intuitive and easier to manage for beginners - it shows you how to separate your concerns and you don’t have to have 5 windows open. If you ever get to an intermediate level, then I’d haul out Atom.


#18

I’m a mean teacher… “And now, lets start by opening up Notepad…” :laughing:

I taught my daughter HtML / CSS and also used to offer training to clients who wanted to learn how to manage their own websites (this was before WP became a popular option).

And yeah, I really did start out by having them fire up Notepad and start learning from scratch. Partly because everyone has it on their computer, and partly because it was how I started off teaching myself…not only am I comfortable with it, having to use that helped me really learn because I had no automated help to do things for me.

Keep in mind though, like I said, Im mean…Im totally aware its hard to start off with no tools to help make things easier, but…I will also say that within a week or two, everyone Ive taught was able to hit the ground and do basic editing of their websites and use FTP to deploy without much of any help from me…None were computer whizzes who even had much of an interest in web dev…they just chose the option to pay for classes instead of the higher cost of paying for maintenance.

It never occurred to me really they wouldnt be able to learn if they didnt use tools to make it easy…but I think anyone can learn if its interesting and they are motivated to. If I were to do it today, Id be a bit more lenient and go for Notepad++ since it has syntax highlighting.

ETA having said that, personally, if I were teaching someone interested in web dev, I would teach using the tools they would be using beyond the class so that they become familiar with an actual working environment.


#19

@cndragn Oh my. Coding directly in Notepad sound pretty unforgiving.

That was part the reason I went with atom. I had the students install a w3c validation package so that they could pinpoint and analyze their errors. Another neat thing with Atom is that if you just open a document and type html + TAB it will autocomplete the whole html head. But I had them typing the head a few times manually before I showed the autocomplete trick. Maybe that’s mean in some sense but it made sense to go through the head line by line before we learned the easy way.


#20

Nothing wrong with that:)

Just curious, did you start with all CSS/HTML/JS all typed out in the same HTML file?
Then later on, asked them to split it into different source files.

Maybe even start out with inline CSS, then later breaking it out into IDs and Classes… then separate .CSS file.