Ask HN: How would you introduce kids to web dev?
40 comments
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.
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.
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.
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.
I would never inflict that on my kids
Haha same here, but OP did ask.
But as a web dev I wouldn't push my children into it unless they were interested.
Same with if I were a high school gymnastics coach: https://www.youtube.com/watch?v=CGp4bX8b5fM
But as a web dev I wouldn't push my children into it unless they were interested.
Same with if I were a high school gymnastics coach: https://www.youtube.com/watch?v=CGp4bX8b5fM
That's a mind blowing take to me. Webdev has been so lucrative and easy compared to my previous careers, you could even say cushy.
But more than that I think people tend to associate teaching kids a skill with pushing them toward that career. Do I want my kids to be professional web devs? Probably not. Do I want them to be good enough at programming that they could publish their own work or promote their own interests? Yes!
But more than that I think people tend to associate teaching kids a skill with pushing them toward that career. Do I want my kids to be professional web devs? Probably not. Do I want them to be good enough at programming that they could publish their own work or promote their own interests? Yes!
[deleted]
Not sure if you're being sarcastic, but this is exactly what I thought.
Tell them "put 'React' into Google", then beat them with sticks until the MVP is completed.
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!
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!
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.
Introduce them to https://neocities.org and https://csszengarden.com to have fun whilst learning good ol' HTML and CSS.
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.
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.
If they're interested in game development, you should show them Sprig! https://sprig.hackclub.com
It's an open source JavaScript game engine with lots of tutorials for beginners. There's an amazing gallery of JavaScript games built by teenagers just like them on the site too.
When they make their own game, we will send them all the parts they need to build a physical Sprig console for free as a grant! We are a nonprofit foundation.
It's an open source JavaScript game engine with lots of tutorials for beginners. There's an amazing gallery of JavaScript games built by teenagers just like them on the site too.
When they make their own game, we will send them all the parts they need to build a physical Sprig console for free as a grant! We are a nonprofit foundation.
A child shouldn't have to endure such pain.
What I did for friends' kids that wanted to try this out (mine were unfortunately not really interested) was to buy them a connected bulb and switch and show them Home Assistant.
They were happy to create automations based on various scenarios and we gradually went towards showing them how to switch outside of HA, and eventually through a button on web page they would write themselves.
And then CSS (the semantic world of HTML will have to wait and they will be <div>-ing all the way), Vue and JS and BAM! now they are lawyers and doctors :)
But they still have the connected bulb.
They were happy to create automations based on various scenarios and we gradually went towards showing them how to switch outside of HA, and eventually through a button on web page they would write themselves.
And then CSS (the semantic world of HTML will have to wait and they will be <div>-ing all the way), Vue and JS and BAM! now they are lawyers and doctors :)
But they still have the connected bulb.
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.
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.
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 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.
scrimba.com is game changer.
you can edit directly what is on the screen.
you can edit directly what is on the screen.
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.
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.
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.
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.
Show him a game with the web, let him play, enjoy it, then teach him how to make such game.
https://jsfiddle.net/fjrqosb0/
https://jsfiddle.net/fjrqosb0/
https://www.freecodecamp.org/ has been pretty effective for some of my adult friends. Might be worth a try for kids too
[deleted]
Browser dev tools! Edit the DOM markup ad hoc, change the DOM with JS, show what the JS console can do, change the styling
For most kids (like me when I was ~8) games. Make a game.
"Frameworks: not even once."
jQuery and draggable. It's extremely out of date now, but draggable is effective
Cs50
Don't teach them 1997 web dev. Get them a React Udemy course or similar.
I'm not a computer science teacher, but I'd think that what React is even doing would be too confusing without understanding a basic bit of HTML and CSS first.
Nah, don't teach them letters and words. Teach them 'War and Peace', letters and words are so... outdated.
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.
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.
Newbies who want to understand what the hell they're doing don't start with any sort of boilerplate generator, no.
I was going to set them up with a starter project on https://glitch.com containing an index.html that demos the various html elements. I'd let them fiddle around with that for a bit, and then they choose a topic they're interested in and we'd build a small site about it.
I'm not mentioning css until they ask "How do I make it look nice?" and probably not mentioning js at all for now.
Does that seem like a decent approach? How would or how have you done it?