DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Salazar
Salazar

Posted on

What's the most important topic to teach when teaching webdev?

I'm currently working with a friend of mine in a non-profit, sideproject to teach highschool students (and up) the very basics of web development in order to empower them and give them a minor boost in their careers for those who are looking to start a career in tech.

We'll be using the ruby language because it is the one we master, but also because we find it easy and fast to learn and hack a thing or two. Being so, we're starting with the very basics of the language up to (surprise, surprise) a Rails aplication. Maybe a web scrapper in the way just so they see the potential.

However, I'd like some input on what would you teach, given the opportunity.

Wait for a follow-up post regarding the experience!

Top comments (9)

Collapse
 
kspeakman profile image
Kasey Speakman • Edited on

Ruby is probably good to get them started with programming in general. But the web is primarily defined by HTTP, HTML, CSS, and Javascript. These are the standard building blocks that every web dev should be familiar with. I realize that you probably can't cover those in a single class. Probably the most you could do is an overview of what parts they play.

One thing I like to do to demonstrate the web is go to some common website, open the developer console / element inspector, and add my own elements to it, style the element, add some click behavior (e.g. color change). People tend to be surprised by seeing their favorite websites manipulated so easily. But it paves the way for you to explain how your browser fetches and renders the website and that its just running on your machine and communicating back to the website's API. And to explain HTML, CSS, and JS in terms of how you changed the website (structure, style, and behavior).

Collapse
 
ben profile image
Ben Halpern

On this note, a Chrome extension could be a fun project because so much of the underlying complexities are taken away, and it gives kids the potential to be pretty creative. Like "turn the whole internet pink" or something like that. Probably not the right first project, but it could definitely make kids feel like they're sort of "hacking" the web.

Collapse
 
hslzr profile image
Salazar

This "test group" I'll be starting with has allegedly some training in HTML+CSS, so yeah, I had totally forgotten to add those to the program. I think it'll be easier for them to be amazed to actually see some inmediate change on the things they'll be working on.

Thanks for the input!

Collapse
 
ben profile image
Ben Halpern

If you're teaching Ruby, I'd definitely try to mostly stick to the things that environment makes pretty straightforward, like serving HTML views, as opposed to the Ruby + JS framework. Mostly because I think the most important thing is to keep the students enthusiastic and feeling like they can make progress. If they can stay confident and enthusiastic, they'll conquer the more complex things down the road.

I like the idea of the web scraper because you can kind of say something like "This is basically what Google does to crawl the web, just at a much bigger scale", I feel like if they felt like they were accomplishing something like that, it would be encouraging.

Building an app similar to something they're familiar with could also be encouraging. I'd say an Instagram clone is a pretty good target in that arena.

If you had those two possible directions and let the class vote on which one at the beginning, or split into two groups, that could be a fun way to get them feeling agency over the project right from the beginning.

Collapse
 
hslzr profile image
Salazar

Yeah, I don't think I'll be touching any JS frameworks right away (maybe a follow up, more advanced class?) for the sake of simplicity.

Also, I hadn't thought of cloning an existing app, sounds totally more exciting than a blog+comments project. More creative, also.

Thank you!

Collapse
 
ben profile image
Ben Halpern

Instagram is essentially a pretty simple blog if you're cloning it on the web. But I think it speaks to kids a lot more, and is something you can definitely do with pure Ruby.

Along the way, make sure to let the kids know that the web and native app development are pretty interchangeable and if they want to go further they can learn the specifics of developing for the phone if they wanted to in the future.

Collapse
 
andy profile image
Andy Zhao (he/him) • Edited on

I agree with most of the comments already about Ruby. There's a great book about game development that might help:
Pragmatic Programmer - Learn Game Programming with Ruby by Mark Sobkowicz.

Aaaaand to play devil's advocate: game development is fun, but I think it's easy to fall into the trap of "let's make a game because it's fun!!!" If making a game/games were the whole curriculum, I feel like students might connect the experience as "programming = just games". If it were a section of the whole thing though, I would love that. I don't have any experience teaching or learning games/game development though Β―\_(ツ)_/Β―

Also, the book has a walkthrough on installing Ruby on Windows, which is a great plus in my book. (hah!)

Collapse
 
sumeetjain profile image
Sumeet Jain (he/him) • Edited on

If this is their first programming class at all, then I would probably caution you away from Ruby. I speak from experience, having taught a lot of Ruby to beginners over the years. Ruby's syntax flexibility is a pain for new developers, because it takes longer for them to internalize patterns like what a method call looks like (since, in Ruby, it might look like str.join(" ") or str.join " ").

I wrote something up for a class of total beginners to coding: github.com/omahacodeschool/javascr...

It's intended to help someone get started with a stricter language that is also relevant to modern web development: JavaScript. Usually the biggest knock against JS is how hard it is to just get started (because everyone overloads their "beginner" frameworks with unnecessary files and dependencies). The repo above is minimal, and I've used it successfully with classes--having them build a basic Rock-Paper-Scissors command-line game for starters.

That said, if your students already have some programming background, carry on,

Create an Account! The only reason people scroll to the bottom... Β 
is because they want to read more.

Create an account to bookmark, comment, and react to articles that interest you.