title: Programming for kids url: https://github.com/jackdoe/programming-for-kids hash_url: 62f9f5083de61124ed4d9fe1b458d505 ``` ┌─┐┬─┐┌─┐┌─┐┬─┐┌─┐┌┬┐┌┬┐┬┌┐┌┌─┐ ├─┘├┬┘│ ││ ┬├┬┘├─┤│││││││││││ ┬ ┴ ┴└─└─┘└─┘┴└─┴ ┴┴ ┴┴ ┴┴┘└┘└─┘ ┌─┐┌─┐┬─┐ ├┤ │ │├┬┘ └ └─┘┴└─ ┬┌─┬┌┬┐┌─┐ ├┴┐│ ││└─┐ ┴ ┴┴─┴┘└─┘ > by: Borislav Nikolov > year: 2021 The parent has to know how to program. Spend 30 minutes per day. Every day. "Anything worth doing is worth doing badly." — G. K. Chesterton ```



# Hello World ::: warning *This chapter is for parents, kids skip to the next one.* [day 0 - the computer](https://github.com/jackdoe/programming-for-kids#day-0-the-computer) ::: ## Why I think modern education treats programming as 'career path', I think of that to be wrong. I treat it as literacy. Being literate lets to experience a different world than those who aren't. It is not about having a job, I can't even explain it, being literate just allows you to see the fabric of what everything is made of. Imagine schools were teaching violin en masse, how would that go? How many kids will be able to make a decent sound? How many will drop out because they are stuck and the rest have to move on because the tests say so? Sometimes my daughter doesn't like to code, or to read for that matter, of course the rest of the internet is so much more interesting. We are competing with hundreds of thousands of developers in Supercell and Facebook and TikTok and Netflix that train billion parameters models so they can squeeze every last bit of attention from our kids. Of course it is going to be difficult. But, I thought to myself, does that mean I should not try? So a change of approach is needed, completely individualistic and personal approach. Maybe she will grow hating it, or even hating me. Parenting is difficult. We are 7 months in, and so far she doesn't hate me. ## About the book This book is for parents who know how to code and for kids who don't, but especially for parents and kids who can spend 30 minutes per day, _every day_. I am writing this book as I am teaching my daughter (10), and you know how in some cooking shows, they skip the part where the food is cooking? I wont do that. The book will be longer than it should. Again, if your children are older, or younger, this book might not work, you could of course still find pieces that work for you. This is more of a log of my experience so far. I am writing it as if I am talking to my daughter, so the style might be weird, but for you it should be more of an pool of examples you could use, and maybe just get ideas from the text. Try to avoid giving the book to your child and say "do this chapter", but in is also good experience to be able to do something alone. Also its nice to print a copy so they don't just copy paste. What you need: * Computer * Patience * Internet * Patience If you don't have a you can buy raspberry pi 400 for 70$ or so, or something similar that you attach to your TV. If you don't have patience, buy some chamomile tea. You don't need internet subscription, but you would need a bit of internet to download python and do few google searches. In most of the weeks you also go back, waaay back, every day you re-iterate variables and for loops, print the numbers from one to 10 forever, ask how many times to be printed, etc. The emphasis on HTML helps with understanding hierarchy, `tr` is child of `table`, `table` is child of `body` body is child of `html`, `td` is a sister to `td` and both are children of `tr` etc, it helped a lot with my daughter understanding how the `else` is sibling to the `if` and how both are children to `while`. Also it is very easy to debug, and inspect, and get immediate feedback. There are many 'hackers' now on tiktok or youtube that shows you how to get a lot robux(money) in roblox by inspecting the page and modifying the HTML, so I think HTML is very important to be understood, not only because it teaches hierarchy, but also it is the canvas of the web. ## Other materials Play other games as well, https://tomorrowcorporation.com/ has some brilliant games, Human Resource Machine is great way to learn loops and conditional jumps, and 7 Billion Humans is amazing for high level concepts, including variables, recursion and sorting. Before we started with HTML we spent about 1 month with those games. They are just incredible and well worth their money. The Robot Turtles game is amazing as well, you can find it here: https://www.thinkfun.com/products/robot-turtles/ Scratch works for some kids, mine didn't enjoy it much. Buy few Arduino NANOs (cheap clones from amazon work as well, but you need to install ch340 driver), and some servo motors and write few super basic programs that turn the servo slowly in one direction or another. Connect `black/brown wire to gnd, red wire to 5v and orange wire to D9`, and run: ``` #include #define SERVO_PIN 9 Servo s; void setup() { s.attach(SERVO_PIN, 1000, 2000); } void loop() { s.write(0); delay(500); s.write(60); delay(500); s.write(120); delay(500); } ``` ## Motivation Sometimes there is very little motivation. Kids are super tired from school and playdates and extracurricular activities, makes it hard to spend 30 minutes per day on something. Netflix and YouTube and etc are so much more interesting than what I have to offer, it is a rigged game.. Sad that I have to compete with billion parameter models, but here we are. Anything worth doing, is worth doing poorly. If you cant spend 30 minutes, spend 15, spend 5 minutes if you have to, or even 1. It is all worth it. I try to spend time in the morning, at least on the weekends, and first thing after school on school days. Luckily now it is a bit easier while we work from home during the pandemic. We tried to setup time before or after dinner, and it doesn't go well. Sometimes material incentives are also very helpful, e.g. a promise 5$ gift card, but I think you will have to find out what works for your kids.
## week - 0 ## week - 000 [day-0 the computer](#day-0-the-computer) [day-0 files](#day-0-files) [day-0 ascii](#day-0-ascii) [day-0 magic](#day-0-magic) [day-0 how to google](#day-0-how-to-google) [day-1 touch typing](#day-1-touch-typing) [day-2 install python](#day-2-install-python) [day-2 make a useful program](#day-2-make-a-useful-program) [day-3 touch typing using your program](#day-3-touch-typing-using-your-program) [day-4 html - basics](#day-4-html---basics) [day-5 html - basics](#day-5-html---basics) [day-6 touch typing](#day-6-touch-typing) ## week - 001 [day-7 new touch typing program](#day-7-new-touch-typing-program) [day-8 touch typing](#day-8-touch-typing) [day-9 touch typing using your program](#day-9-touch-typing-using-your-program) [day-10 html - basics](#day-10-html---basics) [day-11 html - basics](#day-11-html---basics) [day-12 touch typing](#day-12-touch-typing) [day-13 html](#day-13-html) ## week - 002 [day-14 html - tables](#day-14-html---tables) [day-15 html - more tables](#day-15-html---more-tables) [day-16 html - multiplication table](#day-16-html---multiplication-table) [day-17 html - multiplication table](#day-17-html---multiplication-table) [day-18 touch typing](#day-18-touch-typing) [day-19 html - links](#day-19-html---links) [day-20 html - tree](#day-20-html---tree) ## week - 003 [day-21 html - view source](#day-21-html---view-source) [day-22 html - inspect](#day-22-html---inspect) [day-23 html - images](#day-23-html---images) [day-24 licenses](#day-24-licenses) [day-25 touch typing](#day-25-touch-typing) [day-26 html - title](#day-26-html---title) [day-27 html - fun (js)](#day-27-html---fun-(js)) ## week - 004 [day-28 print; functions; while; variables; conditions](#day-28-print-functions-while-variables-conditions) [day-29 print; if](#day-29-print-if) [day-30 functions; lists](#day-30-functions-lists) [day-31 functions; if; random; lists](#day-31-functions-if-random-lists) [day-32 lists; while](#day-32-lists-while) [day-33 for](#day-33-for) [day-34 love tester](#day-34-love-tester) [day-34 touch typing](#day-34-touch-typing) ## week - 005 [day-35 lists; while; continue](#day-35-lists-while-continue) [day-36 while; range; functions](#day-36-while-range-functions) [day-37 while; functions](#day-37-while-functions) [day-38 strings](#day-38-strings) [day-39 touch typing](#day-39-touch-typing) [day-40 functions; strings; range](#day-40-functions-strings-range) [day-41 basics of basics](#day-41-basics-of-basics) ## week - 006 [day-41 lists; if; while](#day-41-lists-if-while) [day-42 lists; functions; grid; while](#day-42-lists-functions-grid-while) [day-43 if; range](#day-43-if-range) [day-44 lists](#day-44-lists) [day-45 lists; functions](#day-45-lists-functions) [day-46 basic turtle](#day-46-basic-turtle) [day-47 range; while](#day-47-range-while) ## week - 007 [day-48 strings; functions](#day-48-strings-functions) [day-49 list; dictionaries](#day-49-list-dictionaries) [day-50 lists; if](#day-50-lists-if) [day-51 internet awareness - scams/viruses](#day-51-internet-awareness---scamsviruses) [day-52 internet awareness - how login works](#day-52-internet-awareness---how-login-works) [day-53 basics of the internet - ip/dns](#day-53-basics-of-the-internet---ipdns) [day-54 touch typing](#day-54-touch-typing) ## week - 008 [day-55 lists; functions](#day-55-lists-functions) [day-56 functions; if; random](#day-56-functions-if-random) [day-57 lists; functions; grid](#day-57-lists-functions-grid) [day-58 continue previous day](#day-58-continue-previous-day) [day-59 tuples; lists](#day-59-tuples-lists) [day-60 go back in time](#day-60-go-back-in-time) ## week - 009 [day-61 pygame; pygamezero; coordinates](#day-61-pygame-pygamezero-coordinates) [day-62 collisions; callbacks](#day-62-collisions-callbacks) [day-63 functions](#day-63-functions) [day-64 lists; functions](#day-64-lists-functions) [day-65 functions; collisions](#day-65-functions-collisions) [day-66 schedule; callbacks; functions](#day-66-schedule-callbacks-functions) [day-67 lists; functions](#day-67-lists-functions) ## week - 010 [day-68 lists; functions](#day-68-lists-functions) [day-69 sockets; functions; callbacks](#day-69-sockets-functions-callbacks) [day-70 lists; functions](#day-70-lists-functions) [day-71 strings; integers; while; functions](#day-71-strings-integers-while-functions) [day-72 reading code](#day-72-reading-code) [day-73 reading code](#day-73-reading-code) [day-74 strings; while; lists](#day-74-strings-while-lists) ## week - 011 [day-75 functions; callbacks; lists; encoding](#day-75-functions-callbacks-lists-encoding) [day-76 functions; callbacks; lists](#day-76-functions-callbacks-lists) [day-77 lists; encode/decode](#day-77-lists-encodedecode) [day-78 coordinates; functions; callbacks](#day-78-coordinates-functions-callbacks) [day-79 lists; encoding](#day-79-lists-encoding) [day-80 lists; functions](#day-80-lists-functions) [day-81 lists; encoding](#day-81-lists-encoding) ## week - 012 [day-82 lists; strings](#day-82-lists-strings) [day-83 lists; functions](#day-83-lists-functions) [day-84 lists](#day-84-lists) [day-85 list; functions](#day-85-list-functions) [day-86 lists](#day-86-lists) [day-87 read/write files](#day-87-readwrite-files) [day-88 flask](#day-88-flask) ## week - 013 [day-89 files; strings; lists](#day-89-files-strings-lists) [day-90 strings](#day-90-strings) [day-91 lists](#day-91-lists) [day-92 command line; command line arguments; files](#day-92-command-line-command-line-arguments-files) [day-93 pydoc](#day-93-pydoc) [day-94 editors - ed/nano/vi/emacs..](#day-94-editors---ednanoviemacs..) [day-95 memory; virtual computer; instructions; strings; lists](#day-95-memory-virtual-computer-instructions-strings-lists) ## week - 014 [day-95 memory; machine code; virtual computer](#day-95-memory-machine-code-virtual-computer) [day-96 binary; ascii; memory](#day-96-binary-ascii-memory) [day-97 lists; ](#day-97-lists-) [day-98 lists; read/write file](#day-98-lists-readwrite-file) [day-99 classes; lists; functions; cartesian coordinates](#day-99-classes-lists-functions-cartesian-coordinates) [day-100 touch typing; lists](#day-100-touch-typing-lists) [day-101 functions; strings](#day-101-functions-strings) ## week - 015 [day-102 touch typing day](#day-102-touch-typing-day) [day-103 read file; command line arguments](#day-103-read-file-command-line-arguments) [day-104 read file; command line arguments; dictionary](#day-104-read-file-command-line-arguments-dictionary) [day-105 basics of basics](#day-105-basics-of-basics) [day-106 read/write file; lists](#day-106-readwrite-file-lists) [day-107 lists; dictionaries](#day-107-lists-dictionaries) [day-108 dictionaries](#day-108-dictionaries) ## week - 016 [day-109 touch typing day](#day-109-touch-typing-day) [day-110 find code on tiktok](#day-110-find-code-on-tiktok) [day-111 lists; random](#day-111-lists-random) [day-112 use simple dictionary](#day-112-use-simple-dictionary) [day-113 discover pythontutor](#day-113-discover-pythontutor) [day-114 simple turtle](#day-114-simple-turtle) [day-115 practical coding, control roblox with python](#day-115-practical-coding-control-roblox-with-python) ## week - 017 [day-116 many turtles](#day-116-many-turtles) [day-117 another text editor](#day-117-another-text-editor) [day-118 search lyrics](#day-118-search-lyrics) [day-119 facial recognition; move 78](#day-119-facial-recognition-move-78) [day-120 program on your own form a book](#day-120-program-on-your-own-form-a-book) [day-121 scam check list](#day-121-scam-check-list) [day-122 lists; random; mutate](#day-122-lists-random-mutate) ## week - 018 [day-123 lists; callbacks](#day-123-lists-callbacks) [day-124 bmp format, images; encoding/decoding](#day-124-bmp-format-images-encodingdecoding) [day-125 lists; dictionaries](#day-125-lists-dictionaries) [day-126 read/write file](#day-126-readwrite-file) [day-127 callbacks; schedule interval](#day-127-callbacks-schedule-interval) [day-128 lists; cpu usage; resources](#day-128-lists-cpu-usage-resources) [day-129 eat your computer; memory; cpu](#day-129-eat-your-computer-memory-cpu) ## week - 019 [day-130 turtle; lists; classes](#day-130-turtle-lists-classes) [day-131 lists; files; dictionaries](#day-131-lists-files-dictionaries) [day-132 lists; classes](#day-132-lists-classes) [day-133 touch typing; lists](#day-133-touch-typing-lists) [day-134 lists; methods](#day-134-lists-methods) [day-134 if](#day-134-if) [day-135 dictionary; for](#day-135-dictionary-for) ## week - 020 [day-136 for; arrays; memory](#day-136-for-arrays-memory) [day-137 for; file; if](#day-137-for-file-if) [day-138 for; file; if](#day-138-for-file-if) [day-139 while; list; counter](#day-139-while-list-counter) [day-140 while; turtle; strings](#day-140-while-turtle-strings) [day-141 wiki; api](#day-141-wiki-api) [day-142 while](#day-142-while) ## week - 021 [day-143 strings](#day-143-strings) [day-144 strings; lists](#day-144-strings-lists) [day-145 while](#day-145-while) [day-146 while; classes](#day-146-while-classes) [day-147 while](#day-147-while) [day-148 money](#day-148-money) [day-149 creators, consumers and ideas](#day-149-creators-consumers-and-ideas) ## week - 022 [day-150 while; classes](#day-150-while-classes) [day-151 classes; while](#day-151-classes-while) [day-152 lists](#day-152-lists) [day-153 lists; dictionaries](#day-153-lists-dictionaries) [day-154 classes](#day-154-classes) [day-155 c++](#day-155-c++) [day-156 for; while](#day-156-for-while) ## week - 023 [day-157 strings; cin](#day-157-strings-cin) [day-158 if; while](#day-158-if-while) [day-159 strings; sizeof](#day-159-strings-sizeof) [day-160 pointers](#day-160-pointers) [day-161 if; while; functions](#day-161-if-while-functions) [day-162 if; while; variables](#day-162-if-while-variables) [day-163 if; while; lists](#day-163-if-while-lists) ## week - 024 [day-164 pointers](#day-164-pointers) [day-165 if; while](#day-165-if-while) [day-166 if; while](#day-166-if-while) [day-167 c; printf; scanf](#day-167-c-printf-scanf) [day-168 c; while; if](#day-168-c-while-if) [day-169 c; while; if](#day-169-c-while-if) [day-170 pointers](#day-170-pointers) ## week - 025 [day-171 while; for; if; list](#day-171-while-for-if-list) [day-172 if](#day-172-if) [day-173 if; variables](#day-173-if-variables) [day-174 if; list](#day-174-if-list) [day-175 if](#day-175-if) [day-176 if](#day-176-if) [day-177 if](#day-177-if) ## week - 026 [day-178 if; absolute](#day-178-if-absolute) [day-179 if; for](#day-179-if-for) [day-180 if](#day-180-if) [day-181 if](#day-181-if) [day-182 look back](#day-182-look-back) [day-183 generalization](#day-183-generalization) [day-184 generalization](#day-184-generalization) ## week - 027 [day-185 generalization](#day-185-generalization) [day-186 if](#day-186-if) [day-187 if; while; functions](#day-187-if-while-functions) [day-188 oop](#day-188-oop) [day-189 keyword arguments; string methods](#day-189-keyword-arguments-string-methods) [day-190 while](#day-190-while) [day-191 while](#day-191-while) ## [DAY-0] The Computer All modern computers(laptops, phones, pc master race rgb monsters, etc) have somewhat similar components: Processor, Memory, Video Card, Disk and USB controller, WiFi card etc. Some of them are in one single chip and you cant even see them anymore, but they are there. For example there are chips that have Processor and Video Card together. The term for processor is actually CPU - Central processing unit, but we called it processors when we were kids and it kind of make sense, since it processes stuff. ``` +------------------+ | | | [ ] | | [ Processor ] | | [ ] | | | | [ Memory ] | | [ Memory ] | | | | [ Video Card ]--+------> monitor | | | [ Disk ] | | | +---> iphone | | +---> mouse | [ USB ]---------+--+---> keyboard | | | [ WiFi ] | | [ ... ] | +------------------+ ``` Memory (also called RAM), is the place where programs exist to be run by the CPU, it loads its instructions from there, and the instructions tells it what to do, it can write back to memory, or read from a different place or write something to the disk controller or to the video card, etc. Basically the most important stuff happens between the processor and the RAM (which stands for Random Access Memory). It is Random Access because the processor can just go and read or write to specific place, which is pretty cool. Everything in the RAM disappears when you turn off the computer, so usually the programs and all kinds of information is persistently stored on the Disk. Which is called disk because it used to be spinning, but now most computers have SSD disks which are not *disks* at all, google 'SSD versus spinning disk' if you want to find more. So when the computer starts it will load some information from the disk into memory and start the operating system, which is just a program, not very different than the one you wrote for the touch typing, it takes input, does something with it and then has some output. ## [DAY-0] Files When you store something to disk you usually store it as a file, files can be all kinds, only text, or images, or just raw binary data used for different purposes. Text files are literally that, file that contains text, later you will learn that there is no such thing as text to the computer, all is just bits of information, but we (the humans) decided it is quite useless to look at some numbers of information, so our programs display information in different way, for example the file can contain the number 97 in its raw form 01100001, and if seen from a text editor, it will show the letter 'a', but if seem from image editor it might use it to show some blue-ish color, colors are stored in 4 numbers: transparency(called alpha), red,green and blue, but different formats use different way to store the colors, so it will depend on which format does the program think it is going to display. See it is all in the eye of the beholder, the file still contains only 97 (01100001), but each program will decide what to do with it. There are also Directories(also called Folders) (which in many file systems are also files.. but we will get to that later), that can contain files or other directories. Example structure looks like: ``` / ├─ home/ │ ├─ jack/ │ | ├─ type.py │ | ├─ example.txt │ | ├─ image.jpg ``` The word File is used because people that made those things up were thinking of filing cabinet, with lots of folders that contains pieces of paper. ``` / / /____________________ |________ __________ /_____ /|| | |".___."| || | |_______|/ | | || .___."|| / ||_______|| / |_________|/ Felix Lee ``` > See how those pictures have sometimes names attached to them. Those are their creators, some pictures are from the 80s, so it is amazing we can still find out who made them. You should always attribute the work of an artist. So the name 'File' and 'Folder' is used. If people were thinking of libraries I guess we would've been using Book for a file and Shelve for Folder? Anyway, my point is: all things have names, some of the names are strange and old, so don't worry if they make no sense. ## [DAY-0] ASCII Computers do not understand text, so when you see text it is usually some number that is displayed as a character, for example 65 is A, 66 is B, and so on. About 60 years ago some people agreed on a common way to map number to character, called THE ASCII STANDARD, super fancy name, for such a simple thing. ``` 32 SPC 64 @ 96 ` 33 ! 65 A 97 a 34 " 66 B 98 b 35 # 67 C 99 c 36 $ 68 D 100 d 37 % 69 E 101 e 38 & 70 F 102 f 39 ' 71 G 103 g 40 ( 72 H 104 h 41 ) 73 I 105 i 42 * 74 J 106 j 43 + 75 K 107 k 44 , 76 L 108 l 45 - 77 M 109 m 46 . 78 N 110 n 47 / 79 O 111 o 48 0 80 P 112 p 49 1 81 Q 113 q 50 2 82 R 114 r 51 3 83 S 115 s 52 4 84 T 116 t 53 5 85 U 117 u 54 6 86 V 118 v 55 7 87 W 119 w 56 8 88 X 120 x 57 9 89 Y 121 y 58 : 90 Z 122 z 59 ; 91 [ 123 { 60 < 92 \ 124 | 61 = 93 ] 125 } 62 > 94 ^ 126 ~ 63 ? 95 _ ``` Try to decode: 110 105 99 101 32 119 111 114 107 33 ## [DAY-0] Magic ``` ______________ _ _,-----------._ ___ | | (_,.- _,-'_,-----------._`-._ _)_) | THE _ _ _ | | ,'_,-' ___________ `-._`. | | / \|_)| \ | `' ,',' _,-'___________`-._ `.`. | |__\_/| \|_/ | ,',' ,'_,-' . `-._`. `.`. | | /,' ,',' >|< `.`. `.\ | OF THE _ _ | // ,',' >< ,^. >< `.`. \\ | |_)||\|/_(_ | // /,' >< / | \ >< `.\ \\ | | \|| |\_|_) | // // >< \/\^/\/ >< \\ \\ |______________| ;; ;; `---' :: :: || || (____ || || DOORS OF DURIN _||__||_ ,'----. _||__||_ (o.____.o)____ `---' ____(o.____.o) | | /,--.) (,--.\ | | | |(( -`___ ___` ))| | | | \\,'', `. .' .``.// | | | | // (___,'. .'.___) \\ | | /| | ;;)) ____) . . (____ ((\\ | |\ \|.__ | ||/ .'.--.\/ `/,--.`. \;: | __,|; |`-,`;.| :/ /,' `)-' `-(' `.\ \: |.;',-'| | `.. ' / \__.' `.__/ \ ` ,.' | | |,\ /, ,\ /,| | | ||: : ) . ( : :|| | /| |:; |/ . ./|\, , \| :;| |\ \|.__ |/ : ,/- <--:--> ,\. ; \| __,|; |`-.``: `'/-. '\|/` ,-\`; ;'',-'| | `.. ,' `' ' ` `. ,.' | | || : : || | | || | | || | | || | | || | | |' | _ | `| | | | | '|)) | | | ;____: `._ `' _,' ;____: {______} \___________________/ {______} SSt |______|_______________________________|______| ``` Have you seen The Lord of the Rings? Do you remember the Door of Durin? Where Gandalf couldn't remember how to enter and the fellowship almost got eaten? The experience through this book will feel like that. Sometimes you will be stuck, and I mean really really stuck, and at some point, as if the cosmos itself colludes, something will click, and you will level up. Sadly I can not know when this will happen to **you**, as every person is different. ## [DAY-0] How to Google Anything you don't know how to do, you should use google to search for answers. However it is not easy to know what is good link to read and what is not, try to read from verified sources, like wikipedia, python.org, stackoverflow, mozilla and university websites, ask your parent to help. There is a lot of scams on the internet, you will open websites that claim you have viruses on your computer and you need to pay 20$ to clean it, or that you need to install this amazing program that will speed up your internet. Sometimes on very trusted websites you will see ads that are pure scams, for example ads that looks like Download buttons to get the program you wanted, but it will just download a virus. Its getting increasingly difficult to distinguish between good and bad information as well, some websites are just poorly written articles, so they can make people clicking on them in order to get money from ads. With time, and with the help of your parent you will learn how to recognize the good articles. The rules about how to use the internet are: * The internet is sus! * Never put your real name or phone number or address anywhere * Never download anything unless your parent approves * Never run anything you downloaded (sometimes downloads just start automatically) * Don't trust messages like 'click here to get free iPhone' or 'clean your computer for free' * Always ask your parent for help if you are not sure. There is noting free on the internet. Even this book, even though I am writing it for free, and you can get it for free, but I am hosting it on GitHub (and I don't pay for that), and GitHub, and therefore Microsoft, knows you are reading it, and later they will use that information to show you better ads, or maybe they will use it for some other purpose, like to train a machine to create artificial text, but one thing you must remember is that there is nothing free on the internet. ## [DAY-1] Touch Typing Touch typing is just typing without looking, if you are super slow while typing you will get frustrated too soon. Use https://www.keybr.com/ or ask someone to recommend you something. After using the touch typing app for few days, write your own. ## [DAY-2] Install python In general the first thing you should do when you don't know how to do something is to google it. So google 'how to install python', you will see lots of results, some of them will tell you how to install the old version of python, and some will be for the too old or too new version of windows. This makes things a bit more difficult. Try to download from https://www.python.org/downloads/ and do it yourself, ask your parent for help if you are stuck. ## [DAY-2] Make a useful program After you have installed python3 run IDLE (ask your parent for help) and go to File -> New File and type: ``` import random letters = 'fjfjfjfjfjfjjfghghghgaa;a;a;abcdefghijklmnopqrstuvwxyz' difficulty = 2 while True: q = '' for i in range(difficulty): q = q + random.choice(letters) a = input(q + ': ') if a == q: difficulty += 1 else: if difficulty > 2: difficulty -= 1 ``` Then hit F5 (this will ask you to save the file as well) to run the program. If it is too easy, try adjusting the difficulty or the letters. The program will ask you to type some letters, after you are done, hit enter, and it will ask you for more or less letters. It will keep doing that forever. It kind of looks like this: ``` aj: aj akg: akg jjgh: jjgh ``` If you type it correctly, it will ask for a bigger sequence of characters, and if you make mistake it will ask for smaller. Don't rush it. Place your fingers properly on the keyboard, open https://images.google.com and search for 'touch typing' you will see many images of how to place your fingers. ## [DAY-3] Touch Typing using your program Open IDLE again, go to File -> Open File, and find where you saved your program, then double click to open it. After opened hit F5 and it will start again. Spend the rest of the time for the day touch typing. Don't rush it. Place your fingers properly on the keyboard and slowly type the letters. > Spend the whole day touch typing and making and opening new files in IDLE and notepad; I cant stress enough how important it is for the kid to be independent to be able on its own to make or open a file. ## [DAY-4] HTML - Basics We will start with HTML. Making a page can be a bit overwhelming, so just start small. for example: Open notepad and make a file on your desktop named "first.html", then write in it: ```

