Hello!<p>I'm a frontend develop for ~10 years, and I've been invited to a neighborhood school (8th graders) to present a one hour demo related to web technologies, mainly HTML, CSS, and JS.<p>To gain some context, I want to start with a brief explanation about basic stuff like what is a server, browser, how they interact and so on. Then explore a little bit the developer tools by modifying some pages in the browsers. For the final part, I want to edit with them a premade portfolio website so they can add their bio. It will be great if at the end they can say "I made a website".<p>The whole idea for this hour is to explain how web technologies work and what they can achieve with that.<p>I'd love to hear what other ideas you all might have to totally wow some teens or what experience you had in a similar situation.
I don't want to rain on your parade, but it seems to me that HTML, CSS, and JS is not really where you should focus. The power and value of the WWW comes from what can be done on the web--search, communication, collective action, command and control, forecasting, and so forth and how it can be integrated into real life. The magic of the web is now machine learning, search engines, real-time translation, and the like.
Modifying sites with browser dev tools is a great step, and a good lesson in "it's trivial to fake a screenshot of a website" at the same time.<p>I'd recommend using glitch.com for the last part: Web editor, you can fork a template and it's actually online immediately.<p>A simple JS-game could be fun too, but it'll be tricky to show that effectively in the time.
I'm a sysadmin and worked in education for 13 years. Most of the age group you are referring to don't understand the difference between who provides their broadband and their browser. My advice would be more show and less tell.<p>For example, setup an actual server in the classroom. Get them browsing/connecting to the server and then pull the plug (ethernet/wifi) on the server. Then they will see the connection.<p>Have the students deface their school website with developer tools. That will also go down well I'm sure.<p>I guess I am saying keep it simple. I did a lesson once on how the web connects with the students holding bits of string. The students enjoyed it and some staff passing by even sat in on the lesson.<p>Try your best to cater for all the students in the class and not just the whizzos and you will do well.<p>(Also be prepared to have 10/15 minutes of your time lost to students arriving and getting settled in.)
Forms of instant-messaging are often good because they can be simple, immediately applicable, and inherently social so you have a chance of sparking a group of 3-5 nerdy kids running with it.<p>A neat thing would be if you can open up chrome developer tools console on two machines. Then, open up a websocket between the two so that you can talk between the two.<p>Bonus points if:<p>- you can send images/gifs<p>- it can be a chatroom<p>Post instructions on how to do this to a github page with a highly-memorable name. That way they can go home and do the same thing on the cheap chromebook their family can afford.
The largest failure of the early web was that the innovators didn't realize how interested people were in having a little spot to call their own. I would take advantage of that and build a simple app for the kids to create their own spot. Let them build it, modify it, whatever... my guess is that it will generate some interest...<p>or who knows... I don't really know that much about 8th graders :)
Build a real-time pain canvas using something like phoenix channels. anyone can join with a cellphone or laptop. draw with mouse or finger. even the seasoned dudes at elixirconf wowed when it happened live lmao<p><a href="https://youtu.be/qPiZTxUAaVM?t=1797" rel="nofollow">https://youtu.be/qPiZTxUAaVM?t=1797</a>
One hour would be the right amount of time to teach them about cloud-based storage, services and apps. Either iCloud or google drive/apps work well as examples and would provide the students with the foundation for understanding more of the www