opentechschool/js-beginners-2

Curriculum introducing enhancing web pages with JavaScript (outdated)

js-beginners-2's Issues

for-loop more or less unknown

many people i talked to, had probs with the syntax and the functionality of the for loop (page4). we should explain that loop more detailed or replace it with a while loop

Mark as outdated and not as part 2 of "the" workshop

This used to be "day 2" of the full-weekend workshop "JavaScript for absolute beginners". This part introduces the DOM as the first part only uses canvas to learn basic programming in JavaScript.

While part 1 is rather timeless and still works well for us, this part is quite outdated, as it contains animations in JavaScript that you'd do with CSS these days.

In order to not confuse people and also be more explicit what it's about, let's remove the notion of "day/part 2" of something and rather give it a descriptive name like "JS and the DOM" or "JS for web pages". I'd also suggest to mark it is outdated.

See also OpenTechSchool/js-beginners-1#31

German versions

Is anyone working on translations of pages 1 through 4 to German? If so, please leave a note here stating which page you are working on to prevent several people translating the same parts.

I will tackle whatever is left during or after the opening meeting today.

Visual examples missing to know if you're on the right track

People ask "is that how it's supposed to look like?". We should provide screenshots or videos or just running examples for each step.

CSS positioning 101

We should explain the basics of using position: absolute so that people aren't very surprised about what is happening when they apply both left and right rules to an element (sticking borders of element to parents' left and right borders respectively).

Generally positioning is a bit hard for many students, so maybe we could have a little outline to explain the basics.

Translate new part with logical NOT operator

In 5d599e9 an explanation for the logical NOT operator was added. Needs to be translated to German.

Use curly braces for single-line blocks, too

It would just be a little less confusing if the example code didn't show people the option of leaving curly braces out for single-line ifs and fors and the like.

Help people get photos

I think that some students don't even know what pixels are at this point. And there's no guarantee that there'll be image-editing software installed on their machine. This might turn out to be a time waster.

Maybe we should provide a bunch of pictures to choose from? Or at least find and link to an online service that helps resize pictures. (Does anyone know one that's halfway user-friendly?)

optional stuff after one has finished: endless slideshow

when you are at the end of the slideshow and you hit the "right button", it could either jump to the very first image or add the first (respectively the expected) image to the very end and afterwards slide nicely.

Page 2 is really long

Page 2 is really long, especially compared to all the other pages from both days. It's hard for me to tell how long in time each page will take, but ideally, each should contain a single over all goal. Maybe day2, page2 covers too much at once.

Add working examples including partially done pages

The slideshow is a bit much without any intermediate states to check against. Some example pages should help.

describe how to open a folder in sublime

Intro line needs German translation

Anyone care to try to translate Tiffany-English into German?

"The internet is powered with magic, or as we like to call it, JavaScript."

People don't get that we mean Sublime Text by "Editor"

We should be more clear about Editor -> Sublime Text (and maybe also Browser -> Chrome).

Some people opened their system editor instead.

Maybe an introducing explanation about that would be helpful.

quotes, emphasis and code

Sometimes I use quotes when I should use <code> or <em>, or <code> when I should use <em> or quotes and so on. I was sometimes a bit confused about whether I was defining something or referring to a name. The use of these three semantics should be reviewed prior to real students reading it.

make proper html examples

is it only me who thinks, that we should present the html snippets in a more proper way? for example, there is in most snippets no html or body tag. what do u think?

revert code example to teach += and -=

The example code was updated to show += and -= before the operators were taught. It should be reverted in both English and German.