welcome!

this is my page

``` Open Windows Explorer and find the file on your desktop and double click on it. Congrats! You have made your first web page! Now try this: ```

check this out!

Why would somebody use this? ``` The rest of the day you will just try some other examples: List: ``` ``` Horizontal Line: ``` first line
second line

third line
``` 'br' means line break, when the browser sees it know it has to show whatever comes next on another line, 'hr' means horizontal rule,just like when you take your ruler and draw a line from left to right in the text book. You see, even though you write things in separate lines (like the word first and line are clearly on separate lines), the browser will not know what to do until you tell it to 'br'. Maybe in school you had a project you have to use PowerPoint to make a presentation? With the special words ul, li, br, hr, h2 and b you can make your own presentation in HTML! ## [DAY-5] HTML - Basics The app you are using right now to see this website is called a web browser, I don't know if kids still call it like that, but adults do. First the browser app downloads the web page, which is just a normal text file (it is what you see when you click on View Source), then it has to process it, in the same way you read pigpen code or ascii code, you look symbol by symbol and try to make sense out of it by making it into letters you understand. It looks for word between '<' and then '>', when it sees '<' it knows what ever is between '<' and '>' is important word. Then it has kind of a table so it know what to do with different words, when it sees 'b' it knows that whatever is inside is gonna get **bold**. There are many words like that you should try for yourself 'b' 'i' 'u' 'h1', and many more. For example, try this on your page: `this is bold` ## [DAY-6] Touch Typing Spend half the time using your program and half the time on keybr.com. ## [DAY-7] New Touch Typing Program Make new file on your desktop, touchtyping.html and type in it: ```

