|
| 1 | +# Building your first Javascript app |
| 2 | + |
| 3 | +In the coming 4 days you are going to write some 'Vanilla' (pure / no frameworks) Javascript. |
| 4 | + |
| 5 | +## Day 1 |
| 6 | + |
| 7 | +Watch the first 9 videos about the history of JS, how to run it and some fundamental building blocks of the language. |
| 8 | + |
| 9 | +## Day 2 |
| 10 | + |
| 11 | +Check out video 10 and practice what you've learned doing 1-4 optional exercises using _control flow_, _functions_, _looping_ and _objects_. |
| 12 | + |
| 13 | +Check them out [here](demo/language/): use the _topic.html_ files to start, and look at the _topic-solution.html_ files if you get stuck. |
| 14 | + |
| 15 | +Of course you are free to skip ahead but I recommend you at least try to code in JS a bit at this point to have the materials sink in quicker. |
| 16 | + |
| 17 | +## Day 3 |
| 18 | + |
| 19 | +Watch videos 11-15 about working with the DOM (Document Object Model) - demo code [here](demo/dom) -, debugging, JS gotchas and more resources. |
| 20 | + |
| 21 | +## Day 4 |
| 22 | + |
| 23 | +Check out video 16: I got two project apps you can work on today. Depending your expertise and time available, pick one or two: |
| 24 | + |
| 25 | +1. [A simple calculator](demo/calculator) -> [starter template](demo/calculator/index-template.html) |
| 26 | + |
| 27 | +2. [A calorie counter](demo/calories) -> [starter template](demo/calories/js/script-template.js) |
| 28 | + |
| 29 | +You can look at my solutions [here](demo/calculator/index.html) and [here](demo/calories/js/script.js) respectively if you get stuck. |
| 30 | + |
| 31 | +Of course these two projects are *optional*, convenient if you don't have use cases for JS yet. |
| 32 | + |
| 33 | +However if you have some front-end stuff you can work on for your own projects, feel free to do that instead. |
| 34 | + |
| 35 | +The most important is to try to put some of the JS you've learned so far into practice! |
| 36 | + |
| 37 | +--- |
| 38 | + |
| 39 | +If you take this course it's likely you do some kind of web development. From full-stack developer to administrating a site, JS is an important skill to have! |
| 40 | + |
| 41 | +So learn as much as you can these 4 days, it's effort well invested! Good luck and remember: _the learning is in the practice_. |
| 42 | + |
| 43 | +In future lessons you will build upon these skills building apps with 2 popular JS frameworks: Vue.js and React, exciting ... |
| 44 | + |
| 45 | +### Time to share what you've accomplished! |
| 46 | + |
| 47 | +Be sure to share your last couple of days work on Twitter or Facebook. Use the hashtag **#100DaysOfWeb**. |
| 48 | + |
| 49 | +Here are [some examples](https://twitter.com/search?q=%23100DaysOfCode) to inspire you. Consider including [@talkpython](https://twitter.com/talkpython) and [@pybites](https://twitter.com/pybites) in your tweets. |
| 50 | + |
| 51 | +*See a mistake in these instructions? Please [submit a new issue](https://github.com/talkpython/100daysofweb-with-python-course/issues) or fix it and [submit a PR](https://github.com/talkpython/100daysofweb-with-python-course/pulls).* |
0 commit comments