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?
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.
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.
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 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!
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!
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.
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.
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.
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 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.
you can edit directly what is on the screen.
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.
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.
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.