``` Don't worry about what it all means. Just type it character by character. Now double click on the file and try out your program, just start typing as the web page is open, and characters will become bold as you type them. ## [DAY-8] Touch Typing Today just spend the day chilling on keybr.com > We spend considerable amount of time on touchtyping and learning english, not all the time spent is reflected in the book, but at least 2 times per week, either on our own practice programs or keybr.com, by day 190 my daughter is at around 50 words per minute and blind typing. The amount spend typing builds really good relationship with the computer, as it has extremely smooth learning curve, and sense of progression. In contrast with programming which is a learning staircase, with walls you have to break through, and sometimes you have to spend months on the same level until the puzzle pieces click together. Some days when she is frustrated or tired I just ask her to type for 20-30 minutes while listening to music, which turns into a bit of meditating experience. ## [DAY-9] Touch Typing using your program Open touchtyping.html and spend the day using your awesome program. Once you open it, right click and then click on `View Source` to remember that you actually wrote this! Good job! ## [DAY-10] HTML - Basics From now on the HTML examples will be more code and less text, so you just have to go through them with your parent. ```

welcome!

this is my first web page it has also weird twist!


and a line

``` Try to touch type as you are writing this, no need to hurry. ```

welcome!

this is my first web page!

and it has a bug!
``` This is a funny one, you might not know how to write 🐛, but just google 'bug emoji' and copy it from there. After you open the web page, click on the bug to see what happens. You see we add this `onclick=...` which is code that is going to run every time you click on the bug, and what this code does it copies the button and adds it to the page, including the `onclick=..` stuff, so the other button you can press and it will copy itself again! Try to add more buttons by yourself with other emojis, 🏍️, 🏂, 🐓 or 🐧 for example. ## [DAY-11] HTML - Basics Making a presentation with HTML ```

