Ask HN: How would you introduce kids to web dev?

Tell them "put 'React' into Google", then beat them with sticks until the MVP is completed.

https://www.freecodecamp.org/ has been pretty effective for some of my adult friends. Might be worth a try for kids too

scrimba.com is game changer.

you can edit directly what is on the screen.

IDK… how about having them take a screenshot of their favorite website, then use GPT-4V to prompt and generate some boilerplate, then use VS Code Live Server extension to render the page. Illustrate how the HTML/CSS affect the web page.

Could be a fun on-ramp to get them excited. Have to be careful giving them AI at the start, but who knows! It might be THE way to go.

Do newbies start with notepad++ and a LAMP stack or VS Code and ChatGPT!? Feels like it’s up in the air right now.

I think you're doing it right, just HTML at the start. Maybe show them that they can do just HTML with a single .html file and no internet connection.

Don't teach them 1997 web dev. Get them a React Udemy course or similar.

I would start by sitting down with them and showing them.

Pretend your kids are the most important thing in your life and prioritize their growth because your time with them is precious and cannot be gotten back and it will be gone in a few fleeting days.

Maybe the web development sticks. Maybe it doesn’t. Neither is the important thing.

Anyway show them css because it is a way of taking them seriously. And because it means you’re putting in the work not phoning it in.

No excuses. No sending a link.

Good luck.

How I introduced them was by showing them how to edit the CNN homepage with the browser developer tools.

Being able to edit headlines to be funny (and perhaps somewhat offensive) and share screenshots with their friends really piqued their interest. They then taught their friends how to do it.

Then, they moved onto learning HTML and CSS, which they found kind of fun. After that, they started some basic JavaScript -- at which point they quickly lost interest in webdev.

But they still play with the browser dev tools.

Notepad, maybe notepad++. Fast iteration cycles, so they can see how their code affects what they see. When they've got the hang of that, JavaScript with rudimentary output; don't throw them into the DOM APIs right away. Worked for me, anyway. My first JS was mostly alert boxes.

Having a demo page sounds good as a reference, but I wouldn't use it as a template. With HTML I think you can and should start absolutely from scratch. Among other things you want to give your kids the chance to see what happens when various pieces are missing.

"Frameworks: not even once."

Browser dev tools! Edit the DOM markup ad hoc, change the DOM with JS, show what the JS console can do, change the styling

I would never inflict that on my kids

Cs50

Developer tools first and foremost.

Second, maybe spin them up a tumblr blog, and let them hack on a theme (changing colors, etc), same thing as an old-school myspace setup and it taught _a lot_ of people in the early 2010s how to code.

Codecademy is another good one to get some basics in a more educational way, but it might turn them off because of that.

jQuery and draggable. It's extremely out of date now, but draggable is effective

For most kids (like me when I was ~8) games. Make a game.

[dead]

Like you're doing, start with basic HTML elements. Make sure to include pictures, audio and video so it feels more interactive.

Then move on to CSS. Put items next to each other using grid, and use that to explain the difference between HTML (structure) and CSS (styles).

Then have some fun with CSS animations. And finally, a tiny bit of JavaScript to control the animations.

Show him a game with the web, let him play, enjoy it, then teach him how to make such game.

https://jsfiddle.net/fjrqosb0/

A child shouldn't have to endure such pain.

Introduce them to https://neocities.org and https://csszengarden.com to have fun whilst learning good ol' HTML and CSS.

I would recommend you give them something with short feedback loops, where they get a sense that they're doing something and can actually see it. I think this will peak their interest and see that "Oh, I did that, what else can I do?"

I was twice their age when I began learning how to code and the first time I saw the 200 OK with a "Hello, World!" on my API something in my monkey brain just clicked and I just wanted more.

I'll pitch something out of left field.

Lots of kids like making games, and RPGMaker is a game engine that lets you make games with 0 programming knowledge, but also gives you ultimate freedom to modify the game with plug-ins that you can download or write yourself.

I bought RPGMaker MV with a bunch of assets through humble bundle 5 years ago for like $80, and learned a ton about software develpment by trying to learn and make changes to the engine.

I guess if your kids are really just into web dev then this is would be orthogonal, but under the hood MV and MZ use html/css/js, where I think MZ was mostly a huge refactoring of MV to be structured like your more typical node.js project, so this would still be teaching them things relevant to web dev.

Next, whip out a copy of "Beginning Java 2.0". /s

Have them set a reasonable end-goal, a thing they'd like to make. Give them the tools to do this. Mark out some steps and scaffold them along the way.

When they've made that, ask what they'd like added. This introduces iterative development. Mark out a plan for that.

Then start all over with a similar but different end goal and have them gain confidence repeating/reinforcing the use of what they picked up with the first goal. Iterate in a different direction.

When adding a their project, perhaps the concept of re-use, making into modules or templates, might sound useful to them.

Then have them go less unguided by you personally with a self-paced course from Udemy or similar. They should be acquiring some self-teaching at this stage. Step in when they're having a lot of trouble.

The key theme here is building efficacy - sort of 'effective confidence' though a distinct term, and that's great for learning anything for life.

Edit: At no point be shy of printing a page of the code you're on and working through it with a pen. Things like loops and recursion might take some repetition practice on their own; introduce crazy things like while or even prove recursion through box logic if you're particularly sadistic!