opentechschool / js-beginners-1 Goto Github PK
View Code? Open in Web Editor NEWCurriculum for the first part of JavaScript workshop for absolute beginners.
Home Page: http://opentechschool.github.io/js-beginners-1/
Curriculum for the first part of JavaScript workshop for absolute beginners.
Home Page: http://opentechschool.github.io/js-beginners-1/
In #17 the description for named properties has been changes to be more accessible and a bit more verbose. Needs to be translated.
Historically this has been part 1 of a two-day workshop with the second part being a slide show with DOM. The "second" part is quite outdated (e.g. JS animations) and this should just stand on it's own so some text needs to be changed.
On http://opentechschool.github.io/js-beginners-1/ we have a link to the German version but not the other way round.
In the data chapter it says: "Exercise: Figure out a JavaScript representation for a chess game board. There are multiple good solutions." This is confusing as it is a hard task, no correct solution, no feedback possible. I guess the idea is to inspire people to think of all the possibilities of data structures.
Should we remove it, move it to the end of the chapter or just rephrase to something like "optional brain exercise"?
The changes we made compared to day1 repo are not translated yet.
Would love to use this to introduce JavaScript programming. However the tutorial only mentions Chrome but not Firefox Devtools.
Thanks @xMartin for pointing me to this resource.
The task with the smileySquadron asks learners to use x and y as parameters. I think this is confusing, at least I don't get why. As I understand it the function will contain the loop and change internal variables only. Maybe it's about defining a starting point but that could be just left out for simplicity.
maybe we should insert an explanation of the drawing function somewhere on page 2
cause often people wondering why their code isn't doing anything, or they get errors because of the fact that they've deleted the drawing function from the sandbox
The introduction to the function setInterval says: setInterval(func, n)
is a way to run a function every n milliseconds yet during implementation n has to be computed like so:
// Draw twenty frames per second (20 * 50 = 1000 milliseconds)
setInterval(frame, 50);
This is confusing. For consistency we could have the function take in millisecond units or have an explanation for the conversion.
A grid to show the coordinates and visualize the distances between elements could be helpful, as people explore functions and create their own. It could be a simple background pattern displayed on the screen.
"Select the other option" is really vage and people dont even find the thing to look for. Maybe a screenshoot would help?
A question from the feedback form:
the functions we used to draw are built in ? Is there a built in library ? Do every javascript enviroinment offer the same set of basic functions ?
We should explain a little bit.
A step missing in the Function exercise from js-beginners -> page 2 .
Where the function smileySquadron()
has to be declared inside the function drawing()
Otherwise the render does not render it.
https://github.com/OpenTechSchool/js-beginners-4h-workshop-1/blob/gh-pages/page3.html#L98-104
function rainbow(x, y) {
var colors = ["red", "orange", "yellow", "green", "cyan", "purple", "white"];
for (var count = 0; count < colors.length; count = count + 1) {
color(colors[count]);
circle(x, y, 150 - 5 * count);
}
}
can be rewritten as
function rainbow(x, y) {
var colors = ["red", "orange", "yellow", "green", "cyan", "purple",
colors.forEach(function(color) {
color(color)
circle(x, y, 150 - 5 * colors.indexOf(color))
})
}
since for loops are rather confusing for absolute beginners
Hey everyone,
so I thought after the last workshop in Berlin, we would remove those two repos: day1 and day2 (or mark them as outdated or something).
Can someone do that and maybe rename this repo to just js-beginners-workshop
?
Best,
Finn
PS: Okay renaming would maybe be a bad idea, since it would break links to the materials for GitHub pages. I am also still not sure where all the materials are located. But you know what I mean...
Here is a list of the current blue headlines:
- Open the console
- Enter your first code
- Understand expressions
- Variables
- A web page
- Open the picture playground
- The loop
- Conditional execution
- Functions
- Free-form
- Collections
- Named properties
- We've got data
- Play a game!
- Extend it
The instructions how to open the console in Google Chrome seem to be outdated, not matching the current user interface of the browser any more.
Having a link to the Github page would give people the chance to create issues and contribute. Could even use the badge.
The exercises should receive an image/link to the visual results - which will prevent confusion and helps to understand the challenges.
In addition - the description of the smileySquadron
on Page 2 task could be simplified.
On the second day are some snippets which uses the short version i++
for incremental, as well as for !
for negotiation. As these are quite common - they should be added to the initial explanation on the first day.
For example: on this page there is the word "Semikolon". To support the understanding of the word, for german-language-starter it would be helpful to add the simbol of a semicolon after the german word.
Maybe it is also helpful elsewhere.
I wrote a very similar introduction to JS that has been very well received, it would be worth a read!
the outline is:
what I have yet to implement:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.