Presentation For School

by: John, from class 4





First Slide





Second Slide





Third Slide





``` ## [DAY-12] Touch Typing Use your program to touch type or go to keybr.com. Don't rush. ## [DAY-13] HTML This day is completely free style, try to put all kinds of HTML words inside each other, for example: ``` ``` Try to add the self cloning 🐛 button to that page. ## [DAY-14] HTML - Tables Tables are amazing, in fact, tables are one of the things that makes the modern world work. In your school for example, there is a table with the name of each student and their score. Or in your TV there is a table with each program number and the program there (e.g. 24 is 24 Kitchen). On your iPhone there are many programs that use many tables internally to make decisions. There is of course the ASCII table, which can tell you how to get from a character to its raw representation and the other way around. The periodic table is also a famous example. The table on the bus stop tells you which bus will come at what time. We use tables everywhere. Here are few examples: | power | pokemons | |-|-| | electiricy | Pikachu | | fire | Charmander | | grass | Bulbasaur | | poison | Bulbasaur | Or something you have probably seen, a multiplication table: | a | x | b | = | |---|---|---|----| | 5 | * | 5 | 25 | | 5 | * | 6 | 30 | | 5 | * | 7 | 37 | Make new file (or open the some old html page) and type this: ```
NameYear
Donald Duck 1937
Daisy Duck 1940
Scrooge McDuck 1947
Ludwig Von Drake 1961
``` Only 3 new tags we have to learn `table, tr, td, th` are the main things we will work with, `tr` means table row and `td` is table data cell, or a column, `th` is table header. All the html key words you have learned so far are called `tags` or `elements`. Make `` and see what happens. ## [DAY-15] HTML - More tables ```
NameYear
hello world hello universe
this does not move this is italic
``` Now make list in a table ```
  • a
  • b
  • c
  1. a
  2. b
  3. c
