![\"Coding](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/Coding-an-html-virtual-journal-for-kids.jpg\")
<\/p>\n<\/p>\n
Welcome back to the third week of the 28 Days of Hands-On STEM activities for Kids<\/a> series. This week is all about computer science – Coding for Kids<\/strong> – which is quite timely, as we’ve just started introducing our 5.5 year old daughter Jewel to coding, or more specifically, to HTML only a few weeks ago.<\/p>\n I thought perhaps I could share how we are going so far.<\/p>\n My husband is the computer scientist in our household, and he’s keen to pass on that love to Jewel and Bumble, when they are ready. Jewel is just about there!<\/p>\n His rough timeline is as follows:<\/p>\n Step 0<\/strong>: Before we start, it’s best if kids can recognise upper and lower case letters, and be able to write basic sentences. Jewel is at this point now.<\/p>\n Step 1<\/strong>: Start a virtual journal (I’ll show you how below), which can be a place for kids to write about whatever topic they like. There might not even be a topic! Jewel just seems to be writing random sentences at the moment, and that’s completely fine. Her kindergarten-level phonetic spelling is OK too! Just getting familiar with typing, the layout of the letters, using the space bar, understanding that the words will automatically wrap as you type, using Enter to change paragraph, using Shift to create capital letters and other basic things like that (which, as adults, we tend to do automatically) is a great introduction to using computers.<\/p>\n Step 1a<\/strong>: We noticed that Jewel takes forever<\/em> to find certain letters on the keyboard, which is making typing slow and slightly frustrating. Of course, typing her journal and gaining familiarity with using a keyboard will help this! We’re also thinking of introducing a basic touch typing game, so that she can learn to touch type. We’re going to try this one<\/a>.<\/p>\n Step 2<\/strong>: Introduce some basic HTML coding to your journal. (See below for examples.) The fun thing about HTML is that it gives an instant response. Kids can get the hang of adding HTML tags to modify certain parts of their journal and instantly see the effect they’ve created. Because there is no end goal in mind, kids can tailor it to their own likes and interests, and learn just by playing around. (Which is how kids learn best, IMHO). Their skills can grow overtime, at their own pace. And their journal will likely become fancier as they learn new ‘tricks’. (I’m imagining Jewel’s journal may become quite gaudy, as she tries out various html tags. That’s part of the fun. And I can always introduce her to simplicity in design concepts at a later point \ud83d\ude42 ).<\/p>\n Step 3<\/strong>: When she’s ready, the next step we’re planning is to introduce Javascript, so Jewel can learn to create interactive components to her journal. But hold on to your horses, because she might not be ready for this step for a few years yet. (She is only 5…)<\/p>\n What I like about this approach is that it’s very child-led and open-ended. Kids can steer their virtual journal in whatever direction they want, and it can grow as their writing, typing, HTML and design skills grow.<\/p>\n I also like that their journal acts as a private webpage. There’s no server associated with this ‘site’. It’s not public, so there’s no security issues, no hosting concerns, etc. If she wants to share it publicly later on, she can. But that may not be for a few years yet, at which point we can address internet security, server administration, etc.<\/p>\n 1.<\/strong> Start by creating a new local folder on your computer that’s easy to find (perhaps on your desktop).<\/p>\n 2.<\/strong> Open up a new text document. (Note: Don’t use Word. You need to use a program that saves plain text files, like Notepad). Save the (blank) document as ‘.html’ in your new local folder. The ‘.html’ tells your computer that the document is a web page.<\/p>\n 3.<\/strong> Let your kids type away! They can write whatever they want. Spelling doesn’t matter (at least, not at this point in our household). Save the file (but don’t close).<\/p>\n 4.<\/strong> Go back to your local folder, and double click on the file, which will open it up (as a separate tab) in a web browser. Now you can see your masterpiece ‘live’. At this point, it will look pretty plain.<\/p>\n 5.<\/strong> Now we can experiment with coding and making it pretty. Go back to your original file and start to add some html tags. Here are some easy tags that we’re starting with:<\/p>\n 5a.<\/strong> If you want to add an image, you must copy it first into the folder that you’re working from.<\/p>\n 6.<\/strong> Click save, and then go back to your web browser and click refresh (F5). You should be able to see all your amazing effects. It’s like 1995 all over again!<\/p>\n 7.<\/strong> Play around some more! Remember to keep saving your file, and click refresh in your browser to see any new changes take effect.<\/p>\n This is the code that Jewel has so far in her virtual journal. (Note: I’ve changed the girls’ names to their blognames, but have left everything else the same.)<\/p>\n <img src=”mysister.JPG” width=”20%”><\/img> once upon a time ther was a<\/p>\n And this is how it looks on her webpage.<\/p>\n As you can see, it’s very much a work in progress, and probably always will be. But she’s learning, and having fun, and I reckon that’s awesome!<\/p>\n To create basic code, you need an opening tag (<your code>) before the text that you want to change, and then a closing tag with a forward slash\u00a0(<\/your code>)\u00a0 afterwards. So if you want to make the word example bold (or strong as it’s called in html), then you would wrap the word example in code like this: <strong>example<\/strong>. Whilst that might sound complicated, kids soon get the hang of it, probably faster than many adults would.<\/p>\n Here are some fun and easy html tags that you might want to try.<\/p>\n Note: Whilst phonetic spelling is fine for the content (if that’s developmentally where your kids are up to), unfortunately it’s not OK for the html coding. That will need to be 100% correct to work. But this is all part of the trial and error process. “Why didn’t it work. Let’s go back and have a look. Does yours look exactly the same as here? What about if you try something else?”<\/p>\n![\"Coding](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/Coding-for-5-year-olds.jpg\")
<\/p>\n![\"5](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/5-year-old-typing.jpg\")
<\/p>\n![\"HTML](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/HTML-Virtual-journal-coding-for-kids.jpg\")
<\/p>\n![\"coding](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/coding-for-kids-how-to-introduce-html.jpg\")
<\/p>\nHow to start a virtual journal for kids and introduce HTML<\/h2>\n
\n<span style=\"color: blue;\"><h1>jewel is 5 and a haf. and i love ice-cream! i love my little sist bumble a lot!
\nJewel's website ! i love to play with my little sister bumble!i love to play everything that ather kids like to play! a lot!<\/h1><\/code><\/p>\n
\n<img src=”icecream.jpg” width=”10%”><\/img><\/p>\n
\n![\"Screenshot](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/Screenshot-of-virtual-journal-written-by-a-5-year-old.jpg\")
<\/p>\n\n\n
\n \nType<\/th>\n HTML Coding<\/th>\n Example<\/th>\n<\/tr>\n<\/thead>\n \n Heading 1<\/td>\n <h1>example<\/h1><\/td>\n \n example<\/h1>\n<\/td>\n<\/tr>\n
\n Bold<\/td>\n <strong>example<\/strong><\/td>\n example<\/strong><\/td>\n<\/tr>\n \n Italic<\/td>\n <em>example<\/em><\/td>\n example<\/em><\/td>\n<\/tr>\n \n Blue Font Colour<\/td>\n <span style=”color: blue;”>example<\/span><\/td>\n example<\/span><\/td>\n<\/tr>\n \n Pink Font Colour<\/td>\n <span style=”color: pink;”>example<\/span><\/td>\n example<\/span><\/td>\n<\/tr>\n \n Aquamarine Font Colour<\/td>\n <span style=”color: aquamarine;”>example<\/span><\/td>\n example<\/span>
\n(Jewel’s favourite colour)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
![\"Coding](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/Coding-for-Kids-how-to-create-a-virtual-journal-in-html.jpg\")
<\/p>\n![\"28](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/28-Days-of-Hands-On-STEM-1000x740.jpg\")
<\/p>\n![\"Kids](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/Kids-coding-how-to-create-a-virtual-journal-in-html.jpg\")
<\/p>\n![\"Coding](\"https:\/\/gosciencekids.com\/wp-content\/uploads\/2016\/02\/Coding-for-Kids-introducing-html-and-computer-science.jpg\")
<\/div>\n","protected":false},"excerpt":{"rendered":"