Just over a week ago, I asked my daughter if she'd be interested in writing some code and building a simple web page. We've played around with a few games on Code.org a few times as part of her homework during lockdown but never really built something from scratch.
I wasn't sure how it would work between us, I like mentoring as a side affect of what I do at work, but teaching isn't really my calling. But we gave it a shot and actually came up with something fun over in a little over an hour overall.
Starting with the basics
We kicked off with some HTML. I explained very loosely how tags worked and where certain tags sat.
Once we'd got through that, she was eager to get into building something and she was amazed that she could write out a few things and then see them in the browser. We literally started with a button that had no display value. She was unimpressed... until we added a display value. In our second session, we came back and structured the page a little better, but this was a great start although a button that does nothing will only impress someone for so long!
So we moved on to some basic JavaScript, and introduced her to the alert() function. That was a great step as she got it pretty quickly: "I can make a button do something when you click it".
Again, how long is that actually impressive for? The answer is a few minutes at best for a 7 year old...
So we brought in prompts. Now she could ask a question and remember the answer... but why would we do this? Oh wait, we can add the value in to our alert!
This was a bit that really impressed her and helped to keep her attention. We probably entered a value into the prompt 10 times, or more, as we tested.
In our second session, as well as a more structured page, we introduced some CSS, utf-8 characters (unicorns, of course) and introduced a second prompt that would influence how the page looks.
It was a really fun exercise and something I've thought about for years. I much prefer building dumb websites and I think that helps to make it easier to introduce some of these concepts. Everything else can wait until there's some real interest in the topic.
The code
I've uploaded what we've done to GitHub, you can find it at cchana/diya2021, feel free to browse through the code and share it with your young ones. We'd love to see what others do and maybe even some pull requests.
Above is a screenshot of the page after the initial load in all of its purple glory. If you want to see it in action and give it a go, head over to diya2021.1thingaweek.com.
Top comments (15)
Hi Charanjit! I'm a moderator here at DEV. Thank you so much for your post.
Just wanted to let you know that I've replaced the
#shecodedtag in this post with#shecodedally— we reserve the SheCoded tag for posts authored by women in our community but are SO appreciative that you are participating in the event as an ally!Also, I cannot wait to read your daughter's #SheCoded post here on DEV one day if she continues to enjoy coding 💪
Not a problem, thanks for changing it I didn’t realise there was an alternative for me to use which was more appropriate.
She loves writing so you never know, we may something from her here one day!
Nice 😄,
Reading This , this and this post shows that most of them start at age of 8.
Some people were saying kids should be free at childhood and play in outdoors instead of siting front of computer, let them choose what to learn. But i think programming can make their mind to think logically and thus make their school subjects easy to understand.
What is her age ? How did you explain
HTMLfirst ? I think kids should be introduced to use technology gadgets after high school.What do you think ?
She’s 7. We just talked about html as if it was Lego which really helped.
I had no plans to introduce her to this kind of thing so early but she showed some interest after doing a few coding lessons at school so we gave it a shot!
Those are some interesting posts, I haven’t played with Python much but maybe it’s something we could learn together 🥰
Diya is so awesome that she paints the website with your favourite colour!
This is so sweet! Tell your daughter that I love her website...especially the unicorn 🦄😊
Thank you! She's really enjoyed building something and has been so surprised with all of the feedback she's had 🥰
Awesome! Reminds of the first webpage I made for myself using Microsoft Frontpage in 4th grade
Yes, not far off from my first experience of getting stuck into JavaScript too!
Congratulations to her! I wish her a successful journey in the world of JavaScript!
Thanks. It satisfied an itch she had, which was really fun to see!
I love this. Could you tell your daughter I said I like her website
She said to say thank you 😊
Love seeing how you kept her engaged! Seeing that you can make a button do things is the first big step to the big world of development!
Finding something easy enough to explain but hard enough to be a bit of a challenge was tough!