``` Super small difference between `ul` and `ol`, one means 'unordered list' and the other one 'ordered list', so if you use `ol` every `li` will have its own number ## [DAY-16] HTML - Multiplication table Start writing the whole multiplication table (will take more than 1 day) ## [DAY-17] HTML - Multiplication table Finish writing the whole multiplication table. ## [DAY-18] Touch Typing Spend the day touch typing. ## [DAY-19] HTML - Links The most powerful feature of HTML is to be able to link to another place in the internet, try this: ``` hi, click here to go to wikipedia ``` The `a` tag with its `href` attribute is one of the most important things of the modern internet, it means I can have a web page, and I can link to someone else's web page, and they can link to someone else and so on.. Whatever is in the `href` attribute this is where the browser will go after you click on whatever is inside the ``, in our case `click here`. So after you click on `click here` your browser will go to wikipedia.com, and from there when you click somewhere it will go to wherever that `a`'s `href` points to. ## [DAY-20] HTML - Tree Rainbow: ```

🌈

red

orange

yellow

green

blue

indigo

violet

``` You dont always need `html` and `body`, the most browsers will show a page anyway, but it is good practice to do it proper and use `html` and `body` tags. Anyway, the next example is not "up to code". IT will make a sheep that follows your mouse, its pretty cool. ```
🐑
``` And a ghost button! it will remove itself when you press it. ``` ``` The way it works is `onclick=...` will call the code when you click on the button, in this case it says, "whoever *my* parent is, tell it to remove myself form its children list". You see, HTML is like a tree, let me show you. lets say our page is: ```
NameYear
hello

