DEV Community

loading...
Cover image for πŸŽ‰ My daughter built her first website πŸ¦„

πŸŽ‰ My daughter built her first website πŸ¦„

cchana profile image Charanjit Chana Originally published at 1thingaweek.com ・2 min read

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.

Screenshot of diya2021.1thingaweek.com that starts with a pink background and a purple button.

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.

Discussion (15)

Collapse
graciegregory profile image
Gracie Gregory (she/her)

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 #shecoded tag 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 πŸ’ͺ

Collapse
cchana profile image
Charanjit Chana Author

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!

Collapse
shaijut profile image
Shaiju T

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 HTML first ? I think kids should be introduced to use technology gadgets after high school.

What do you think ?

Collapse
cchana profile image
Charanjit Chana Author

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 πŸ₯°

Collapse
nicozerpa profile image
Nico Zerpa (he/him)

Diya is so awesome that she paints the website with your favourite colour!

Collapse
kassandramichelle profile image
Kassandra Michelle

This is so sweet! Tell your daughter that I love her website...especially the unicorn πŸ¦„πŸ˜Š

Collapse
cchana profile image
Charanjit Chana Author

Thank you! She's really enjoyed building something and has been so surprised with all of the feedback she's had πŸ₯°

Collapse
faraazahmad profile image
Syed Faraaz Ahmad • Edited

Awesome! Reminds of the first webpage I made for myself using Microsoft Frontpage in 4th grade

Collapse
cchana profile image
Charanjit Chana Author

Yes, not far off from my first experience of getting stuck into JavaScript too!

Collapse
localstorage profile image
Michael Hungbo

Congratulations to her! I wish her a successful journey in the world of JavaScript!

Collapse
cchana profile image
Charanjit Chana Author

Thanks. It satisfied an itch she had, which was really fun to see!

Collapse
tankerguy1917 profile image
tankerguy1917

I love this. Could you tell your daughter I said I like her website

Collapse
cchana profile image
Charanjit Chana Author

She said to say thank you 😊

Collapse
egilhuber profile image
erica (she/her)

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!

Collapse
cchana profile image
Charanjit Chana Author

Finding something easy enough to explain but hard enough to be a bit of a challenge was tough!

Forem Open with the Forem app