7 ms·
Ask HN: How would you introduce kids to web dev?
Two kids (ages 12 and 15) have expressed interest in learning web dev.
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?
- jjgreen 3y agoTell them "put 'React' into Google", then beat them with sticks until the MVP is completed.
- rkss1 3y agohttps://www.freecodecamp.org/ https://www.freecodecamp.org/ has been pretty effective for some of my adult friends. Might be worth a try for kids too
- joshxyz 3y agoscrimba.com is game changer. you can edit directly what is on the screen.
- hm-nah 3y agoIDK… 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.
- andrewflnr 3y agoNewbies who want to understand what the hell they're doing don't start with any sort of boilerplate generator, no.
- codingclaws 3y agoI 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.
- houseatrielah 3y agoDon't teach them 1997 web dev. Get them a React Udemy course or similar.
- logicalmonster 3y agoI'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.
- gorjusborg 3y agoNah, don't teach them letters and words. Teach them 'War and Peace', letters and words are so... outdated.
- 257m 3y ago[dead]
- brudgers 3y agoI 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.
- runjake 3y agoHow 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.
- andrewflnr 3y agoNotepad, 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.
- aaroninsf 3y ago"Frameworks: not even once."
- dieselgate 3y agoBrowser dev tools! Edit the DOM markup ad hoc, change the DOM with JS, show what the JS console can do, change the styling
- afjeafaj848 3y agoI would never inflict that on my kids
- sdfghswe 3y agoNot sure if you're being sarcastic, but this is exactly what I thought.
- silenced_trope 3y agoHaha 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 https://www.youtube.com/watch?v=CGp4bX8b5fM
- schwartzworld 3y agoThat'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!
- deleted 3y ago[deleted]
- joewhale 3y agoCs50
- drannex 3y agoDeveloper 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.
- 3836293648 3y agojQuery and draggable. It's extremely out of date now, but draggable is effective
- mortallywounded 3y agoFor most kids (like me when I was ~8) games. Make a game.
- blah_why_not 3y ago[dead]
- rchaud 3y agoLike 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.
- revskill 3y agoShow 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/
- AISnakeOil 3y agoA child shouldn't have to endure such pain.
- cvan 3y agoIntroduce them to https://neocities.org https://neocities.org and https://csszengarden.com https://csszengarden.com to have fun whilst learning good ol' HTML and CSS.
- Samisp 3y agoI 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.
- idrios 3y agoI'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.
- throwaway154 3y agoNext, 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!
- spokeonawheel 3y ago[dead]
- deleted 3y ago[deleted]
- BrandoElFollito 3y agoWhat 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.
- spokeonawheel 3y ago[dead]
- zachlatta 3y agoIf they're interested in game development, you should show them Sprig! https://sprig.hackclub.com 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.
- plz-remove-card 3y ago[dead]