world

move italic
``` It actually is a tree, every tag has children, and siblings ``` | | / | \ / | \ / | \ / | \ / | \ / | \ <--- siblings, same parent /\ / \ / \ / \ / \ / \ \ | / \ | / \ | / \ | / \ | / \ | /
<--- the two td with same parent | | | | | | are siblings Name Year

| | | | hello world move | italic ``` Well trees in the world are actually the other way around haha. Leave it to programmers to not know how to make a tree :) ``` italic | hello world move | | | | Name Year

| | | | | |

\ / \ / \ / \/ \ / \ /
| | ``` But you can see how all things that have the same parent are related, like brothers and sisters. This is very important, we will spend the next week thinking about it as well. ## [DAY-21] HTML - View Source Browsers on laptops or pcs will allow you to rightclick on any page and then click on `View page source`, this will show you the HTML of the page your are looking at. Open https://archive.org then right click on the pager and then click on `View page source`. We will spend the rest of the day looking at some page sources * https://archive.org * https://www.spacejam.com * https://www.asciiart.eu/ * https://www.wikipedia.org * https://www.gutenberg.org/ * https://digitalcomicmuseum.com/ * https://www.terrypratchettbooks.com/ * https://www.goodreads.com/ ## [DAY-22] HTML - Inspect Make new html file and write the following example: ``` Right click on this page, click Inspect and then go to Console. ``` Open the file and then click F12, or right click on the page and click Inspect. You will see the logs. This will open the developer tools of your browser, you will be able to see the console, where you can run small programs or see the errors and the logs of the current page. Try writing `12312*18237978123` in the console and see the result. In the inspector you can also modify the HTML that you see. This wont modify the actual page on the server you are downloading from, but you can try things to see how they would look. There are actually many scammers that use this method to lie to people as if they are giving them money, or they say 'I will teach you how to add 10000 robux to your account if you pay me 5$' and they just show you how to inspect and edit the html you see. This does not actually give you robux of course, it just modifies your local version of the html to show different value and after you reload the page you will see the old value. Lets try it. Make a new file with this content: ``` Your Robux Balance is: 0$ ``` Open the file and then right click on `0$` and click inspect. Then you will see `0$` if you double click on it, you will be able to change it, and you will see the new version. Now reload the page, and you will see the old value is back. ## [DAY-23] HTML - Images To show an image you need the `img` tag, and give it `src` attribute with the address of the image, for example if I want to display https://picsum.photos/id/237/200/300 I have to do type it like this: ``` ``` Lets put the images in a table: ```
``` Now of course we can have `img` in `a`, try this: ```
``` Now you can click on the dog or the nose and it will lead you to the pages you link to. Is it possible to have `img` and text in `a`? Well I am glad you asked! ```

This dog leads to wikipedia

This cat (I think) leads to guttenberg.org
``` I even have `
` in the `a`, now you can click either on the image or on the text. There is one more very important attribute of the `img` tag, and this is the `alt` attribute, it is used by people who are blind or visually impaired to know what kind of picture is on the page. In our example we can put `alt="puppy"` on the puppy picture. ```

Hello, and welcome to my page. I hope you will like this image.

puppy ``` If a blind person visits this page, they use a screen reader that reads most of the text on the page, and if we have `alt` attribute on images it will say `Image ...` and whatever the value of `alt` is, in our case "puppy". So the reader will say: ``` Hello, and welcome to my page. I hope you will like this image. Image puppy. ``` If you have an image that has no information, like it is just there to make the site pretty, use `alt=""` then the screen reader will skip it. ## [DAY-24] Licenses If you take a picture of something you are the owner of that picture, and you can put it on your website and say you have the rights of that picture. It is up to you to decide if people should link to it by deciding what under license you will publish the image. There are many licenses you can choose from, there are some that say 'this picture is free for anyone to do whatever they want' or 'you can republish the picture but you cant make money selling it' or 'you can publish it but not print it in books' etc etc. Complicated stuff this licensing, but the thing you have to remember, it is up to the creator to decide under what license their work can be distributed. Some licenses you can check out with your parents: * Creative Commons Licenses CC-BY https://creativecommons.org/licenses/ * GPL https://www.gnu.org/licenses/gpl-3.0.en.html * MIT License https://opensource.org/licenses/MIT * Apache License https://www.apache.org/licenses/LICENSE-2.0 * Public Domain https://en.wikipedia.org/wiki/Public-domain-equivalent_license * Copyright https://en.wikipedia.org/wiki/Copyright When you want to use someone else's work and it is not clear what license it uses, it is best to ask them. At least that is what I do. People are usually nice and they give me permission to use their work. It is somewhat controversial what is the right way forward, which license to use and what is the best for you and for the world. Ask to your parent about what happens when you take a picture of a painting of a picture of a video and then you edit the video to include the picture you took in it.. Check out https://tldrlegal.com/ for super short description of licenses ## [DAY-25] Touch Typing relax and spend the day touch typing ## [DAY-26] HTML - Title ``` THIS IS SPARTA ``` Usually bodies have a `` hehe. In html in the `head` tag you can put things that will help the browser. For example, what is the `title` of this page? or what language is this page? Who is the author of this page? etc.. You can also put there some style, changing the body's background color, or the color of the text in the `h1` or `p`: ``` some title

Hello Universe

hello world

``` The _language_ we use inside the `style` tag is called `CSS`, and it is quite simple (on its surface). We wont get deep into it for a while, but if you are interested check out at https://developer.mozilla.org/en-US/docs/Web/CSS You see how in certain tags we can use different language, not html, like in `