├── .devcontainer └── devcontainer.json ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── pull_request_template.md └── workflows │ ├── azure-static-web-apps-ashy-river-0debb7803.yml │ ├── links.yml │ ├── lock.yml │ └── stale.yml ├── .gitignore ├── .nojekyll ├── 1-getting-started-lessons ├── 1-intro-to-programming-languages │ ├── README.md │ ├── assignment.md │ └── translations │ │ ├── README.el.md │ │ ├── README.es.md │ │ ├── README.fil.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.id.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.nl.md │ │ ├── README.np.md │ │ ├── README.pt.md │ │ ├── README.ru.md │ │ ├── README.ta.md │ │ ├── README.zh-cn.md │ │ ├── README.zh-tw.md │ │ ├── assignment.el.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.id.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ml.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt.md │ │ ├── assignment.ru.md │ │ ├── assignment.sw.md │ │ ├── assignment.ta.md │ │ ├── assignment.uk.md │ │ ├── assignment.zh-cn.md │ │ └── assignment.zh-tw.md ├── 2-github-basics │ ├── README.md │ ├── images │ │ └── clone_repo.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fil.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.id.md │ │ ├── README.it.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.nl.md │ │ ├── README.pt.md │ │ ├── README.ru.md │ │ ├── README.ta.md │ │ ├── README.zh-cn.md │ │ └── README.zh-tw.md ├── 3-accessibility │ ├── README.md │ ├── assignment.md │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.id.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.nl.md │ │ ├── README.pt.md │ │ ├── README.zh-cn.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.id.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt.md │ │ ├── assignment.ru.md │ │ ├── assignment.zh-cn.md │ │ └── assignment.zh-tw.md ├── README.md └── translations │ ├── README.es.md │ ├── README.fr.md │ ├── README.hi.md │ ├── README.id.md │ ├── README.it.md │ ├── README.ja.md │ ├── README.ko.md │ ├── README.ms.md │ ├── README.nl.md │ ├── README.np.md │ ├── README.pb.md │ ├── README.pt.md │ ├── README.ru.md │ ├── README.ta.md │ ├── README.uk.md │ ├── README.zh-cn.md │ └── README.zh-tw.md ├── 2-js-basics ├── 1-data-types │ ├── README.md │ ├── assignment.md │ └── translations │ │ ├── README.de.md │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.id.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.nl.md │ │ ├── README.pt.md │ │ ├── README.zh-cn.md │ │ ├── README.zh-tw.md │ │ ├── assignment.az.md │ │ ├── assignment.de.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.id.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt.md │ │ ├── assignment.zh-cn.md │ │ └── assignment.zh-tw.md ├── 2-functions-methods │ ├── README.md │ ├── assignment.md │ └── translations │ │ ├── README.de.md │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.id.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.pt.md │ │ ├── README.zh-cn.md │ │ ├── README.zh-tw.md │ │ ├── assignment.az.md │ │ ├── assignment.de.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.id.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt.md │ │ ├── assignment.zh-cn.md │ │ └── assignment.zh-tw.md ├── 3-making-decisions │ ├── README.md │ ├── assignment.md │ └── translations │ │ ├── README.de.md │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.id.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.pt.md │ │ ├── README.zh-cn.md │ │ ├── README.zh-tw.md │ │ ├── assignment.de.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.id.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt.md │ │ ├── assignment.zh-cn.md │ │ └── assignment.zh-tw.md ├── 4-arrays-loops │ ├── README.md │ ├── assignment.md │ └── translations │ │ ├── README.de.md │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.id.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.pt.md │ │ ├── README.zh-cn.md │ │ ├── README.zh-tw.md │ │ ├── assignment.de.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.id.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt.md │ │ ├── assignment.zh-cn.md │ │ └── assignment.zh-tw.md ├── README.md └── translations │ ├── README.de.md │ ├── README.es.md │ ├── README.fr.md │ ├── README.hi.md │ ├── README.id.md │ ├── README.it.md │ ├── README.ja.md │ ├── README.ko.md │ ├── README.ms.md │ ├── README.nl.md │ ├── README.ru.md │ ├── README.ta.md │ ├── README.uk.md │ ├── README.zh-cn.md │ └── README.zh-tw.md ├── 3-terrarium ├── 1-intro-to-html │ ├── README.md │ ├── assignment.md │ ├── images │ │ └── vs-code-index.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.pt-BR.md │ │ ├── README.zh-cn.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt-BR.md │ │ ├── assignment.pt.md │ │ ├── assignment.zh-cn.md │ │ └── assignment.zh-tw.md ├── 2-intro-to-css │ ├── README.md │ ├── assignment.md │ ├── images │ │ ├── 1.png │ │ └── terrarium-final.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-cn.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt.md │ │ └── assignment.zh-tw.md ├── 3-intro-to-DOM-and-closures │ ├── README.md │ ├── assignment.md │ ├── images │ │ ├── dom-tree.png │ │ └── terrarium-final.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.pt.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt.md │ │ ├── assignment.zh-cn.md │ │ └── assignment.zh-tw.md ├── README.md ├── images │ └── screenshot_gray.png ├── solution │ ├── README.md │ ├── images │ │ ├── plant1.png │ │ ├── plant10.png │ │ ├── plant11.png │ │ ├── plant12.png │ │ ├── plant13.png │ │ ├── plant14.png │ │ ├── plant2.png │ │ ├── plant3.png │ │ ├── plant4.png │ │ ├── plant5.png │ │ ├── plant6.png │ │ ├── plant7.png │ │ ├── plant8.png │ │ └── plant9.png │ ├── index.html │ ├── script.js │ └── style.css └── translations │ ├── README.es.md │ ├── README.fr.md │ ├── README.hi.md │ ├── README.it.md │ ├── README.ja.md │ ├── README.ko.md │ ├── README.ms.md │ ├── README.nl.md │ ├── README.pt-BR.md │ ├── README.pt.md │ ├── README.ta.md │ ├── README.zh-cn.md │ └── README.zh-tw.md ├── 4-typing-game ├── README.md ├── images │ └── demo.gif ├── solution │ ├── README.md │ ├── index.css │ ├── index.html │ └── index.js ├── translations │ ├── README.es.md │ ├── README.fr.md │ ├── README.hi.md │ ├── README.it.md │ ├── README.ja.md │ ├── README.ko.md │ ├── README.ms.md │ ├── README.nl.md │ ├── README.ta.md │ ├── README.uk.md │ ├── README.zh-cn.md │ ├── README.zh-tw.md │ └── READMR.pt-BR.md └── typing-game │ ├── README.md │ ├── assignment.md │ └── translations │ ├── README.fr.md │ ├── README.hi.md │ ├── README.it.md │ ├── README.ja.md │ ├── README.ko.md │ ├── README.ms.md │ ├── README.zh-tw.md │ ├── assignment.fr.md │ ├── assignment.hi.md │ ├── assignment.it.md │ ├── assignment.ja.md │ ├── assignment.ko.md │ ├── assignment.ms.md │ ├── assignment.nl.md │ ├── assignment.zh-cn.md │ └── assignment.zh-tw.md ├── 5-browser-extension ├── 1-about-browsers │ ├── README.md │ ├── assignment.md │ ├── images │ │ ├── 1.png │ │ ├── 2.png │ │ ├── earlybrowsers.jpg │ │ └── install-on-edge.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.pt.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.pt.md │ │ └── assignment.zh-tw.md ├── 2-forms-browsers-local-storage │ ├── README.md │ ├── assignment.md │ ├── images │ │ └── localstorage.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md ├── 3-background-tasks-and-performance │ ├── README.md │ ├── assignment.md │ ├── images │ │ ├── log.png │ │ ├── profiler.png │ │ └── snapshot.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ ├── assignment.zh-cn.md │ │ └── assignment.zh-tw.md ├── README.md ├── extension-screenshot.png ├── install-on-edge.png ├── solution │ ├── README.md │ ├── dist │ │ ├── background.js │ │ ├── images │ │ │ └── plants-people.png │ │ ├── index.html │ │ ├── main.js │ │ ├── manifest.json │ │ └── styles.css │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── index.js │ └── translation │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ └── README.ms.md ├── start │ ├── README.md │ ├── dist │ │ ├── background.js │ │ ├── images │ │ │ └── plants-people.png │ │ ├── index.html │ │ ├── main.js │ │ ├── manifest.json │ │ └── styles.css │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── index.js │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ └── README.ms.md └── translations │ ├── README.es.md │ ├── README.fr.md │ ├── README.hi.md │ ├── README.it.md │ ├── README.ja.md │ ├── README.ko.md │ ├── README.ms.md │ ├── README.nl.md │ ├── README.ta.md │ ├── README.zh-cn.md │ └── README.zh-tw.md ├── 6-space-game ├── 1-introduction │ ├── README.md │ ├── assignment.md │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md ├── 2-drawing-to-canvas │ ├── README.md │ ├── assignment.md │ ├── canvas_grid.png │ ├── partI-solution.png │ ├── solution │ │ ├── app.js │ │ ├── assets │ │ │ ├── enemyShip.png │ │ │ └── player.png │ │ ├── index.html │ │ └── package.json │ ├── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md │ └── your-work │ │ ├── app.js │ │ ├── assets │ │ ├── enemyShip.png │ │ └── player.png │ │ ├── index.html │ │ └── package.json ├── 3-moving-elements-around │ ├── README.md │ ├── assignment.md │ ├── solution │ │ ├── app.js │ │ ├── assets │ │ │ ├── enemyShip.png │ │ │ ├── laserRed.png │ │ │ └── player.png │ │ ├── index.html │ │ └── package.json │ ├── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md │ └── your-work │ │ ├── app.js │ │ ├── assets │ │ ├── enemyShip.png │ │ ├── laserRed.png │ │ └── player.png │ │ ├── index.html │ │ └── package.json ├── 4-collision-detection │ ├── README.md │ ├── assignment.md │ ├── solution │ │ ├── README.md │ │ ├── app.js │ │ ├── assets │ │ │ ├── enemyShip.png │ │ │ ├── laserRed.png │ │ │ ├── life.png │ │ │ └── player.png │ │ ├── index.html │ │ └── package.json │ ├── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md │ └── your-work │ │ ├── README.md │ │ ├── app.js │ │ ├── assets │ │ ├── enemyShip.png │ │ ├── laserRed.png │ │ ├── life.png │ │ └── player.png │ │ ├── index.html │ │ └── package.json ├── 5-keeping-score │ ├── README.md │ ├── assignment.md │ ├── solution │ │ ├── README.md │ │ ├── app.js │ │ ├── assets │ │ │ ├── enemyShip.png │ │ │ ├── laserRed.png │ │ │ ├── life.png │ │ │ └── player.png │ │ ├── index.html │ │ └── package.json │ ├── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md │ └── your-work │ │ ├── README.md │ │ ├── app.js │ │ ├── assets │ │ ├── enemyShip.png │ │ ├── laserRed.png │ │ ├── life.png │ │ └── player.png │ │ ├── index.html │ │ └── package.json ├── 6-end-condition │ ├── README.md │ ├── assignment.md │ ├── solution │ │ ├── README.md │ │ ├── app.js │ │ ├── assets │ │ │ ├── enemyShip.png │ │ │ ├── laserRed.png │ │ │ ├── life.png │ │ │ └── player.png │ │ ├── index.html │ │ └── package.json │ ├── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md │ └── your-work │ │ ├── README.md │ │ ├── app.js │ │ ├── assets │ │ ├── enemyShip.png │ │ ├── laserRed.png │ │ ├── life.png │ │ └── player.png │ │ ├── index.html │ │ └── package.json ├── README.md ├── images │ └── pewpew.gif ├── solution │ ├── README.md │ ├── app.js │ ├── index.html │ ├── package.json │ ├── spaceArt │ │ ├── png │ │ │ ├── Background │ │ │ │ ├── backgroundColor.png │ │ │ │ ├── nebula.png │ │ │ │ ├── speedLine.png │ │ │ │ ├── starBackground.png │ │ │ │ ├── starBig.png │ │ │ │ └── starSmall.png │ │ │ ├── enemyShip.png │ │ │ ├── enemyUFO.png │ │ │ ├── laserGreen.png │ │ │ ├── laserGreenShot.png │ │ │ ├── laserRed.png │ │ │ ├── laserRedShot.png │ │ │ ├── life.png │ │ │ ├── meteorBig.png │ │ │ ├── meteorSmall.png │ │ │ ├── player.png │ │ │ ├── playerDamaged.png │ │ │ ├── playerLeft.png │ │ │ ├── playerRight.png │ │ │ └── shield.png │ │ ├── preview.jpg │ │ ├── readme.txt │ │ ├── spaceArt.ai │ │ ├── spaceArt.svg │ │ └── spaceArt.swf │ └── spritesheet.png └── translations │ ├── README.es.md │ ├── README.fr.md │ ├── README.hi.md │ ├── README.it.md │ ├── README.ja.md │ ├── README.ko.md │ ├── README.ms.md │ ├── README.nl.md │ ├── README.pt-BR.md │ ├── README.ta.md │ ├── README.zh-cn.md │ └── README.zh-tw.md ├── 7-bank-project ├── 1-template-route │ ├── README.md │ ├── assignment.md │ ├── history.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md ├── 2-forms │ ├── README.md │ ├── assignment.md │ ├── images │ │ ├── browser-console.png │ │ ├── click-register.png │ │ ├── form-post.png │ │ ├── result.png │ │ └── validation-error.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md ├── 3-data │ ├── README.md │ ├── assignment.md │ ├── images │ │ ├── login-error.png │ │ ├── mpa.png │ │ └── spa.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md ├── 4-state-management │ ├── README.md │ ├── assignment.md │ ├── images │ │ ├── data-flow.png │ │ └── dialog.png │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ms.md │ │ ├── README.zh-tw.md │ │ ├── assignment.es.md │ │ ├── assignment.fr.md │ │ ├── assignment.hi.md │ │ ├── assignment.it.md │ │ ├── assignment.ja.md │ │ ├── assignment.ko.md │ │ ├── assignment.ms.md │ │ ├── assignment.nl.md │ │ └── assignment.zh-tw.md ├── README.md ├── api │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── api.http │ ├── package-lock.json │ ├── package.json │ ├── server.js │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ml.md │ │ ├── README.ms.md │ │ └── README.zh-tw.md ├── images │ ├── screen1.png │ └── screen2.png ├── solution │ ├── README.md │ ├── app.js │ ├── index.html │ ├── logo.svg │ ├── styles.css │ └── translations │ │ ├── README.es.md │ │ ├── README.fr.md │ │ ├── README.hi.md │ │ ├── README.it.md │ │ ├── README.ja.md │ │ ├── README.ko.md │ │ ├── README.ml.md │ │ └── README.ms.md └── translations │ ├── README.es.md │ ├── README.fr.md │ ├── README.hi.md │ ├── README.it.md │ ├── README.ja.md │ ├── README.ko.md │ ├── README.ml.md │ ├── README.ms.md │ ├── README.nl.md │ ├── README.pt-BR.md │ ├── README.ta.md │ ├── README.zh-cn.md │ └── README.zh-tw.md ├── 8-code-editor ├── 1-using-a-code-editor │ ├── README.md │ ├── assignment.md │ └── translations │ │ └── README.fr.md └── images │ ├── after-codeswing-extension-pb.png │ ├── create-a-fork.png │ ├── create-new-file-pb.png │ ├── create-new-file.png │ ├── default-vscode-dev.png │ ├── edit-a-file-pb.png │ ├── edit-a-file.png │ ├── edit-vscode.dev.gif │ ├── extension-details.png │ ├── extension-settings.png │ ├── extensions.png │ ├── install-extension.gif │ ├── new-file-github.com.png │ ├── open-palette-menu.png │ ├── open-remote-repository.png │ ├── palette-menu.png │ ├── project-on-vscode.dev.png │ ├── working-tree-pb.png │ └── working-tree.png ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── SUPPORT.md ├── TRANSLATIONS.md ├── _404.md ├── docs ├── _navbar.md └── _sidebar.md ├── docsifytopdf.js ├── for-teachers.md ├── images ├── background.png ├── character.png ├── clone_repo.png ├── createcodespace.png ├── favicon.png ├── screenshot.png └── web.gif ├── index.css ├── index.html ├── lesson-template ├── README.md ├── assignment.md └── translations │ ├── README.es.md │ ├── README.fr.md │ ├── README.hi.md │ ├── assignment.es.md │ ├── assignment.fr.md │ └── assignment.hi.md ├── package-lock.json ├── package.json ├── pdf └── readme.pdf ├── quiz-app ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ ├── base.css │ │ ├── logo.svg │ │ ├── main.css │ │ └── translations │ │ │ ├── el.json │ │ │ ├── en.json │ │ │ ├── es.json │ │ │ ├── fa.json │ │ │ ├── fr.json │ │ │ ├── hi.json │ │ │ ├── id.json │ │ │ ├── index.js │ │ │ ├── it.json │ │ │ ├── ja.json │ │ │ ├── ko.json │ │ │ ├── ms.json │ │ │ ├── nl.json │ │ │ ├── pt-BR.json │ │ │ ├── ta.json │ │ │ ├── zh_cn.json │ │ │ └── zh_tw.json │ ├── components │ │ ├── QuizComponent.vue │ │ ├── QuizGreeting.vue │ │ ├── QuizzesComponent.vue │ │ └── icons │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ ├── IconEcosystem.vue │ │ │ ├── IconSupport.vue │ │ │ └── IconTooling.vue │ ├── main.js │ ├── router │ │ └── index.js │ └── views │ │ ├── AboutView.vue │ │ └── HomeView.vue └── vite.config.js ├── sketchnotes ├── browser.jpg ├── webdev101-a11y.png ├── webdev101-css.png ├── webdev101-github.png ├── webdev101-html.png ├── webdev101-js-arrays.png ├── webdev101-js-datatypes.png ├── webdev101-js-decisions.png ├── webdev101-js-functions.png ├── webdev101-js.png └── webdev101-programming.png ├── teaching-files ├── canvas.png ├── moodle.png ├── webdev-common-cartridge.imscc └── webdev-moodle.mbz └── translations ├── README.bn.md ├── README.el.md ├── README.fa.md ├── README.fil.md ├── README.fr.md ├── README.hi.md ├── README.id.md ├── README.it.md ├── README.ja.md ├── README.mar.md ├── README.ml.md ├── README.pt-BR.md ├── README.ru.md ├── README.ta.md ├── README.te.md ├── README.th.md ├── README.tr.md ├── README.zh-cn.md ├── for-teachers.el.md ├── for-teachers.es.md ├── for-teachers.fr.md ├── for-teachers.hi.md ├── for-teachers.it.md ├── for-teachers.ja.md ├── for-teachers.mar.md ├── for-teachers.ml.md ├── for-teachers.pl.md ├── for-teachers.pt.md ├── for-teachers.ru.md ├── for-teachers.ta.md ├── for-teachers.te.md ├── for-teachers.uk.md └── for-teachers.zh-cn.md /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "image": "mcr.microsoft.com/devcontainers/universal:2", 3 | "features": { 4 | "ghcr.io/devcontainers/features/github-cli:1": {} 5 | }, 6 | "customizations": { 7 | "vscode": { 8 | "extensions": [ 9 | "GitHub.copilot", 10 | "ms-vscode.azure-account", 11 | "ms-azuretools.vscode-azurestaticwebapps" 12 | ] 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | Please include a summary of the changes and the related issue. Please also include relevant motivation and context. 4 | 5 | Fixes # (issue) 6 | 7 | ## Type of change 8 | 9 | - [ ] Bug fix (non-breaking change which fixes an issue) 10 | - [ ] New feature (non-breaking change which adds functionality) 11 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 12 | - [ ] This change requires a documentation update -------------------------------------------------------------------------------- /.github/workflows/links.yml: -------------------------------------------------------------------------------- 1 | name: Links 2 | 3 | on: 4 | repository_dispatch: 5 | workflow_dispatch: 6 | schedule: 7 | - cron: "00 18 * * 0" 8 | 9 | jobs: 10 | linkChecker: 11 | runs-on: ubuntu-latest 12 | permissions: 13 | issues: write # required for peter-evans/create-issue-from-file 14 | steps: 15 | - uses: actions/checkout@v4 16 | 17 | - name: Link Checker 18 | id: lychee 19 | uses: lycheeverse/lychee-action@v2 20 | with: 21 | fail: false 22 | 23 | - name: Create Issue From File 24 | if: steps.lychee.outputs.exit_code != 0 25 | uses: peter-evans/create-issue-from-file@v5 26 | with: 27 | title: Link Checker Report 28 | content-filepath: ./lychee/out.md 29 | labels: report, automated issue 30 | -------------------------------------------------------------------------------- /.github/workflows/lock.yml: -------------------------------------------------------------------------------- 1 | name: Lock closed issue 2 | 3 | on: 4 | issues: 5 | types: [closed] 6 | 7 | jobs: 8 | lock: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: OSDKDev/lock-issues@v1.1 12 | with: 13 | repo-token: "${{ secrets.GITHUB_TOKEN }}" 14 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/.nojekyll -------------------------------------------------------------------------------- /1-getting-started-lessons/1-intro-to-programming-languages/assignment.md: -------------------------------------------------------------------------------- 1 | # Reading the Docs 2 | 3 | ## Instructions 4 | 5 | There are many tools that a web developer may need that are on the [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Select 3 tools not covered in the lesson, explain why a web developer would use it, and search for a tool that falls under this category and share its documentation. Do not use the same tool example on MDN docs. 6 | 7 | ## Rubric 8 | 9 | Exemplary | Adequate | Needs Improvement 10 | --- | --- | -- | 11 | |Explained why web developer would use tool| Explained how, but not why developer would use tool| Did not mention how or why a developer would use tool | -------------------------------------------------------------------------------- /1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # ドキュメントを読む 2 | 3 | ## 説明書 4 | 5 | Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。 6 | 7 | ## ルーブリック 8 | 9 | 模範的な例 | 適切な | 改善が必要 10 | --- | --- | -- | 11 | |Web 開発者がツールを使う理由を説明| 開発者がツールを使用する理由ではなく、どのように使用するかを説明しました。| 開発者がツールを使用する方法や理由については言及していません。 | -------------------------------------------------------------------------------- /1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 공식문서 읽기 2 | 3 | ## 설명 4 | 5 | 웹 개발자들이 필요할 만한 도구들이 [MDN 클라이언트 사이드 도구 문서](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)에 소개되어있습니다. 이번 수업내용에 포함되지 않은 3개의 도구를 선택하고, 왜 웹 개발자들이 사용할만한지를 설명해봅시다. 그리고 이 범주에 속하는 도구를 찾아서 문서를 공유해봅시다. MDN문서에 있는 똑같은 예시를 사용하면 안 됩니다. 6 | 7 | ## 평가 기준 8 | 9 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- 11 | 웹 개발자가 도구를 사용하는 이유를 설명한 경우 | 개발자가 도구를 사용하는 방법은 설명했지만 도구를 사용하는 이유는 설명하지 않은 경우 | 개발자가 도구를 사용하는 이유나 방법을 설명하지 않은 경우 12 | -------------------------------------------------------------------------------- /1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md: -------------------------------------------------------------------------------- 1 | # Membaca Docs 2 | 3 | ## Arahan 4 | Terdapat banyak alat yang mungkin diperlukan oleh pembangun web adalah di [Dokumentasi MDN untuk perkakas sisi pelanggan](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Pilih 3 alat yang tidak diliputi dalam pelajaran, terangkan mengapa pembangun web menggunakannya, dan mencari alat yang terdapat dalam kategori ini dan kongsikan dokumentasinya. Jangan menggunakan contoh alat yang sama pada MDN. 5 | 6 | ## Rubrik 7 | 8 | Contoh | Mencukupi | Usaha Lagi 9 | --- | --- | -- | 10 | |Terangkan mengapa pembangun web menggunakan alat| Terangkan bagaimana dan mengapa pembangun akan menggunakan alat| Tidak menyebut bagaimana atau mengapa pembangun menggunakan alat | -------------------------------------------------------------------------------- /1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md: -------------------------------------------------------------------------------- 1 | # De Documenten lezen 2 | 3 | ## Instructies 4 | 5 | Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten. 6 | 7 | ## Rubriek 8 | 9 | Voorbeeldig | Voldoende | Moet Worden Verbeterd 10 | --- | --- | -- | 11 | |Uitgelegd waarom webontwikkelaar een tool zou gebruiken| Uitgelegd hoe, maar niet waarom de ontwikkelaar de tool zou gebruiken| Niet vermeld hoe of waarom een ontwikkelaar een tool zou gebruiken | -------------------------------------------------------------------------------- /1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md: -------------------------------------------------------------------------------- 1 | # Читання документів 2 | 3 | ## Інструкції 4 | 5 | Існує багато інструментів, які можуть знадобитися веб-розробнику [MDN документація для client-side інструментів](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Виберіть 3 інструменти, які не розглянуті в уроці, поясніть, чому веб-розробник використав би їх, знайдіть інструмент, який підпадає під цю категорію, і поділіться його документацією. Не використовуйте той самий приклад інструмента для документів MDN. 6 | 7 | ## Рубрика 8 | 9 | Зразковий | Достатній | Потребує покращення 10 | --- | --- | -- | 11 | | Пояснено, чому веб-розробник використовує інструмент| Пояснив як, але не пояснив чому розробник використовує інструмент| Не згадав як і чому розробник буде використовувати інструмент | -------------------------------------------------------------------------------- /1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 阅读文档 2 | 3 | ## 说明 4 | 5 | [MDN 客户端工具文档](https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)中介绍了需要 Web 开发者可能需要用到的工具。从中选取三种本节课中没有提到的工具，并说明为什么 Web 开发者需要用到它们，搜索其中一种工具并给出它的文档。不要直接使用 MDN 中给出的示例。 6 | 7 | ## 评价表 8 | 9 | | 优秀 | 良好 | 尚可进步 | 10 | | --- | --- | --- | 11 | | 解释了 Web 开发者为什么需要这些工具 | 解释了开发者如何使用这些工具，但却没有解释为什么需要它们 | 既没有解释为什么使用这些工具，也没有给出使用它们的方法 | 12 | -------------------------------------------------------------------------------- /1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 閱讀技術文件 2 | 3 | ## 說明 4 | 5 | 網頁開發人員所需要使用的工具套件可以參考 [MDN Client端技術開發文件](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。 請選擇三種未被本課程提及的工具，試解釋為何網頁開發人員使用它，並搜尋其相關的工具與它的技術文件。這些資料不能出現在前述的 MDN 文件當中。 6 | 7 | ## 學習評量 8 | 9 | | 優良 | 普通 | 待改進 | 10 | | ------------------------------ | -------------------- | ------------------------------ | 11 | | 解釋為何網頁開發人員會用此工具 | 只解釋工具的使用方法 | 未提及工具的使用意義與使用方法 | -------------------------------------------------------------------------------- /1-getting-started-lessons/2-github-basics/images/clone_repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/1-getting-started-lessons/2-github-basics/images/clone_repo.png -------------------------------------------------------------------------------- /1-getting-started-lessons/3-accessibility/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 접근성이 좋지 않은 웹 사이트 분석하기 2 | 3 | ## 설명 4 | 5 | 여러분이 접근할 수 없다고 생각하는 사이트를 식별해보고, 접근성을 개선할 수 있는 실행 계획을 만들어봅니다. 여러분의 첫 과제는 사이트를 식별하고 분석 도구를 사용하지 않고 사이트에 접근할 수 없는 방법을 자세히 설명한 다음, Lighthouse 분석을 통해 그 사이트를 확인하는 것입니다. 분석의 결과를 가지고 사이트를 개선할 수 있는 10가지 포인트를 가진 세부 계획을 개략적으로 설명해봅니다. 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | 학생 보고서 | 보고서에 Lighthouse의 진단 결과 캡쳐본이 pdf파일로 첨부되었고, 10가지의 개선점과 함께 개선방안을 포함한 단락들이 포함된 경우 | 필수조건이 20%정도 부족한 경우 | 필수조건이 50%정도 부족한 경우 12 | -------------------------------------------------------------------------------- /1-getting-started-lessons/3-accessibility/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 分析一个非无障碍网站 2 | 3 | ## 说明 4 | 5 | 找到一个你认为无障碍性做得不好的网站，制定一个提升其无障碍性的计划表。你的第一个任务是找到这样一个网站，并在不借助分析工具的前提下详细指出你认为它无障碍做得不好的方面，然后再使用 Lighthouse 分析工具来分析它。借助分析的结果，制定一个包含至少十点的改进该网站的详细计划。 6 | 7 | ## 评价表 8 | 9 | | 指标 | 优秀 | 良好 | 尚可进步 | 10 | | --- | --- | --- | --- | 11 | | 书面报告 | 解释了这个网站做得不好的地方，将 Lighthouse 报告打印为 PDF 文件，至少十点可改进之处，每点详细说明了改进策略 | 缺少上述 20% 内容 | 缺少上述 50% 内容 | 12 | -------------------------------------------------------------------------------- /1-getting-started-lessons/3-accessibility/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 分析一個非無障礙網頁 2 | 3 | ## 說明 4 | 5 | 辨別一個你認為對視覺障礙者不友善的網頁，列出網頁改進的策略。你需要先發掘各個網頁，不使用分析工具的情況下判斷網頁的親和力，再套用到 Lighthouse 審核工具。將網頁的審核結果轉化成至少十點的改進計畫。 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | ----------------------------------------------------------------------------------- | --------------- | --------------- | 11 | | 書面報告 | 文章解釋為何網頁需要被改進，將 Lighthouse 結果轉成 pdf 檔，列出十點詳細的改進計畫。 | 缺少 20% 的內容 | 缺少 50% 的內容 | -------------------------------------------------------------------------------- /1-getting-started-lessons/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Web Development 2 | 3 | In this section of the curriculum, you will be introduced to non project-based concepts important to becoming a professional developer. 4 | 5 | ### Topics 6 | 7 | 1. [Introduction to Programming Languages and Tools of the Trade](1-intro-to-programming-languages/README.md) 8 | 2. [Introduction to GitHub](2-github-basics/README.md) 9 | 3. [Basics of Accessibility](3-accessibility/README.md) 10 | 11 | ### Credits 12 | 13 | Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique) 14 | 15 | Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees) 16 | 17 | Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer) 18 | -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.hi.md: -------------------------------------------------------------------------------- 1 | # वेब डेवलपमेंट के साथ शुरुआत करना 2 | 3 | पाठ्यक्रम के इस खंड में, आपको पेशेवर डेवलपर बनने के लिए महत्वपूर्ण गैर-परियोजना आधारित अवधारणाओं से परिचित कराया जाएगा। 4 | 5 | ### विषय 6 | 7 | 1. [प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय](../1-intro-to-programming-languages/translations/README.hi.md) 8 | 2. [गिटहब की मूल बातें](../2-github-basics/translations/README.hi.md) 9 | 3. [पहुँच की मूल बातें](../3-accessibility/translations/README.hi.md) 10 | 11 | ### क्रेडिट 12 | 13 | एक्सेसिबिलिटी की मूल बातें [क्रिस्टोफर हैरिसन](https://twitter.com/geektrainer) द्वारा ♥️ से लिखा गया था। 14 | 15 | GitHub का परिचय [फ्लोर ड्रेस](https://twitter.com/floordrees) द्वारा ♥️ से लिखा गया था। 16 | 17 | प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय [जस्मिने ग्रीनवे](https://twitter.com/paladique) द्वारा ♥️ से लिखा गया था। 18 | -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.id.md: -------------------------------------------------------------------------------- 1 | # Memulai Pengembangan Web 2 | 3 | Di bagian kurikulum ini, Anda akan diperkenalkan dengan konsep berbasis non-proyek yang penting untuk menjadi pengembang profesional. 4 | 5 | ### Topik 6 | 7 | 1. [Pengantar Bahasa Pemrograman dan Alat Keterampilan](../1-intro-to-programming-languages/translations/README.id.md) 8 | 2. [Dasar-dasar GitHub](../2-github-basics/translations/README.id.md) 9 | 3. [Dasar-dasar Aksesibilitas](../3-accessibility/translations/README.id.md) 10 | 11 | ### Kredit 12 | 13 | Dasar-dasar Aksesibilitas ditulis dengan ♥ ️oleh [Christopher Harrison](https://twitter.com/geektrainer) 14 | 15 | Pengantar GitHub ditulis dengan ♥ ️oleh [Floor Drees](https://twitter.com/floordrees) 16 | 17 | Pengantar Bahasa Pemrograman dan Alat Keterampilan ditulis dengan ♥ ️oleh [Jasmine Greenaway](https://twitter.com/paladique) 18 | -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.ja.md: -------------------------------------------------------------------------------- 1 | # Web 開発を始めるにあたって 2 | 3 | このセクションでは、プロの開発者になるために重要なプロジェクトベースではない概念を紹介します。 4 | 5 | ### トピック 6 | 7 | 1. [プログラミング言語と開発ツール入門](../1-intro-to-programming-languages/translations/README.ja.md) 8 | 2. [GitHub の基本](../2-github-basics/translatiions/README.ja.md) 9 | 3. [アクセシビリティの基本](../3-accessibility/translations/README.ja.md) 10 | 11 | ### Credits 12 | 13 | Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer) 14 | 15 | Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees) 16 | 17 | Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique) 18 | -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.ko.md: -------------------------------------------------------------------------------- 1 | # 웹 개발 시작하기 2 | 3 | 커리큘럼의 해당 세션에서는 프로젝트 기반이 아닌 전문 개발자가 되는 데 중요한 개념을 소개합니다. 4 | 5 | ### 토픽 6 | 7 | 1. [프로그래밍 언어 및 도구 소개](../1-intro-to-programming-languages/translations/README.ko.md) 8 | 2. [GitHub의 기초](../2-github-basics/translations/README.ko.md) 9 | 3. [접근성의 기초](../3-accessibility/translations/README.ko.md) 10 | 11 | ### 크레딧 12 | 13 | Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer) 14 | 15 | Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees) 16 | 17 | Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique) 18 | -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.np.md: -------------------------------------------------------------------------------- 1 | # वेब विकासको साथ सुरू गर्दै 2 | 3 | पाठ्यक्रमको यस खण्डमा, तपाईंलाई व्यावसायिक विकासकर्ता बन्न महत्त्वपूर्ण गैर-प्रोजेक्ट-आधारित अवधारणाहरूसँग परिचय गराइनेछ। 4 | 5 | ### विषयहरू 6 | 7 | 1. [प्रोग्रामिङ भाषाहरू र व्यापारका उपकरणहरूको परिचय](../1-intro-to-programming-languages/translations/README.np.md) 8 | 2. [GitHub को परिचय](../2-github-basics/README.md) 9 | 3. [पहुँचको आधारभूत](../3-accessibility/README.md) 10 | 11 | ### क्रेडिट 12 | 13 | [Jasmine Greenaway](https://twitter.com/paladique) द्वारा ♥️ को साथमा प्रोग्रामिङ भाषाहरू र व्यापारका उपकरणहरूको परिचय लेखिएको थियो। 14 | 15 | GitHub को परिचय [Floor Drees](https://twitter.com/floordrees) द्वारा ♥️ लेखिएको थियो। 16 | 17 | पहुँचका आधारभूत कुराहरू [Christopher Harrison](https://twitter.com/geektrainer) द्वारा ♥️ लेखिएको थियो। 18 | -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.pb.md: -------------------------------------------------------------------------------- 1 | # ਵੈੱਬ ਵਿਕਾਸ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨਾ 2 | 3 | ਕੋਰਸ ਦੇ ਇਸ ਭਾਗ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਇੱਕ ਪੇਸ਼ੇਵਰ ਵਿਕਾਸਕਾਰ ਬਣਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਗੈਰ-ਪ੍ਰੋਜੈਕਟ ਅਧਾਰਤ ਸੰਕਲਪਾਂ ਨਾਲ ਜਾਣੂ ਕਰਵਾਇਆ ਜਾਵੇਗਾ। 4 | 5 | ### ਵਿਸ਼ਾ 6 | 7 | 1. [ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਵਪਾਰਕ ਸਾਧਨਾਂ ਦੀ ਜਾਣ-ਪਛਾਣ](../1-intro-to-programming-languages/translations/README.en.md) 8 | 2. [GitHub ਬੇਸਿਕਸ](../2-github-basics/translations/README.en.md) 9 | 3. [ਪਹੁੰਚਯੋਗਤਾ ਮੂਲ ਗੱਲਾਂ](../3-accessibility/translations/README.en.md) 10 | 11 | ### ਕ੍ਰੈਡਿਟ 12 | 13 | ਪਹੁੰਚਯੋਗਤਾ ਦੀਆਂ ਬੁਨਿਆਦੀ ਗੱਲਾਂ [ਕ੍ਰਿਸਟੋਫਰ ਹੈਰੀਸਨ](https://twitter.com/geektrainer) ਦੁਆਰਾ ♥️ ਦੁਆਰਾ ਲਿਖੀਆਂ ਗਈਆਂ ਸਨ। 14 | 15 | GitHub ਦੀ ਜਾਣ-ਪਛਾਣ [floordress](https://twitter.com/floordtrees) ਦੁਆਰਾ ♥️ ਦੁਆਰਾ ਲਿਖੀ ਗਈ ਸੀ। 16 | 17 | ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਵਪਾਰਕ ਸਾਧਨਾਂ ਦੀ ਜਾਣ-ਪਛਾਣ [ਜੈਸਮੀਨ ਗ੍ਰੀਨਵੇ] (https://twitter.com/paladique) ਦੁਆਰਾ ♥️ ਦੁਆਰਾ ਲਿਖੀ ਗਈ ਸੀ। -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.ta.md: -------------------------------------------------------------------------------- 1 | # இணைய அபிவிருத்தியுடன் தொடங்குதல் 2 | 3 | பாடத்திட்டத்தின் இந்தப் பிரிவில், தொழில்முறை மேம்பாட்டாளராக ஆவதற்கு முக்கியமான திட்ட அடிப்படையிலான கருத்துக்கள் உங்களுக்கு அறிமுகப்படுத்தப்படும். 4 | 5 | ### தலைப்புகள் 6 | 7 | 1. [வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம்](../1-intro-to-programming-languages/README.md) 8 | 2. [கிட்ஹப் அறிமுகம்](../2-github-basics/README.md) 9 | 3. [அணுகல்தன்மையின் அடிப்படைகள்](../3-accessibility/README.md) 10 | 11 | ### கடன்கள் 12 | 13 | வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம் ♥️ எழுதியவர் [ஜாஸ்மின் கிரீன்வே](https://twitter.com/paladique/) 14 | 15 | கிட்ஹப் அறிமுகம் ♥️ எழுதியவர் [ஃப்ளோர் டிரீஸ்](https://twitter.com/floordrees/) 16 | 17 | அணுகல்தன்மையின் அடிப்படைகள் ♥️ எழுதியவர் [கிறிஸ்டோபர் ஹாரிசன்](https://twitter.com/geektrainer/) 18 | 19 | -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.uk.md: -------------------------------------------------------------------------------- 1 | # Початок роботи з веб-розробкою 2 | 3 | У цьому розділі навчальної програми ви познайомитеся з концепціями важливими для того, щоб стати професійним розробником, які не опираються на проектах. 4 | 5 | ### Теми 6 | 7 | 1. [Введення до мов програмування та інструменти](../1-intro-to-programming-languages/README.md) 8 | 2. [Ввід до GitHub](../2-github-basics/README.md) 9 | 3. [Основи доступності](../3-accessibility/README.md) 10 | 11 | ### Титри 12 | 13 | Введення до мов програмування та інструменти були написані з ♥️ від [Jasmine Greenaway](https://twitter.com/paladique) 14 | 15 | Ввід до GitHub були написані з ♥️ від [Floor Drees](https://twitter.com/floordrees) 16 | 17 | Основи доступності були написані з ♥️ від [Christopher Harrison](https://twitter.com/geektrainer) 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 开始 Web 开发 2 | 3 | 在课程的这一部分，我们会通过不编写代码的方式介绍一些概念，这些概念对于成为一位专业的开发者非常重要。 4 | 5 | ### 主题 6 | 7 | 1. [编程语言概述与工具介绍](../1-intro-to-programming-languages/translations/README.zh-cn.md) 8 | 2. [GitHub 基础知识](../2-github-basics/translations/README.zh-cn.md) 9 | 3. [无障碍性基础知识](../3-accessibility/translations/README.zh-cn.md) 10 | 11 | ### 鸣谢 12 | 13 | 无障碍性基础知识由 [Christopher Harrison](https://twitter.com/geektrainer) 用 ♥️ 编写 14 | 15 | GitHub 基础知识由 [Floor Drees](https://twitter.com/floordrees) 用 ♥️ 编写 16 | 17 | 编程语言概述与工具介绍由 [Jasmine Greenaway](https://twitter.com/paladique) 用 ♥️ 编写 18 | -------------------------------------------------------------------------------- /1-getting-started-lessons/translations/README.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 網頁開發入門 2 | 3 | 這段課程會說明重要的程式開發觀念，不會以程式碼為導向，讓你成為出色的開發人員。 4 | 5 | ### 主題 6 | 7 | 1. [程式語言概論與必備工具](../1-intro-to-programming-languages/translations/README.zh-tw.md) 8 | 2. [GitHub 簡介](../2-github-basics/translations/README.zh-tw.md) 9 | 3. [建立無障礙網頁](../3-accessibility/translations/README.zh-tw.md) 10 | 11 | ### 參與人員 12 | 13 | 文章「無障礙網頁」是由 [Christopher Harrison](https://twitter.com/geektrainer) 用滿滿的 ♥️ 來編寫。 14 | 15 | 文章「GitHub 簡介」是由 [Floor Drees](https://twitter.com/floordrees) 用滿滿的 ♥️ 來編寫。 16 | 17 | 文章「建立無障礙網頁」是由 [Jasmine Greenaway](https://twitter.com/paladique) 用滿滿的 ♥️ 來編寫。 18 | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/assignment.md: -------------------------------------------------------------------------------- 1 | # Data Types Practice 2 | 3 | ## Instructions 4 | 5 | Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices? 6 | 7 | ## Rubric 8 | 9 | Criteria | Exemplary | Adequate | Needs Improvement 10 | --- | --- | --- | -- | 11 | ||The six data types are listed and explored in detail, documenting their use|Four datatypes are explored|Two data types are explored| -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.az.md: -------------------------------------------------------------------------------- 1 | # Məlumat növləri üzrə məşqlər 2 | 3 | ## Təlimatlar 4 | 5 | Təsəvvür edin ki, bir alış-veriş səbəti düzəldin. Alış-veriş təcrübənizi tamamlamaq üçün lazım olan məlumat növləri haqqında bəzi sənədləri yazın. Seçimlərinizə necə gəldiniz? 6 | 7 | ## Ünvan kitabçası 8 | 9 | Meyarlar | Əla | adekvat | Təkmilləşdirmələr lazımdır 10 | --- | --- | --- | - | 11 | || Altı məlumat növü onların istifadəsini sənədləşdirərək ətraflı şəkildə sadalanır və araşdırılır | Dörd növ məlumat tədqiq edilir | İki növ məlumat tədqiq edilir | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.de.md: -------------------------------------------------------------------------------- 1 | # Datentypen üben 2 | 3 | ## Anleitung 4 | 5 | Stellen Sie sich vor, Sie bauen einen Einkaufswagen. Schreiben Sie eine Dokumentation zu den Datentypen, die Sie benötigen, um Ihr Einkaufserlebnis zu vervollständigen. Wie sind Sie zu Ihren Entscheidungen gekommen? 6 | 7 | ## Rubrik 8 | 9 | Kriterien | Vorbildlich | Angemessen | Muss verbessert werden 10 | --- | --- | --- | - | 11 | || Die sechs Datentypen werden aufgelistet und detailliert untersucht, wobei ihre Verwendung dokumentiert wird. | Vier Datentypen werden untersucht. | Zwei Datentypen werden untersucht. | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | # Práctica de tipos de datos 2 | 3 | ## Instrucciones 4 | 5 | Imagina que estás construyendo un carrito de compras. Escriba documentación sobre los tipos de datos que necesitaría para completar su experiencia de compra. ¿Cómo llegó a sus elecciones? 6 | 7 | ## Rúbrica 8 | 9 | Criterios | Ejemplar | Adecuado | Necesita mejorar 10 | --- | --- | --- | - | 11 | || Los seis tipos de datos se enumeran y exploran en detalle, documentando su uso | Se exploran cuatro tipos de datos | Se exploran dos tipos de datos | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.fr.md: -------------------------------------------------------------------------------- 1 | # Types de données Pratique 2 | 3 | ## Instructions 4 | 5 | Imaginez que vous construisez un panier d'achat. Écrivez une documentation sur les types de données dont vous auriez besoin pour compléter votre expérience d'achat. Comment êtes vous arrivé à vos choix? 6 | 7 | ## Rubrique 8 | 9 | Critères |Exemplaire |Adéquat | Besoin d'amélioration 10 | --- |--- |--- |- | 11 | || Les six types de données sont listés et explorés en détail, documentant leur utilisation | Quatre types de données sont explorés | Deux types de données sont explorés | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.hi.md: -------------------------------------------------------------------------------- 1 | # डेटा प्रकार अभ्यास 2 | 3 | ## अनुदेश 4 | 5 | कल्पना कीजिए कि आप एक शॉपिंग कार्ट बना रहे हैं। डेटा प्रकारों पर कुछ दस्तावेज लिखें, जिन्हें आपको अपने खरीदारी के अनुभव को पूरा करने की आवश्यकता होगी। आप अपनी पसंद पर कैसे पहुंचे? 6 | 7 | ## सरनामा 8 | 9 | | मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत | 10 | | ------ | ---------------------------------------------------------------------------------- | --------------------------- | -------------------------- | 11 | | | छह डेटा प्रकार सूचीबद्ध हैं और विस्तार से पता लगाया है, उनके उपयोग का दस्तावेजीकरण | चार डेटाप्रकार की खोज की है | दो डेटाप्रकार की खोज की है | 12 | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.id.md: -------------------------------------------------------------------------------- 1 | # Praktek Tipe Data 2 | 3 | ## Instruksi 4 | 5 | Bayangkan Anda sedang membuat keranjang belanja. Tulislah beberapa dokumentasi tentang tipe data yang Anda perlukan untuk melengkapi pengalaman berbelanja Anda. Bagaimana Anda sampai pada pilihan Anda? 6 | 7 | ## Rubrik 8 | 9 | | Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan | 10 | |----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------| 11 | | | Enam tipe data didaftar dan dieksplorasi secara rinci, mendokumentasikan penggunaannya | Empat tipe data dieksplorasi | Dua tipe data dieksplorasi | 12 | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Esercizi sui Tipi di Dato 2 | 3 | ## Istruzioni 4 | 5 | Si immagini di costruire un carrello della spesa. Si scriva della documentazione sui tipi di dati necessari per completare la propria esperienza di acquisto. Come si è pervenuti alle proprie scelte? 6 | 7 | ## Rubrica 8 | 9 | Criteri | Ottimo | Adeguato | Necessari miglioramenti 10 | --- | --- | --- | - | 11 | || I sei tipi di dato sono elencati ed esplorati in dettaglio, documentando il loro utilizzo | Vengono esplorati quattro tipi di dati | Vengono esplorati due tipi di dati | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # データ型の練習 2 | 3 | ## 説明書 4 | 5 | あなたがショッピングカートを構築していると想像してください。ショッピング体験を完成させるために必要なデータ型について、いくつかの文書を書いてください。どのようにして選択にたどり着いたのでしょうか？ 6 | 7 | ## ルーブリック 8 | 9 | 基準 | 模範的な例 | 適切な | 改善が必要 10 | --- | --- | --- | -- | 11 | ||6つのデータタイプをリストアップして詳細に調査し、その使用法を文書化しています。|4つのデータ型が探索されています。|2つのデータタイプが探索されています。| -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 데이터 타입 연습 2 | 3 | ## 설명 4 | 5 | 쇼핑 카트를 만든다고 상상해봅시다. 필요한 데이터 타입들에 대한 문서를 작성해봅시다. 어떻게 그런 타입들을 고르게 됐습니까? 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 6가지 데이터 타입을 나열하고 자세히 살펴본 뒤 용도를 문서화한 경우 | 4가지 데이터 타입을 탐구한 답안 | 2가지 데이터 타입을 탐구한 경우 12 | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.ms.md: -------------------------------------------------------------------------------- 1 | # Latihan Jenis Data 2 | 3 | ## Arahan 4 | 5 | Bayangkan anda sedang membina keranjang belanja. Tulis beberapa dokumentasi mengenai jenis data yang anda perlukan untuk melengkapkan pengalaman membeli-belah anda. Bagaimana anda sampai pada pilihan anda? 6 | 7 | ## Rubrik 8 | 9 | Kriteria | Contoh | Mencukupi | Usaha Lagi 10 | --- | --- | --- | -- | 11 | ||Enam jenis data disenaraikan dan diterokai secara terperinci, mendokumentasikan penggunaannya|Empat jenis data diterokai|Duo jenis data diterokai| -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.nl.md: -------------------------------------------------------------------------------- 1 | # Gegevenstypen Oefening 2 | 3 | ## Instructies 4 | 5 | Stelt u voor dat u een winkelwagentje aan het bouwen bent. Schrijf wat documentatie over de gegevenstypen die u nodig zou hebben om uw winkelervaring te voltooien. Hoe bent u tot uw keuzes gekomen? 6 | 7 | ## Rubriek 8 | 9 | Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd 10 | --- | --- | --- | -- | 11 | ||De zes gegevenstypen worden opgesomd en in detail onderzocht, waarbij het gebruik ervan wordt gedocumenteerd|Vier gegevenstypen worden onderzocht|Twee gegevenstypen worden onderzocht| -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.pt.md: -------------------------------------------------------------------------------- 1 | # Prática de Tipos de Dados 2 | 3 | ## Instruções 4 | 5 | Imagine que você está construindo um carrinho de compras. Escreva alguma documentação sobre os tipos de dados de que você precisa para completar sua experiência de compra. Como você fez suas escolhas? 6 | 7 | ## Rubrica 8 | 9 | Critérios | Exemplar | Adequado | Precisa de melhorias 10 | --- | --- | --- | - | 11 | || Os seis tipos de dados são listados e explorados em detalhes, documentando seu uso | Quatro tipos de dados são explorados | Dois tipos de dados são explorados | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 数据类型练习 2 | 3 | ## 说明 4 | 5 | 想象你正在搭建一个购物车。写一个文档，描述一下为了完成你的购物之旅你可能会用到哪些数据类型。你是如何得出这些选择的？ 6 | 7 | ## 评价表 8 | 9 | | 指标 | 优秀 | 良好 | 尚可进步 | 10 | | --- | --- | --- | --- | 11 | | | 六种数据类型都被列出并且详细进行了说明，还说明了它们会被如何使用 | 举了四种数据类型 | 举了两种数据类型 | 12 | -------------------------------------------------------------------------------- /2-js-basics/1-data-types/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 練習資料型態 2 | 3 | ## 簡介 4 | 5 | 想像你要建立一條購物清單，寫下你需要使用的資料型態。你是怎麼做出這些選擇的? 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | ---------------------------------- | ---------------------------------- | ---------------------------------- | 11 | | | 使用六種資料型態並解釋用途以及用法 | 使用四種資料型態並解釋用途以及用法 | 使用兩種資料型態並解釋用途以及用法 | 12 | -------------------------------------------------------------------------------- /2-js-basics/2-functions-methods/translations/assignment.az.md: -------------------------------------------------------------------------------- 1 | # Funksiyalarla Əylən 2 | 3 | ## Təlimatlar 4 | 5 | Fərqli funksiyalar yaradın, həm nəyisə qaytaran funksiyalar, həm də heç nə qaytarmayan funksiyalar. 6 | 7 | Defolt dəyərləri olan parametrlər və parametrlərin qarışığı olan bir funksiya yarada bildiyinizə baxın. 8 | 9 | ## Rubrika 10 | 11 | | Meyarlar | Nümunəvi | Müvafiq | Təkmilləşdirmə Ehtiyacı var | 12 | | -------- | ------------------------------------------------- ----------------------------------- | ------------------------------------------------- -------------- | ----------------- | 13 | | | Həll müxtəlif parametrlərə malik iki və ya daha çox yaxşı işləyən funksiya ilə təklif olunur | İşçi həll bir funksiya və bir neçə parametr ilə təklif olunur | Həlldə səhvlər var | 14 | -------------------------------------------------------------------------------- /2-js-basics/2-functions-methods/translations/assignment.de.md: -------------------------------------------------------------------------------- 1 | # Spaß mit Funktionen 2 | 3 | ## Anleitung 4 | 5 | Erstellen Sie verschiedene Funktionen, sowohl Funktionen, die etwas zurückgeben, als auch Funktionen, die nichts zurückgeben. 6 | 7 | Überprüfen Sie, ob Sie eine Funktion erstellen können, die eine Mischung aus Parametern und Parametern mit Standardwerten enthält. 8 | 9 | ## Rubrik 10 | 11 | | Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf | 12 | | -------- | -------------------------------------------------- ------------------------------------ | -------------------------------------------------- -------------- | ----------------- | 13 | | | Die Lösung wird mit zwei oder mehr leistungsfähigen Funktionen mit verschiedenen Parametern angeboten Arbeitslösung wird mit einer Funktion und wenigen Parametern angeboten Lösung hat Fehler | -------------------------------------------------------------------------------- /2-js-basics/2-functions-methods/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | # Diversión con funciones 2 | 3 | ## Instrucciones 4 | 5 | Cree diferentes funciones, tanto funciones que devuelvan algo como funciones que no devuelvan nada. 6 | 7 | Vea si puede crear una función que tenga una combinación de parámetros y parámetros con valores predeterminados. 8 | 9 | ## Rúbrica 10 | 11 | | Criterios | Ejemplar | Adecuado | Necesita mejorar | 12 | | -------- | ------------------------------------ | -------------- | ----------------- | 13 | | | La solución se ofrece con dos o más funciones de buen rendimiento con diversos parámetros | La solución de trabajo se ofrece con una función y pocos parámetros | La solución tiene errores | 14 | -------------------------------------------------------------------------------- /2-js-basics/2-functions-methods/translations/assignment.fr.md: -------------------------------------------------------------------------------- 1 | # Du fun avec les fonctions 2 | 3 | ## Instructions 4 | 5 | Créez différentes fonctions, à la fois des fonctions qui renvoient quelque chose et des fonctions qui ne renvoient rien. 6 | 7 | Voyez si vous pouvez créer une fonction qui a un mélange de paramètres et de paramètres avec des valeurs par défaut. 8 | 9 | ## Rubrique 10 | 11 | | Critères | Exemplaire | Adéquat | Besoin d'amélioration | 12 | | -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- | 13 | | | La solution est proposée avec deux ou plusieurs fonctions performantes avec divers paramètres | La solution de travail est offerte avec une fonction et peu de paramètres | La solution a des bugs | 14 | -------------------------------------------------------------------------------- /2-js-basics/2-functions-methods/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Divertimento con le funzioni 2 | 3 | ## Istruzioni 4 | 5 | Creare diverse funzioni, sia funzioni che restituiscono qualcosa che funzioni che non restituiscono nulla. 6 | 7 | Provare a creare una funzione che abbia un mix di parametri e parametri con valori predefiniti. 8 | 9 | ## Rubrica 10 | 11 | | Criteri | Ottimo | Adeguato | Necessita miglioramento | 12 | | -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- | 13 | | | La soluzione è offerta con due o più funzioni con buone prestazioni con diversi parametri | La soluzione funzionante è offerta con una funzione e pochi parametri | La soluzione ha bug | -------------------------------------------------------------------------------- /2-js-basics/2-functions-methods/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # 関数で楽しむ 2 | 3 | ## 説明書 4 | 5 | 何かを返す関数と何も返さない関数の両方の異なる関数を作成します。 6 | 7 | デフォルト値を持つパラメータとパラメータが混在した関数を作成できるかどうかを見てみましょう。 8 | 9 | ## ルーブリック 10 | 11 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 12 | | -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- | 13 | | | ソリューションは、多様なパラメータを持つ2つ以上の関数で提供されます。 | ワーキングソリューションは、1つの関数と少数のパラメータで提供されます。 | ソリューションにはバグがあります。 | -------------------------------------------------------------------------------- /2-js-basics/2-functions-methods/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 함수와 놀기 2 | 3 | ## 설명 4 | 5 | 무언가를 반환하는 함수와 아무것도 반환하지 않는 또 다른 함수를 만들어봅니다. 6 | 7 | 기본값이 없는 매개 변수와 있는 매개 변수를 잘 혼합해 함수를 만들 수 있는지를 확인합니다. 8 | 9 | ## 평가 기준 10 | 11 | 기준 |
모범 답안 | 적당한 답안 | 개선이 필요한 답안 12 | --- | --- | --- | --- 13 | | 다양한 매개 변수를 가진 두개 이상의 잘 동작하는 함수를 포함한 답안 | 소수의 매개변수를 가진 한개의 함수를 포함한 답안 | 버그가 있는 답안 14 | -------------------------------------------------------------------------------- /2-js-basics/2-functions-methods/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 试玩函数 2 | 3 | ## 说明 4 | 5 | 创建一个会返回什么东西的函数，再创建一个不会返回任何东西的函数。 6 | 7 | 试试看让它们有多种参数，并且让其中一部分参数有默认值。 8 | 9 | ## 评价表 10 | 11 | | 指标 | 优秀 | 良好 | 尚可进步 | 12 | | --- | --- | --- | --- | 13 | | | 给出了两个或更多运行良好的函数，并且有多种多样的参数 | 只有一个可以正常运行的函数，参数也不多 | 有 Bug | 14 | -------------------------------------------------------------------------------- /2-js-basics/2-functions-methods/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 把玩函式 2 | 3 | ## 簡介 4 | 5 | 建立不同的函式，有的回傳數值，有的不回傳數值。 6 | 7 | 看看你是否能讓函式有多樣的參數輸入與參數預設值。 8 | 9 | ## 學習評量 10 | 11 | | 作業內容 | 優良 | 普通 | 待改進 | 12 | | -------- | ------------------------------------------ | -------------------------- | -------------- | 13 | | | 建立兩個以上多樣參數輸入且功能豐富的函式。 | 建立一個有參數輸入的函式。 | 函式出現問題。 | 14 | -------------------------------------------------------------------------------- /2-js-basics/3-making-decisions/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 연산자 2 | 3 | ## 설명 4 | 5 | 연산자를 연습해봅니다. 여러분이 구현해볼 만한 프로그램을 제안해 드립니다. 6 | 7 | 서로 다른 방식으로 등급을 매기는 두 개의 시스템과 그 시스템에 속한 학생들이 있습니다. 8 | 9 | ### 첫번째 등급 시스템 10 | 11 | 이 등급 시스템은 1-5점으로 등급을 나눕니다. 3점 이상이면 과정을 통과했다는 의미입니다. 12 | 13 | ### 두번째 등급 시스템 14 | 15 | 다른 등급 시스템은 `A, A-, B, B-, C, C-` 등급이 있습니다. `A`가 가장 높은 등급이고 `C`가 가장 낮은 등급입니다. 16 | 17 | ### 과제 18 | 19 | 학생들과 그들의 등급의 정보가 담긴 배열 `allStudents` 이 주어집니다. 과정을 통과한 학생들을 담은 새로운 배열 `studentsWhoPass`을 만들어 주시면 됩니다. 20 | 21 | > 팁, for-loop, if...else 그리고 비교 연산자를 사용해 보시기 바랍니다. 22 | 23 | ```javascript 24 | let allStudents = [ 25 | 'A', 26 | 'B-', 27 | 1, 28 | 4, 29 | 5, 30 | 2 31 | ] 32 | 33 | let studentsWhoPass = []; 34 | ``` 35 | 36 | ## 평가 기준 37 | 38 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 39 | --- | --- | --- | --- 40 | | 완전히 정답인 경우 | 부분적으로 정답인 경우 | 버그가 있는 경우 41 | -------------------------------------------------------------------------------- /2-js-basics/3-making-decisions/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 运算符 2 | 3 | ## 说明 4 | 5 | 玩转运算符。这里有一个你可以尝试去实现的程序的建议： 6 | 7 | 你有一群来自两种不同评分系统的学生。 8 | 9 | ### 第一种评分系统 10 | 11 | 一种评分系统的分数范围是 1-5，其中 3 及以上代表合格。 12 | 13 | ### 第二种评分系统 14 | 15 | 另一种评分系统有这些分数：`A, A-, B, B-, C, C-`，其中 `A` 是最好的分数，`C` 是最低的合格分数。 16 | 17 | ### 任务 18 | 19 | 有下方数组 `allStudents`，表示所有学生和它们的分数，构造一个包含所有合格的学生的新数组 `studentWhoPass`。 20 | 21 | > 提示：可利用 for 循环、if...else 语句和比较运算符 22 | 23 | ```javascript 24 | let allStudents = [ 25 | 'A', 26 | 'B-', 27 | 1, 28 | 4, 29 | 5, 30 | 2 31 | ] 32 | 33 | let studentsWhoPass = []; 34 | ``` 35 | 36 | ## 评价表 37 | 38 | | 指标 | 优秀 | 良好 | 尚可进步 | 39 | | --- | --- | --- | --- | 40 | | | 给出了完整解答 | 给出了部分解答 | 解答中存在 Bug | 41 | -------------------------------------------------------------------------------- /2-js-basics/3-making-decisions/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 運算子 2 | 3 | ## 簡介 4 | 5 | 把玩並熟悉運算子。以下是建議的練習程式模板： 6 | 7 | 你有兩套提供給同一組學生的成績系統。 8 | 9 | ### 第一套成績系統 10 | 11 | 定義分數為 1 到 5。當分數 3 以上時通過測驗。 12 | 13 | ### 第二套成績系統 14 | 15 | 定義分數為 `A, A-, B, B-, C, C-`， `A` 為最高分而 `C` 為最低分，皆為通過測驗。 16 | 17 | ### 課題 18 | 19 | 使用下列矩陣 `allStudents` 表示所有學生的成績，試著建立新的矩陣 `studentsWhoPass` 包含所有通過學生的編號。 20 | 21 | > 提示，使用 for-loop 迴圈、 if...else 條件式與比較運算子： 22 | 23 | ```javascript 24 | let allStudents = [ 25 | 'A', 26 | 'B-', 27 | 1, 28 | 4, 29 | 5, 30 | 2 31 | ] 32 | 33 | let studentsWhoPass = []; 34 | ``` 35 | 36 | ## 學習評量 37 | 38 | | 作業內容 | 優良 | 普通 | 待改進 | 39 | | -------- | ---------------------- | ------------------------ | ---------- | 40 | | | 提供完整的解答與解釋。 | 只提供部分的解答與解釋。 | 解答有誤。 | 41 | 42 | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/assignment.md: -------------------------------------------------------------------------------- 1 | # Loop an Array 2 | 3 | ## Instructions 4 | 5 | Create a program that lists every 3rd number between 1-20 and prints it to the console. 6 | 7 | > TIP: use a for-loop and modify the iteration-expression 8 | 9 | ## Rubric 10 | 11 | | Criteria | Exemplary | Adequate | Needs Improvement | 12 | | -------- | --------------------------------------- | ------------------------ | ------------------------------ | 13 | | | Program runs correctly and is commented | Program is not commented | Program is incomplete or buggy | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.de.md: -------------------------------------------------------------------------------- 1 | # Schleife ein Array 2 | 3 | ## Anleitung 4 | 5 | Erstellen Sie ein Programm, das jede dritte Zahl zwischen 1 und 20 auflistet und auf der Konsole druckt. 6 | 7 | > TIPP: Verwenden Sie eine for-Schleife und ändern Sie den Iterationsausdruck 8 | 9 | ## Rubrik 10 | 11 | | Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf | 12 | | -------- | --------------------------------------- | ------------------------ | ------------------------------ | 13 | | | Programm läuft korrekt und ist kommentiert | Programm ist nicht kommentiert | Programm ist unvollständig oder fehlerhaft 14 | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | # Hacer bucle en una matriz 2 | 3 | ## Instrucciones 4 | 5 | Cree un programa que enumere cada tercer número entre 1 y 20 e imprimalo en la consola. 6 | 7 | > SUGERENCIA: use un bucle for y modifique la expresión-iteración 8 | 9 | ## Rúbrica 10 | 11 | | Criterios | Ejemplar | Adecuado | Necesita mejorar | 12 | | -------- | --------------------------------------- | ------------------------ | ------------------------------ | 13 | | | El programa se ejecuta correctamente y está comentado | Programa no comentado | El programa está incompleto o con errores | 14 | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.fr.md: -------------------------------------------------------------------------------- 1 | # Boucler un tableau 2 | 3 | ## Instructions 4 | 5 | Créez un programme qui liste chaque 3ème nombre entre 1 et 20 et l'affiche sur la console. 6 | 7 | > CONSEIL : utilisez une boucle for et modifiez l'expression d'itération 8 | 9 | ## Rubrique 10 | 11 | | Critères | Exemplaire | Adéquat | Besoin d'amélioration | 12 | | -------- | ---------------------------------------- | ------------------------ | ------------------------------ | 13 | | | Le programme s'exécute correctement et est commenté | Le programme n'est pas commenté | Le programme est incomplet ou bogué | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.hi.md: -------------------------------------------------------------------------------- 1 | # लूप अर्रे 2 | 3 | ## अनुदेश 4 | 5 | एक प्रोग्राम बनाएं जो 1-20 के बीच हर तीसरे नंबर को सूचीबद्ध करता है और इसे कंसोल पर प्रिंट करता है. 6 | 7 | > सुझाब : फॉर-लूप का उपयोग करें और पुनरावृत्ति-अभिव्यक्ति को संशोधित करें 8 | 9 | ## शीर्ष 10 | 11 | | मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत | 12 | | ------ | ------------------------------------------------ | ------------------------- | ------------------------- | 13 | | | प्रोग्राम सही ढंग से चलता है और टिप्पणी की गई है | प्रोग्राम टिप्पणी नहीं है | प्रोग्राम अधूरा या बगी है | 14 | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.id.md: -------------------------------------------------------------------------------- 1 | # Loop sebuah Array 2 | 3 | ## Instruksi 4 | 5 | Buat program yang mencantumkan setiap nomor ke-3 antara 1-20 dan mencetaknya ke konsol. 6 | 7 | > TIPS: gunakan for-loop dan ubah ekspresi iterasi 8 | 9 | ## Rubric 10 | 11 | | Kriteria | Contoh | Memenuhi | Perlu Perbaikan | 12 | | -------- | ------------------------------------------------- | ----------------------------- | ------------------------------------- | 13 | | | Program berjalan dengan benar dan diberi komentar | Program tidak diberi komentar | Program tidak lengkap atau bermasalah | 14 | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Ciclo su un Array 2 | 3 | ## Istruzioni 4 | 5 | Creare un programma che elenchi ogni terzo numero tra 1-20 e lo stampi alla console. 6 | 7 | > SUGGERIMENTO: usare un ciclo for e modificare l'espressione di iterazione 8 | 9 | ## Rubrica 10 | 11 | | Criterio | Eccellente | Sufficiente | Necessita miglioramenti | 12 | | -------- | --------------------------------------- | ------------------------ | ------------------------------ | 13 | | | Il programma viene eseguito correttamente ed è commentato |Il programma non è commentato | Il programma è incompleto o presenta bug | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # 配列のループ 2 | 3 | ## 説明書 4 | 5 | 1～20の間の数字を3つおきに（3の倍数を）すべてリストアップしてコンソールに表示するプログラムを作成します。 6 | 7 | > TIP: for-loop を使用して、反復式を変更します。 8 | 9 | ## ルーブリック 10 | 11 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 12 | | -------- | --------------------------------------- | ------------------------ | ------------------------------ | 13 | | | プログラムが正常に動作し、コメントが表示される | プログラムはコメントをしていない | プログラムが不完全であるか、バグがある | 14 | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 배열 순회하기 2 | 3 | ## 설명 4 | 5 | 1-20 사이의 숫자 중 모든 세 번째 숫자를 나열해 콘솔에 출력하는 프로그램을 만들어봅니다. 6 | 7 | > 팁: for-loop 를 사용하고 순회 표현식을 수정해봅니다. 8 | 9 | ## 평가 기준 10 | 11 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 12 | --- | --- | --- | --- 13 | | | 프로그램이 올바르게 동작하며 설명하는 주석이 있는 경우 | 프로그램을 설명하는 주석이 없는 경우 | 프로그램이 불완전하거나 버그가 있는 경우 14 | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.ms.md: -------------------------------------------------------------------------------- 1 | # Loop an Array 2 | 3 | ## Arahan 4 | 5 | Buat program yang menyenaraikan setiap nombor ke-3 antara 1-20 dan mencetaknya ke konsol. 6 | 7 | > TIP: gunakan for-loop dan ubah ekspresi iterasi 8 | 9 | ## Rubrik 10 | 11 | | Kriteria | Contoh | Mencukupi | Usaha Lagi | 12 | | -------- | --------------------------------------- | ------------------------ | ------------------------------ | 13 | | | Program berjalan dengan betul dan dikomentari | Program tidak dikomentari | Program tidak lengkap atau kereta | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.nl.md: -------------------------------------------------------------------------------- 1 | # Loop een Array 2 | 3 | ## Instructies 4 | 5 | Maak een programma dat elk 3de nummer tussen 1 en 20 opsomt en het afdrukt naar de console. 6 | 7 | > TIP: gebruik een for-loop en pas de iteratie-uitdrukking aan 8 | 9 | ## Rubriek 10 | 11 | | Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd | 12 | | -------- | --------------------------------------- | ------------------------ | ------------------------------ | 13 | | | Programma loopt correct en wordt becommentarieerd | Programma wordt niet becommentarieerd | Programma is onvolledig of bevat fouten | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.pt.md: -------------------------------------------------------------------------------- 1 | # Laçar um Array 2 | 3 | ## Instruções 4 | 5 | Criar um programa que enumere cada 3º número entre 1-20 e imprime-o para a consola. 6 | 7 | > DICA: usar um for-loop e modificar a expressão de iteração 8 | 9 | ## Rubrica 10 | 11 | | Critérios | Exemplar | Adequado | Necessidades de Melhoria | 12 | | -------- | --------------------------------------- | ------------------------ | ------------------------------ | 13 | | | Programa funciona correctamente e é comentado | Programa não é comentado | Programa incompleto ou buggy 14 | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 循环和数组 2 | 3 | ## 说明 4 | 5 | 编写一段程序，列出 1-20 中所有 3 的倍数，将它们输出到控制台。 6 | 7 | > 提示，使用 for 循环，修改迭代表达式 8 | 9 | ## 评价表 10 | 11 | | 指标 | 优秀 | 良好 | 尚可进步 | 12 | | --- | --- | --- | --- | 13 | | | 程序运行正确，并且写了注释 | 没写注释 | 程序未完成或者有 BUG | 14 | -------------------------------------------------------------------------------- /2-js-basics/4-arrays-loops/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 給矩陣的迴圈 2 | 3 | ## 簡介 4 | 5 | 建立一個程式，列出數字每第三個從 1 到 20 的值(3,6,9......)，並輸出在 console 上。 6 | 7 | > 提示：使用 for-loop 迴圈並改寫它的迭代陳述式。 8 | 9 | ## 學習評量 10 | 11 | | 作業內容 | 優良 | 普通 | 待改進 | 12 | | -------- | -------------------------------------- | ---------------------- | -------------- | 13 | | | 程式完成簡介裡的課題並解釋程式碼意義。 | 程式完成簡介裡的課題。 | 程式出現問題。 | 14 | -------------------------------------------------------------------------------- /2-js-basics/README.md: -------------------------------------------------------------------------------- 1 | # Introduction to JavaScript 2 | 3 | JavaScript is the language of the web. In these four lessons, you'll learn its basics. 4 | 5 | ### Topics 6 | 7 | 1. [Variables and Data Types](1-data-types/README.md) 8 | 2. [Functions and Methods](2-functions-methods/README.md) 9 | 3. [Making Decisions with JavaScript](3-making-decisions/README.md) 10 | 4. [Arrays and Loops](4-arrays-loops/README.md) 11 | 12 | ### Credits 13 | 14 | These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring) -------------------------------------------------------------------------------- /2-js-basics/translations/README.de.md: -------------------------------------------------------------------------------- 1 | # Einführung in JavaScript 2 | 3 | JavaScript ist die Sprache des Webs. In diesen vier Lektionen lernen Sie die Grundlagen. 4 | 5 | ### Themen 6 | 7 | 1. [Variablen und Datentypen](../1-data-types/translations/README.de.md) 8 | 2. [Funktionen und Methoden](../2-functions-methods/translations/README.de.md) 9 | 3. [Entscheidungen mit JavaScript treffen](../3-making-decisions/translations/README.de.md) 10 | 4. [Arrays und Loops](../4-arrays-loops/translations/README.de.md) 11 | 12 | ### Credits 13 | 14 | Diese Lektionen wurden mit ♥ ️von [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) und [Chris Noring](https://twitter.com/chris_noring) erstellt. 15 | -------------------------------------------------------------------------------- /2-js-basics/translations/README.es.md: -------------------------------------------------------------------------------- 1 | # Introducción a JavaScript 2 | 3 | JavaScript es el lenguaje de la web. En estas cuatro lecciones, aprenderá sus conceptos básicos. 4 | 5 | ### Temas 6 | 7 | 1. [Variables y tipos de datos](../1-data-types/translations/README.es.md) 8 | 2. [Funciones y métodos](../2-functions-methods/translations/README.es.md) 9 | 3. [Toma de decisiones con JavaScript](../3-making-decisions/translations/README.es.md) 10 | 4. [Matrices y bucles](../4-arrays-loops/translations/README.es.md) 11 | 12 | ### Créditos 13 | 14 | Estas lecciones fueron escritas con ♥ ️ por [Jasmine Greenaway](https://twitter.com/paladique) y [Chris Noring](https://twitter.com/chris_noring) 15 | -------------------------------------------------------------------------------- /2-js-basics/translations/README.fr.md: -------------------------------------------------------------------------------- 1 | # Introduction à JavaScript 2 | 3 | JavaScript est le langage du Web. Dans ces quatre leçons, vous allez en apprendre les bases. 4 | 5 | ### Sujets 6 | 7 | 1. [Variables et Types de Données](1-data-types/transaltions/README.fr.md) 8 | 2. [Fonctions et Méthodes](2-functions-methods/translations/README.fr.md) 9 | 3. [Prise de Décision avec JavaScript](3-making-decisions/translations/README.fr.md) 10 | 4. [Tableaux et Boucles](4-arrays-loops/translations/README.fr.md) 11 | 12 | ### Crédits 13 | 14 | Ces leçons ont été écrites avec ♥️ par [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) et [Chris Noring](https://twitter.com/chris_noring) -------------------------------------------------------------------------------- /2-js-basics/translations/README.hi.md: -------------------------------------------------------------------------------- 1 | # जावास्क्रिप्ट का परिचय 2 | 3 | जावास्क्रिप्ट वेब की भाषा है। इन चार पाठों में, आप इसकी मूल बातें जानेंगे. 4 | 5 | ### विषय 6 | 7 | 1. [वेरिएबल्स और डेटा प्रकार](../1-data-types/translations/README.hi.md) 8 | 2. [फंक्शंस और मेथड्स](../2-functions-methods/translations/README.hi.md) 9 | 3. [जावास्क्रिप्ट के साथ निर्णय करना](../3-making-decisions/translations/README.hi.md) 10 | 4. [अर्रेंज और लूप्स ](../4-arrays-loops/translations/README.hi.md) 11 | 12 | ### आभार सूची 13 | 14 | ये पाठ ♥ से [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) और [Chris Noring](https://twitter.com/chris_noring) द्वारा लिखे गए है 15 | -------------------------------------------------------------------------------- /2-js-basics/translations/README.id.md: -------------------------------------------------------------------------------- 1 | # Pengantar JavaScript 2 | 3 | JavaScript adalah bahasa web. Dalam empat pelajaran ini, Anda akan mempelajari dasar-dasarnya. 4 | 5 | ### Topik 6 | 7 | 1. [Variabel dan Jenis Data](../1-data-types/translations/README.id.md) 8 | 2. [Fungsi dan Metode](../2-functions-methods/translations/README.id.md) 9 | 3. [Membuat Keputusan dengan JavaScript](../3-making-decisions/translations/README.id.md) 10 | 4. [Array dan Loop](../4-arrays-loops/translations/README.id.md) 11 | 12 | ### Kredit 13 | 14 | Pelajaran ini ditulis dengan ♥️ ️oleh [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) dan [Chris Noring](https://twitter.com/chris_noring) 15 | -------------------------------------------------------------------------------- /2-js-basics/translations/README.it.md: -------------------------------------------------------------------------------- 1 | # Introduzione a JavaScript 2 | 3 | JavaScript è il linguaggio del web. In queste quattro lezioni, si impareranno le sue basi. 4 | 5 | ### Argomenti 6 | 7 | 1. [Variabili e Tipi di Dato](../1-data-types/translations/README.it.md) 8 | 2. [Funzioni e Metodi](../2-functions-methods/translations/README.it.md) 9 | 3. [Prendere Decisioni con JavaScript](../3-making-decisions/translations/README.it.md) 10 | 4. [Array e Cicli](../4-arrays-loops/translations/README.it.md) 11 | 12 | ### Crediti 13 | 14 | Queste lezioni sono state scritte con il ♥️ da [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) e [Chris Noring](https://twitter.com/chris_noring) -------------------------------------------------------------------------------- /2-js-basics/translations/README.ja.md: -------------------------------------------------------------------------------- 1 | # JavaScript 入門 2 | 3 | JavaScript は Web の言語です。この4つのレッスンでは、その基本を学びます。 4 | 5 | ### トピック 6 | 7 | 1. [変数とデータ型](../1-data-types/translations/README.ja.md) 8 | 2. [関数とメソッド](../2-functions-methods/translations/README.ja.md) 9 | 3. [JavaScript での意思決定](../3-making-decisions/translations/README.ja.md) 10 | 4. [配列とループ](../4-arrays-loops/translations/README.ja.md) 11 | 12 | ### Credits 13 | 14 | These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring) -------------------------------------------------------------------------------- /2-js-basics/translations/README.ko.md: -------------------------------------------------------------------------------- 1 | # JavaScript 소개하기 2 | 3 | JavaScript는 웹의 언어입니다. 이 네 가지 강의에서 기초를 배우게됩니다. 4 | 5 | ### 주제 6 | 7 | 1. [변수와 데이터 타입](../1-data-types/translations/README.ko.md) 8 | 2. [함수와 메소드](../2-functions-methods/translations/README.ko.md) 9 | 3. [JavaScript로 결정하기](../3-making-decisions/translations/README.ko.md) 10 | 4. [배열과 반복](../4-arrays-loops/translations/README.ko.md) 11 | 12 | ### 크레딧 13 | 14 | These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring) -------------------------------------------------------------------------------- /2-js-basics/translations/README.ms.md: -------------------------------------------------------------------------------- 1 | # Pengenalan kepada JavaScript 2 | 3 | JavaScript adalah bahasa web. Dalam empat pelajaran ini, anda akan mengetahui asasnya. 4 | 5 | ### Topik 6 | 7 | 1. [Pemboleh ubah dan Jenis Data](../1-data-types/translations/README.ms.md) 8 | 2. [Fungsi dan Kaedah](../2-functions-methods/translations/README.ms.md) 9 | 3. [Membuat Keputusan dengan JavaScript](../3-making-decisions/translations/README.ms.md) 10 | 4. [Susunan dan Gelung](../4-arrays-loops/translations/README.ms.md) 11 | 12 | ### Kredit 13 | 14 | Pelajaran ini ditulis dengan ♥️ oleh [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) dan [Chris Noring](https://twitter.com/chris_noring) -------------------------------------------------------------------------------- /2-js-basics/translations/README.nl.md: -------------------------------------------------------------------------------- 1 | # Inleiding tot JavaScript 2 | 3 | JavaScript is de taal van het web. In deze vier lessen leert u de basisprincipes. 4 | 5 | ### Onderwerpen 6 | 7 | 1. [Variabelen en Gegevenstypen](../1-data-types/translations/README.nl.md) 8 | 2. [Functies en Methoden](../2-functions-methods/translations/README.nl.md) 9 | 3. [Beslissingen nemen met JavaScript](../3-making-decisions/translations/README.nl.md) 10 | 4. [Arrays en Lussen](../4-arrays-loops/translations/README.nl.md) 11 | 12 | ### Credits 13 | 14 | Deze lessen zijn geschreven met ♥ door [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) en [Chris Noring](https://twitter.com/chris_noring) -------------------------------------------------------------------------------- /2-js-basics/translations/README.ru.md: -------------------------------------------------------------------------------- 1 | # Введение в JavaScript 2 | 3 | JavaScript это язык веб-программирования. В этих четырёх уроках вы изучите его основы. 4 | 5 | ### Уроки 6 | 7 | 1. [Переменные и типы данных](../1-data-types/README.md) 8 | 2. [Функции и методы](../2-functions-methods/README.md) 9 | 3. [Принятие решений с помощью JavaScript](../3-making-decisions/README.md) 10 | 4. [Массивы и циклы](../4-arrays-loops/README.md) 11 | 12 | ### Благодарность 13 | 14 | Эти уроки были ♥️ созданы [Жасмин Гринуэй](https://twitter.com/paladique), [Кристофером Харрисоном](https://twitter.com/geektrainer) и [Крисом Норингом](https://twitter.com/chris_noring). 15 | -------------------------------------------------------------------------------- /2-js-basics/translations/README.ta.md: -------------------------------------------------------------------------------- 1 | # ஜாவாஸ்கிரிப்ட் அறிமுகம் 2 | 3 | ஜாவாஸ்கிரிப்ட் என்பது இணையத்தின் மொழி. இந்த நான்கு பாடங்களில், நீங்கள் அதன் அடிப்படைகளை கற்றுக்கொள்வீர்கள் 4 | 5 | ### தலைப்புகள் 6 | 7 | 1. [மாறிகள் மற்றும் தரவு வகைகள்](../1-data-types/README.md) 8 | 2. [செயல்பாடுகள் மற்றும் முறைகள்](../2-functions-methods/README.md) 9 | 3. [ஜாவாஸ்கிரிப்ட் மூலம் முடிவுகளை எடுக்க](../3-making-decisions/README.md) 10 | 4. [வரிசைகள் மற்றும் வளையங்கள்](../4-arrays-loops/README.md) 11 | 12 | ### கடன்கள் 13 | 14 | இந்த பாடங்களை [ஜாஸ்மின் கிரீனவே](https://twitter.com/paladique/), [கிறிஸ்டோபர் ஹாரிசன்](https://twitter.com/geektrainer/) மற்றும் [கிறிஸ் நோரிங்](https://twitter.com/chris_noring/) ஆகியோர் ♥️ எழுதப்பட்டன -------------------------------------------------------------------------------- /2-js-basics/translations/README.uk.md: -------------------------------------------------------------------------------- 1 | # Вступ до JavaScript 2 | 3 | JavaScript — це мова Інтернету. На цих чотирьох уроках ви дізнаєтеся його основи. 4 | 5 | ### Теми 6 | 7 | 1. [Змінні та типи данних](../1-data-types/README.md) 8 | 2. [Функції та Методи](../2-functions-methods/README.md) 9 | 3. [Прийняття рішень в JavaScript](../3-making-decisions/README.md) 10 | 4. [Масиви та Цикли](../4-arrays-loops/README.md) 11 | 12 | ### Титри 13 | 14 | Ці уроки були написані з ♥️ від [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) та [Chris Noring](https://twitter.com/chris_noring) -------------------------------------------------------------------------------- /2-js-basics/translations/README.zh-cn.md: -------------------------------------------------------------------------------- 1 | # JavaScript 入门 2 | 3 | JavaScript 是 Web 开发的语言。在这四节课中，你将学习它的基础知识。 4 | 5 | ### 主题 6 | 7 | 1. [变量和数据类型](../1-data-types/translations/README.zh-cn.md) 8 | 2. [函数和方法](../2-functions-methods/translations/README.zh-cn.md) 9 | 3. [在 JavaScript 中做出决定](../3-making-decisions/translations/README.zh-cn.md) 10 | 4. [数组和循环](../4-arrays-loops/translations/README.zh-cn.md) 11 | 12 | ### 鸣谢 13 | 14 | 这些课程由 [Jasmine Greenaway](https://twitter.com/paladique)、[Christopher Harrison](https://twitter.com/geektrainer) 与 [Chris Noring](https://twitter.com/chris_noring) 用 ♥️ 编写 15 | -------------------------------------------------------------------------------- /2-js-basics/translations/README.zh-tw.md: -------------------------------------------------------------------------------- 1 | # JavaScript 入門 2 | 3 | JavaScript 編輯網頁的一種程式語言。在這四堂課中，你會學到它最基本的知識。 4 | 5 | ### 主題 6 | 7 | 1. [變數與資料型態](../1-data-types/translations/README.zh-tw.md) 8 | 2. [函式與方法](../2-functions-methods/translations/README.zh-tw.md) 9 | 3. [在 JavaScript 做出決定](../3-making-decisions/translations/README.zh-tw.md) 10 | 4. [矩陣與迴圈](../4-arrays-loops/translations/README.zh-tw.md) 11 | 12 | ### 參與人員 13 | 14 | 這些文章是由 [Jasmine Greenaway](https://twitter.com/paladique)、[Christopher Harrison](https://twitter.com/geektrainer)和[Chris Noring](https://twitter.com/chris_noring) 用滿滿的 ♥️ 來編寫。 -------------------------------------------------------------------------------- /3-terrarium/1-intro-to-html/images/vs-code-index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/1-intro-to-html/images/vs-code-index.png -------------------------------------------------------------------------------- /3-terrarium/1-intro-to-html/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # HTML 연습하기 : 블로그 모형 만들기 2 | 3 | ## 설명 4 | 5 | 여러분이 여러분의 개인 웹사이트를 디자인하거나 새로 디자인한다고 상상해봅시다. 여러분의 사이트의 그래픽 마크업을 만들어 봅시다. 그리고 사이트의 여러 요소들을 만드는 데 사용할 HTML 마크업을 작성해 봅시다. 종이에 해서 스캔해도 좋으며, 소프트웨어를 사용해도 좋습니다. HTML 마크업을 손으로 작성해보기만 하면 됩니다. 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 블로그 레이아웃이 10개 이상의 마크업 요소가 표시된 요소들로 표현되는 경우 | 블로그 레이아웃이 5개 정도의 마크업 요소가 표시된 요소들로 표현되는 경우 | 블로그 레이아웃이 최대 3개의 마크업 요소가 표시된 요소들로 표현되는 경우 12 | -------------------------------------------------------------------------------- /3-terrarium/1-intro-to-html/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 练习 HTML：建立博客雏形 2 | 3 | ## 简介 4 | 5 | 想象你正在设计，或重新设计你的个人网站。建立网页的图形设计雏形，然后写下用于构建网站的各种 HTML 标记。你可以写纸上再扫描，或者用软件，只要确保是手写的。 6 | 7 | ## 评价表 8 | 9 | | 指标 | 优秀 | 良好 | 尚可进步 | 10 | | ----- | --------------------------------- | ---------------------------- | ----------------------------- | 11 | | | 可以见到至少 10 种用于博客布局的元素 | 见到大约 5 种用于博客布局的元素 | 见到最多 3 种用于博客布局的元素 | -------------------------------------------------------------------------------- /3-terrarium/1-intro-to-html/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 練習 HTML：建立部落格雛形 2 | 3 | ## 簡介 4 | 5 | 想像你正在設計，或重新設計你自己的專屬網頁。建立網頁的圖像設計雛形，並用 HTML 語法建立這些網頁元素。你可以建在紙上並掃描它，或者是建在軟體中，只要確保有 HTML 語法在裡面。 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | ------------------------------------ | ------------------------------- | --------------------------------- | 11 | | | 可以見到部落格編排包含10種以上的元素 | 見到部落格編排大約有 5 種的元素 | 見到部落格編排最多只有 3 種的元素 | -------------------------------------------------------------------------------- /3-terrarium/2-intro-to-css/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/2-intro-to-css/images/1.png -------------------------------------------------------------------------------- /3-terrarium/2-intro-to-css/images/terrarium-final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/2-intro-to-css/images/terrarium-final.png -------------------------------------------------------------------------------- /3-terrarium/2-intro-to-css/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Rifattorizzare CSS 2 | 3 | ## Istruzioni 4 | 5 | Restyling del terrario utilizzando Flexbox o CSS Grid, acquisire schermate per mostrare che lo si è testato su diversi browser. Potrebbe essere necessario modificare il markup, quindi creare una nuova versione dell'app con la grafica disposta per il refactoring. Non ci si preoccupi di rendere gli elementi trascinabili; per ora rifattorizzare solo HTML e CSS. 6 | 7 | ## Rubrica 8 | 9 | | Criteri | Ottimo | Adeguato | Necessita miglioramento | 10 | | -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ | 11 | | | Presenta un terrario completamente rinnovato utilizzando Flexbox o CSS Grid | Restyling di alcuni elementi | Il restyling del terrario è completamente fallito | 12 | -------------------------------------------------------------------------------- /3-terrarium/2-intro-to-css/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # CSS リファクタリング 2 | 3 | ## 説明 4 | 5 | Flexbox または CSS グリッドを使ってテラリウムのスタイルを変更し、いくつかのブラウザでテストしたことを示すためにスクリーンショットを撮影してください。マークアップを変更する必要があるかもしれないので、リファクタリングのためにアートを配置した新しいバージョンのアプリを作成してください。要素をドラッグ可能にすることは気にしないで、今のところは HTML と CSS をリファクタリングするだけです。 6 | 7 | ## ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 10 | | -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ | 11 | | | Flexbox や CSS グリッドを使ってテラリウムのスタイルを完全に変更したものを紹介します。 | いくつかの要素のスタイルを変更します。 | テラリウムのリスタイルに失敗します。 | 12 | -------------------------------------------------------------------------------- /3-terrarium/2-intro-to-css/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # CSS 리팩터링 2 | 3 | ## 설명 4 | 5 | Flexbox 또는 CSS Grid를 사용하여 테라리움을 다시 만들고 스크린샷을 찍어 여러 브라우저에서 테스트했음을 보여주시면 좋습니다. 마크업을 변경해야 할 수 있으므로 리팩터링 기술이 적용된 새로운 버전의 앱을 만들어 봅시다. 요소를 드래그할 수 있게 만드는 것은 생각하지 않아도 됩니다. 지금은 HTML과 CSS만 리팩터링 해봅시다. 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 테라리움을 Flexbox 또는 CSS Grid를 사용하여 완전히 다시 만든 경우 | 몇개의 요소만 다시 만든 경우 | 테라리움을 전혀 새로 만들지 못한 경우 12 | -------------------------------------------------------------------------------- /3-terrarium/2-intro-to-css/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 重構 CSS 2 | 3 | ## 簡介 4 | 5 | 使用 Flexbox 或 CSS Grid 重新規劃盆栽盒，拍幾張在不同瀏覽器上運作的畫面。重新規劃時，你可能需要改變程式碼中版本的標記。不需要去考慮植物拖曳的問題，我們只重構 HTML 與 CSS 的部分。 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | --------------------------------------- | ---------------- | -------------------- | 11 | | | 使用 Flexbox 或 CSS Grid 呈現新的盆栽盒 | 重新取代部分元素 | 無法更新原有的盆栽盒 | 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/assignment.md: -------------------------------------------------------------------------------- 1 | # Work a bit more with the DOM 2 | 3 | ## Instructions 4 | 5 | Research the DOM a little more by 'adopting' a DOM element. Visit the MDN's [list of DOM interfaces](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) and pick one. Find it being used on a web site in the web, and write an explanation of how it is used. 6 | 7 | ## Rubric 8 | 9 | | Criteria | Exemplary | Adequate | Needs Improvement | 10 | | -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- | 11 | | | Paragraph write-up is presented, with example | Paragraph write-up is presented, without example | No writeup is presented | 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/images/dom-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/3-intro-to-DOM-and-closures/images/dom-tree.png -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/images/terrarium-final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/3-intro-to-DOM-and-closures/images/terrarium-final.png -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | # Trabaja un poco más con DOM 2 | 3 | ## Instrucciones 4 | 5 | Investigue el DOM un poco más 'adoptando' un elemento DOM. Visite la [lista de interfaces DOM de MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) y elija una. Encuéntrelo en un sitio web en la web y escriba una explicación de cómo se usa. 6 | 7 | ## Rúbrica 8 | 9 | | Criterios | Ejemplar | Adecuado | Necesita mejorar | 10 | | -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- | 11 | | | Se presenta la redacción del párrafo, con ejemplo | Se presenta la redacción del párrafo, sin ejemplo | No se presenta ninguna reseña | 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.hi.md: -------------------------------------------------------------------------------- 1 | # DOM के साथ थोड़ा और काम करें 2 | 3 | ## अनुदेश 4 | 5 | DOM तत्व को 'अपनाकर' DOM को थोड़ा और रिसर्च करें. MDN की [डॉम इंटरफेसेस सुचि](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) पे जाये और एक चयन करे . इसे वेब में एक वेब साइट पर उपयोग किया जा रहा है, और यह कैसे उपयोग किया जाता है एक व्याख्या लिखें। 6 | 7 | ## शीर्ष 8 | 9 | | मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत | 10 | | ------ | ------------------------------------------------ | ----------------------------------------------------- | ------------------------------------ | 11 | | | उदाहरण के साथ अनुच्छेद लेखन प्रस्तुत किया गया है | बिना उदाहरण के साथ अनुच्छेद लेखन प्रस्तुत किया गया है | कोई राइटअप प्रस्तुत नहीं किया गया है | 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Lavorare un po' di più con il DOM 2 | 3 | ## Istruzioni 4 | 5 | Fare ulteriore ricerca sul DOM "adottando" un elemento DOM. Visitare l' [elenco delle interfacce DOM di](https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model) MDN e sceglierne una. Trovarla in uso su un sito web, e scrivere una spiegazione di come viene utilizzata. 6 | 7 | ## Rubrica 8 | 9 | | Criteri | Ottimo | Adeguato | Necessita miglioramento | 10 | | -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- | 11 | | | Viene presentata la redazione del paragrafo, con un esempio | Viene presentata la redazione del paragrafo, senza esempio | Non viene presentato alcun resoconto | 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # DOM をもう少し使いこなす 2 | 3 | ## 説明書 4 | 5 | DOM 要素を「採用」することで、もう少し DOM を研究してみましょう。MDN の [DOM インターフェイス一覧](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)にアクセスして、一つ選びます。それが Web 上の Web サイトで使われているのを Web 上で見つけて、それがどのように使われているかの説明を書きます。 6 | 7 | ## ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 10 | | -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- | 11 | | | 段落書きを例に挙げて紹介します。 | 例示せずに、段落書きを提示 | 書き込みはありません。 | 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # DOM으로 좀 더 작업하기 2 | 3 | ## 설명 4 | 5 | DOM 요소를 '채택'하여 DOM 을 조금 더 조사합니다. MDN 의 [DOM 인터페이스 목록](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)을 방문하여 하나를 선택합니다. 웹의 웹 사이트에서 사용중인 것을 찾아 사용 방법에 대한 설명을 작성해봅니다. 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 예시와 함께 단락으로 작성한 경우 | 단락으로 작성했지만 예시가 없는 경우 | 기록이 없는 경우 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.ms.md: -------------------------------------------------------------------------------- 1 | # Bekerja sedikit dengan DOM 2 | 3 | ## Arahan 4 | 5 | Mengkaji DOM sedikit dengan 'menerapkan' elemen DOM. Lawati laman MDN [senarai antara muka DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) dan pilih satu. Cari ia digunakan di laman web di web, dan tulis penjelasan bagaimana ia digunakan. 6 | 7 | ## Rubrik 8 | 9 | | Kriteria | Contoh | Mencukupi | Usaha Lagi | 10 | | -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- | 11 | | | Penulisan perenggan dibentangkan, dengan contoh | Penulisan perenggan dibentangkan, tanpa contoh | Tiada penulisan perenggan dibentangkan | 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.pt.md: -------------------------------------------------------------------------------- 1 | # Trabalhe um pouco mais com a DOM 2 | 3 | ## Instruções 4 | 5 | Pesquise a DOM um pouco mais 'adotando' um elemento DOM. Visite a [lista de interfaces DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) do MDN e escolha uma. Encontre-o em um web site e escreva uma explicação de como ele é usado. 6 | 7 | ## Rubrica 8 | 9 | | Criterio | Exemplar | Adequado | Precisa de melhoria | 10 | | -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- | 11 | | | A redação do parágrafo é apresentada com exemplo | redação do parágrafo é apresentada sem exemplo | Nenhum texto é apresentado | 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 用 DOM 干更多事 2 | 3 | ## 说明 4 | 5 | 选取一个 DOM 元素，并通过它对 DOM 进行更深入的研究。访问 MDN 的 [DOM 接口的清单](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) 并挑选一个。在网络上寻找一个使用了这个元素的网页，并解释如何使用它。 6 | 7 | ## 评价表 8 | 9 | | 指标 | 优秀 | 良好 | 尚可进步 | 10 | | --- | ---- | ---- | ------- | 11 | | | 写了一段话，并且附带例子 | 写了一段话，没有附带例子 | 没有记录 | 12 | -------------------------------------------------------------------------------- /3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 用 DOM 做更多事 2 | 3 | ## 簡介 4 | 5 | 調查其中一項 DOM 的元素。造訪 MDN 關於 [DOM 介面的清單](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)挑選其中一項。在網路上找尋一個使用這項元素的網頁，並解釋如何使用它。 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | ---------------------- | ---------------- | ---------------- | 11 | | | 完整的評論文章附帶例子 | 評論文章不帶例子 | 評論文章並不完整 | 12 | -------------------------------------------------------------------------------- /3-terrarium/images/screenshot_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/images/screenshot_gray.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant1.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant10.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant11.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant12.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant13.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant14.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant2.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant3.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant4.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant5.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant6.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant7.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant8.png -------------------------------------------------------------------------------- /3-terrarium/solution/images/plant9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/3-terrarium/solution/images/plant9.png -------------------------------------------------------------------------------- /4-typing-game/images/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/4-typing-game/images/demo.gif -------------------------------------------------------------------------------- /4-typing-game/solution/README.md: -------------------------------------------------------------------------------- 1 | This is a placeholder, left blank purposefully -------------------------------------------------------------------------------- /4-typing-game/solution/index.css: -------------------------------------------------------------------------------- 1 | .highlight { 2 | background-color: yellow; 3 | } 4 | 5 | .error { 6 | background-color: lightcoral; 7 | border-color: red; 8 | } 9 | -------------------------------------------------------------------------------- /4-typing-game/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Typing 6 | 7 | 8 | 9 | 10 |

Practice your typing

11 |
Click start to have a quote displayed. Type the quote as fast as you can!
12 | 13 |

14 |

15 |
16 | 17 |
18 |
19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /4-typing-game/translations/README.ko.md: -------------------------------------------------------------------------------- 1 | # 이벤트-주도 프로그래밍 - 타이핑 게임 빌드하기 2 | 3 | ## 소개 4 | 5 | 타이핑은 개발자에게 가장 과소평가된 스킬 중 하나입니다. 생각을 머리에서 에디터에 빠르게 전달할 수 있는 능력은 창의력이 자유롭게 흐릅니다. 배울 때 가장 좋은 방법 중 하나는 게임을 직접 해보는 것입니다! 6 | 7 | > 이제 타이핑 게임을 빌드하러 갑시다! 8 | 9 | 타이핑 게임을 만들기 위해 지금까지 배운 JavaScript, HTML 및 CSS 스킬을 사용합니다. 게임은 플레이어에게 무작위 인용문([Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) 인용문 사용)과 플레이어가 정확하게 입력하는 데 걸리는 시간을 제시합니다. 10 | 11 | ![demo](../images/demo.gif) 12 | 13 | ## 사전 조건 14 | 15 | 이 레슨에서는 다음 개념에 익숙하다고 가정합니다: 16 | 17 | - 텍스트 입력 및 버튼 컨트롤 생성하기 18 | - 클래스를 사용한 CSS 및 설정 스타일하기 19 | - JavaScript 기초 20 | - 배열 생성하기 21 | - 난수 생성하기 22 | - 현재 시간 얻기 23 | 24 | ## 레슨 25 | 26 | [이벤트 기반 프로그래밍을 사용하여 타이핑 게임 만들기](../typing-game/translations/README.ko.md) 27 | 28 | ## 크레딧 29 | 30 | Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer) 31 | -------------------------------------------------------------------------------- /4-typing-game/translations/README.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 事件驱动式编程 ── 建立一款打字游戏 2 | 3 | ## 介绍 4 | 5 | 打字是开发者最被低估的技能之一。将思想从你的头脑中迅速转移到你的编辑器中的能力使创造力得以自由流动。学习的最好方法之一是玩游戏！ 6 | 7 | > 因此，让我们来开发一款打字游戏吧！ 8 | 9 | 你将会用到 JavaScript、HTML 和 CSS 来构建打字游戏。游戏将向玩家展示一个随机的引言 (我们用[夏洛克 · 福尔摩斯](https://zh.wikipedia.org/wiki/%E6%AD%87%E6%B4%9B%E5%85%8B%C2%B7%E7%A6%8F%E5%B0%94%E6%91%A9%E6%96%AF)的引言)，并计时玩家需要多长时间才能准确地打出它。 10 | ![demo](../images/demo.gif) 11 | 12 | ## 前提条件 13 | 14 | 请确保你已经熟悉以下概念： 15 | 16 | - 创建文本输入和按钮控件 17 | - CSS 和使用类设置样式 18 | - JavaScript 基础知识 19 | - 创建一个数组 20 | - 创建一个随机数 21 | - 获取当前时间 22 | 23 | ## 课程 24 | 25 | [通过使用事件驱动编程创建一个打字游戏](../typing-game/translations/README.zh-tw.md) 26 | 27 | ## 贡献者 28 | 29 | 由 [Christopher Harrison](http://www.twitter.com/geektrainer) 用满满 ♥️ 来编写。 30 | -------------------------------------------------------------------------------- /4-typing-game/translations/README.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 事件驅動程式設計 ── 建立一款打字遊戲 2 | 3 | ## 大綱 4 | 5 | 打字可說是開發者被嚴重低估的技能之一，將腦中的想法快速地轉換到編輯器中，讓你流暢地發揮你的想像力。其中一個訓練方法就是遊玩遊戲！ 6 | 7 | > 因此，讓我們來開發一款打字遊戲吧！ 8 | 9 | 你會使用到你學到的 JavaScript、HTML 與 CSS 技法來建立打字遊戲。這款遊戲提供隨機的引文作為玩家的目標(使用[夏洛克·福爾摩斯](https://zh.wikipedia.org/wiki/%E6%AD%87%E6%B4%9B%E5%85%8B%C2%B7%E7%A6%8F%E5%B0%94%E6%91%A9%E6%96%AF)的引文)，計算玩家準確輸入所需要花費的時間。 10 | 11 | ![demo](../images/demo.gif) 12 | 13 | ## 開始之前 14 | 15 | 這堂課會假設你已經熟悉下列的概念： 16 | 17 | - 建立文字輸入及按鈕控制 18 | - CSS 與 class 的造型設定 19 | - JavaScript 基礎觀念 20 | - 建立矩陣 21 | - 建立隨機數 22 | - 取得目前時間 23 | 24 | ## 課程 25 | 26 | [使用事件驅動程式設計，建立一款打字遊戲](../typing-game/translations/README.zh-tw.md) 27 | 28 | ## 參與人員 29 | 30 | 由 [Christopher Harrison](http://www.twitter.com/geektrainer) 用滿滿的 ♥️ 來編寫。 31 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/assignment.md: -------------------------------------------------------------------------------- 1 | # Create a new keyboard game 2 | 3 | ## Instructions 4 | 5 | Create a small game that uses keyboard events to do tasks. It may be a different kind of typing game, or an art type game that paints pixels to the screen on keystrokes. Get creative! 6 | 7 | ## Rubric 8 | 9 | | Criteria | Exemplary | Adequate | Needs Improvement | 10 | | -------- | ------------------------ | ------------------------ | ----------------- | 11 | | | A full game is presented | The game is very minimal | The game has bugs | 12 | | | | | | 13 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/translations/assignment.fr.md: -------------------------------------------------------------------------------- 1 | # Créer un nouveau jeu de clavier 2 | 3 | ## Instructions 4 | 5 | Créez un petit jeu qui utilise des événements de clavier pour effectuer des tâches. Il peut s'agir d'un autre type de jeu de dactylographie ou d'un jeu de type artistique qui peint des pixels à l'écran lors de frappes au clavier. Faites preuve de créativité! 6 | 7 | ## Rubrique 8 | 9 | | Critères | Exemplaire | Adéquat | Besoin d'amélioration | 10 | | -------- | ------------------------ | ------------------------ | ----------------- | 11 | | | Un jeu complet est présenté | Le jeu est très minime | Le jeu a des bugs | 12 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/translations/assignment.hi.md: -------------------------------------------------------------------------------- 1 | # एक नया कीबोर्ड गेम बनाएं 2 | 3 | ## अनुदेश 4 | 5 | एक छोटा गेम बनाएं जो कार्यों को करने के लिए कीबोर्ड इवेंट का उपयोग करता है। यह एक अलग तरह का टाइपिंग गेम या एक आर्ट टाइप गेम हो सकता है जो कि कीस्ट्रोक पर स्क्रीन के लिए पिक्सल को पेंट करता है। रचनात्मक हो! 6 | 7 | ## शीर्ष 8 | 9 | | मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत | 10 | | -------- | ------------------------ | ------------------------ | ----------------- | 11 | | | एक पूर्ण खेल प्रस्तुत किया गया है | खेल बहुत कम है | खेल में बगस हैं | 12 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Crearere un nuovo gioco con la tastiera 2 | 3 | ## Istruzioni 4 | 5 | Creare un piccolo gioco che utilizzi gli eventi della tastiera per svolgere le attività. Può essere un tipo diverso di gioco di digitazione o un gioco di tipo artistico che disegna i pixel sullo schermo premendo i tasti. Si dia sfogo alla propria creatività! 6 | 7 | ## Rubrica 8 | 9 | | Criteri | Ottimo | Adeguato | Necessita miglioramento | 10 | | -------- | ------------------------ | ------------------------ | ----------------- | 11 | | | Viene presentato un gioco completo | Il gioco è molto minimale | Il gioco ha dei bug | 12 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # 新しいキーボードゲームを作成する 2 | 3 | ## 説明書 4 | 5 | キーボードのイベントを使ってタスクを行う小さなゲームを作りましょう。異なる種類のタイピングゲームや、キー入力で画面にピクセルをペイントするアートタイプのゲームにすることもできます。創造力を発揮してください。 6 | 7 | ## ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 10 | | -------- | ------------------------ | ------------------------ | ----------------- | 11 | | | フルゲームが発表される。 | ゲームは非常にミニマム。 | ゲームにはバグがある。 | 12 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 새로운 키보드 게임 만들기 2 | 3 | ## 설명 4 | 5 | 키보드 이벤트를 사용하여 작업을 수행하는 작은 게임을 만듭니다. 다른 종류의 타이핑 게임이거나 키 입력으로 화면에 픽셀을 그리는 예술 유형 게임이 될 수도 있습니다. 창의력을 발휘해보세요! 6 | 7 | ## 평가 기준 8 | 9 | | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 | 10 | |--- | --- | --- | --- | 11 | | | 완전한 게임을 구현한 경우 | 최소한의 기능을 가진 게임을 구현한 경우 | 게임에 버그가 있는 경우 | 12 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/translations/assignment.ms.md: -------------------------------------------------------------------------------- 1 | # Buat permainan papan kekunci baharu 2 | 3 | ## Arahan 4 | 5 | Buat permainan kecil yang menggunakan acara papan kekunci untuk melakukan tugas. Ini boleh menjadi jenis permainan menaip yang berbeza, atau permainan jenis seni yang melukis piksel ke layar pada penekanan tombol. Dapatkan kreatif! 6 | 7 | ## Rubrik 8 | 9 | | Kriteria | Contoh | Mencukupi | Usaha Lagi | 10 | | -------- | ------------------------ | ------------------------ | ----------------- | 11 | | | Permainan penuh dipersembahkan | Permainan ini sangat minimum | Permainan ini mempunyai pepijat | 12 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/translations/assignment.nl.md: -------------------------------------------------------------------------------- 1 | # Maak een nieuw toetsenbordspel 2 | 3 | ## Instructies 4 | 5 | Maak een klein spel dat toetsenbordgebeurtenissen gebruikt om taken uit te voeren. Het kan een ander soort typespel zijn, of een kunstspel dat bij toetsaanslagen pixels op het scherm schildert. Wees creatief! 6 | 7 | ## Rubriek 8 | 9 | | Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd | 10 | | -------- | ------------------------ | ------------------------ | ----------------- | 11 | | | Er wordt een volledig spel gepresenteerd | De game is erg minimaal | De game bevat bugs | 12 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 制作一款新的键盘游戏 2 | 3 | ## 说明 4 | 5 | 制作一款使用键盘事件的小游戏。它可以是一种不同类型的打字游戏，也可以是一种艺术类的游戏，通过击键在屏幕上画像素点。打开脑洞！ 6 | 7 | ## 评价表 8 | 9 | | 指标 | 优秀 | 良好 | 尚可进步 | 10 | | ---- | --- | ---- | ----------------- | 11 | | | 呈现了完整的游戏内容 | 游戏太小 | 游戏有 bug | 12 | -------------------------------------------------------------------------------- /4-typing-game/typing-game/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 建立一款新的鍵盤遊戲 2 | 3 | ## 簡介 4 | 5 | 建立一款使用鍵盤事件的小遊戲。它可以是不同的鍵盤輸入遊戲：使用鍵盤在視窗上繪製像素點的繪圖遊戲。激發你的創意吧！ 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | ------------------ | ------------ | ------------ | 11 | | | 呈現完整的遊戲內容 | 遊戲內容單調 | 遊戲出現問題 | 12 | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/assignment.md: -------------------------------------------------------------------------------- 1 | # Restyle your Extension 2 | 3 | ## Instructions 4 | 5 | The codebase for this extension comes complete with styles, but you don't have to use them; make your extension your own by restyling it by editing its css file. 6 | 7 | ## Rubric 8 | 9 | | Criteria | Exemplary | Adequate | Needs Improvement | 10 | | -------- | -------------------------------------------- | --------------------- | ----------------- | 11 | | | Code is submitted with functional new styles | Styling is incomplete | Styles are buggy | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/1-about-browsers/images/1.png -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/1-about-browsers/images/2.png -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/images/earlybrowsers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/1-about-browsers/images/earlybrowsers.jpg -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/images/install-on-edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/1-about-browsers/images/install-on-edge.png -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | # Cambia el estilo de tu extensión 2 | 3 | ## Instrucciones 4 | 5 | El código base para esta extensión viene completo con estilos, pero no es necesario que los uses; haga suya su extensión al cambiarle el estilo editando su archivo css. 6 | 7 | ## Rúbrica 8 | 9 | | Criterios | Ejemplar | Adecuado | Necesita mejorar | 10 | | -------- | -------------------------------------------- | --------------------- | ----------------- | 11 | | | El código se envía con nuevos estilos funcionales | El estilo está incompleto | Los estilos tienen errores | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.fr.md: -------------------------------------------------------------------------------- 1 | # Restylez votre extension 2 | 3 | ## Instructions 4 | 5 | La base de code de cette extension est fournie avec des styles, mais vous n'êtes pas obligé de les utiliser ; personnalisez votre extension en la restylant en éditant son fichier css. 6 | 7 | ## Rubrique 8 | 9 | | Critères | Exemplaire | Adéquat | Besoin d'amélioration | 10 | | -------- | -------------------------------------------- | --------------------- | ----------------- | 11 | | | Le code est soumis avec de nouveaux styles fonctionnels | Le style est incomplet | Les styles sont bogués | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.hi.md: -------------------------------------------------------------------------------- 1 | # अपने एक्सटेंशन को पुनर्स्थापित करें 2 | 3 | ## अनुदेश 4 | 5 | इस एक्सटेंशन का कोडबेस शैलियों के साथ आता है, लेकिन आपको उनका उपयोग नहीं करना है; इसकी css फाइल को एडिट करके इसे अपने एक्सटेंशन को अपना बना लें। 6 | 7 | ## सरनामा 8 | 9 | | मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत | 10 | | ------ | ----------------------------------------------------- | --------------- | -------------------- | 11 | | | कोड नई कार्यात्मक शैलियों के साथ प्रस्तुत किया गया है | स्टाइल अधूरा है | स्टाइल्स में गलती है | 12 | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Restyling dell'estensione 2 | 3 | ## Istruzioni 4 | 5 | Il base di odice per questa estensione è completa di stili, ma non è necessario utilizzarli; personalizzare la propria estensione modificandone il file css. 6 | 7 | ## Rubrica 8 | 9 | | Criteri | Ottimo | Adeguato | Necessita miglioramento | 10 | | -------- | -------------------------------------------- | --------------------- | ----------------- | 11 | | | Il codice viene presentato con nuovi stili funzionali | Lo stile è incompleto | Gli stili sono difettosi | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # 拡張機能のスタイル変更 2 | 3 | ## 説明書 4 | 5 | この拡張機能のコードベースにはスタイルが完全に含まれていますが、それらを使用する必要はありません。css ファイルを編集してスタイルを変更することで拡張機能を自分のものにしてください。 6 | 7 | ## ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切 | 改善が必要 | 10 | | -------- | -------------------------------------------- | --------------------- | ----------------- | 11 | | | コードは機能的な新しいスタイルで提出されます | スタイリングが不完全 | スタイルがバグっている | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 나만의 확장 프로그램 만들기 2 | 3 | ## 설명 4 | 5 | 확장 프로그램의 예시 코드에는 스타일이 적용되어 있으나, 그대로 사용하지 않아도 됩니다. css 파일을 수정해서 나만의 멋진 확장 프로그램을 만들어봅시다. 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 새로운 스타일을 적용한 경우 | 스타일이 미완성된 경우 | 스타일에 오류가 있는 경우 12 | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.ms.md: -------------------------------------------------------------------------------- 1 | # Mengayakan semula penlanjut penyemak imbas 2 | 3 | ## Arahan 4 | 5 | Pangkalan kode untuk peluasan ini dilengkapi dengan gaya, tetapi anda tidak perlu menggunakannya; jadikan peluasan anda sendiri dengan menyusun semula dengan mengedit fail cssnya. 6 | 7 | ## Rubrik 8 | 9 | | Kriteria | Contoh | Mencukupi | Usaha Lagi | 10 | | -------- | -------------------------------------------- | --------------------- | ----------------- | 11 | | | Kod dihantar dengan gaya baharu yang berfungsi | Gaya tidak lengkap | Gaya mempunyai pepijat | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.nl.md: -------------------------------------------------------------------------------- 1 | # Restyle uw extensie 2 | 3 | ## Instructies 4 | 5 | De codebase voor deze extensie wordt compleet geleverd met stijlen, maar u hoeft ze niet te gebruiken; maak uw extensie uw eigen door deze te restylen door het css-bestand te bewerken. 6 | 7 | ## Rubriek 8 | 9 | | Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd | 10 | | -------- | -------------------------------------------- | --------------------- | ----------------- | 11 | | | Code wordt ingediend met functionele nieuwe stijlen | Styling is niet compleet | Stijlen zijn buggy | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.pt.md: -------------------------------------------------------------------------------- 1 | # Refatore o estilo de sua extensão 2 | 3 | ## Instruções 4 | 5 | O código base para esta extensão vem completo com estilos, mas você não precisa usá-los; faça sua própria estilização editando seu arquivo css. 6 | 7 | ## Rubrica 8 | 9 | | Critérios | Exemplar | Adequado | Necessita de melhoria | 10 | | -------- | -------------------------------------------- | --------------------- | ----------------- | 11 | | | O código é enviado com novos estilos funcionais | O estilo está incompleto | Os estilos contém erros | -------------------------------------------------------------------------------- /5-browser-extension/1-about-browsers/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 重新造型你的套件 2 | 3 | ## 簡介 4 | 5 | 本課程的擴充套件已經包含了造型設定，但你不需要非得使用它們。改寫它的 CSS 檔來重新構築擴充插件的造型。 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | -------------------------- | -------------- | ------------ | 11 | | | 新造型能正常地套用在程式中 | 造型規劃不完整 | 套件出現問題 | -------------------------------------------------------------------------------- /5-browser-extension/2-forms-browsers-local-storage/images/localstorage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/2-forms-browsers-local-storage/images/localstorage.png -------------------------------------------------------------------------------- /5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # API を採用する 2 | 3 | ## 説明書 4 | 5 | API はとても楽しく遊べます。ここでは、[多くの無料のもののリスト](https://github.com/public-apis/public-apis)を紹介します。API を選んで、問題を解決するブラウザ拡張機能を構築してください。それは、ペットの写真が十分にないという小さな問題 (だから、[dog CEO API](https://dog.ceo/dog-api/) を試してみてください) であっても、何か大きな問題であっても構いません - 楽しんでください! 6 | 7 | ## ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 10 | | -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- | 11 | | | 完全なブラウザ拡張機能は、上記のリストの API を使用して送信されます。 | ブラウザの拡張機能の一部を提出 | 投稿にはバグがある | -------------------------------------------------------------------------------- /5-browser-extension/2-forms-browsers-local-storage/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # API 사용하기 2 | 3 | ## 설명 4 | 5 | API를 사용하면 매우 재밌을 것입니다. 여기에 [무료 API 리스트](https://github.com/public-apis/public-apis)가 있습니다. API를 선택하고, 문제를 해결하는 브라우저 확장프로그램을 만들어봅시다. 반려동물 사진을 충분히 가지고 있지 않은 것이 작은 문제일 수 있습니다. (그러면, [dog CEO API](https://dog.ceo/dog-api/)) 또는 더 거대한 API를 이용해보세요. - 재미있게 만들어보세요! 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 위 API를 사용하여 브라우저 확장프로그램을 만든 경우 | 일부만 API를 사용한 경우 | 오류가 있는 경우 12 | -------------------------------------------------------------------------------- /5-browser-extension/2-forms-browsers-local-storage/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 認領一項 API 2 | 3 | ## 大綱 4 | 5 | API 可以是很好玩的。這裡有[許多公開 API 的清單](https://github.com/public-apis/public-apis)。挑選一項 API，建立一個網頁擴充功能來解決問題。問題可以很小，如找不到足夠的寵物照片，這時你可以嘗試使用[dog CEO API](https://dog.ceo/dog-api/))；或是解決更大問題。好好享受吧！ 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | --------------------------------------------- | ------------------------ | ------------ | 11 | | | 使用上述清單內的 API 建立完整的瀏覽器擴充功能 | 建立部分的瀏覽器擴充功能 | 套件存在問題 | -------------------------------------------------------------------------------- /5-browser-extension/3-background-tasks-and-performance/images/log.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/3-background-tasks-and-performance/images/log.png -------------------------------------------------------------------------------- /5-browser-extension/3-background-tasks-and-performance/images/profiler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/3-background-tasks-and-performance/images/profiler.png -------------------------------------------------------------------------------- /5-browser-extension/3-background-tasks-and-performance/images/snapshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/3-background-tasks-and-performance/images/snapshot.png -------------------------------------------------------------------------------- /5-browser-extension/3-background-tasks-and-performance/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # パフォーマンスのためにサイトを分析する 2 | 3 | Web サイトの詳細なレポートを提供し、パフォーマンスに問題がある領域を示します。サイトの速度が遅い理由と、速度を上げるために何ができるかを分析します。ブラウザツールだけに頼るのではなく、レポートに役立つ他のツールについても調査しましょう。 4 | 5 | ## ルーブリック 6 | 7 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 8 | | -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- | 9 | | | レポートは、ブラウザツールだけでなく、サードパーティのツールが利用可能な場合は、サードパーティのツールから詳細を引き出して表示されます。 | 基本報告書を掲載しました | 最小限の報告書が提示される | -------------------------------------------------------------------------------- /5-browser-extension/3-background-tasks-and-performance/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 사이트 성능 분석 2 | 3 | 웹 사이트에서 성능에 문제가 있는 영역을 보여주는 자세한 보고서를 만들어 봅시다. 사이트가 느린 이유와 속도를 높이기 위해 무엇을 할 수 있는지 분석해보세요. 브라우저 도구에만 의존하지 말고, 성능 분석을 위한 다른 도구들도 알아보세요. 4 | 5 | ## 평가 기준 6 | 7 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 8 | --- | --- | --- | --- 9 | | 브라우저 도구 뿐만 아니라 다른 도구에서 제공하는 세부 정보를 포함하여 보고서를 만든 경우 | 브라우저 도구를 사용하여 기본적인 보고서를 만든 경우 | 최소한의 보고서를 만든 경우 10 | -------------------------------------------------------------------------------- /5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 分析网页的性能 2 | 3 | 提供一份详细的报告，指出某个网页上性能有问题的地方。分析这个网页变慢的原因并提供解决方案。不要只依赖于浏览器工具，可以做些研究，寻找更多能够帮到你的工具。 4 | 5 | ## 评价表 6 | 7 | | 指标 | 优秀 | 良好 | 尚可进步 | 8 | | --- | ---- | ---- | ------- | 9 | | | 呈现了详细的报告，并从非浏览器的第三方工具中获取了信息 | 呈现了基本的报告 | 呈现了极简单的报告 | 10 | -------------------------------------------------------------------------------- /5-browser-extension/3-background-tasks-and-performance/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 分析網頁效能 2 | 3 | 請提供一份詳細的報告，點出一個網頁效能上的問題點。分析網頁緩慢的原因並提供改善它的方案。不要只依賴瀏覽器工具，做一點研究尋找更多幫助你的工具。 4 | 5 | ## 學習評量 6 | 7 | | 作業內容 | 優良 | 普通 | 待改進 | 8 | | -------- | ---------------------------------- | -------------- | ------------ | 9 | | | 詳細的報告包括非瀏覽器的第三方工具 | 呈現出標準報告 | 報告內容有限 | -------------------------------------------------------------------------------- /5-browser-extension/extension-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/extension-screenshot.png -------------------------------------------------------------------------------- /5-browser-extension/install-on-edge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/install-on-edge.png -------------------------------------------------------------------------------- /5-browser-extension/solution/dist/background.js: -------------------------------------------------------------------------------- 1 | chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { 2 | if (msg.action === 'updateIcon') { 3 | chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); 4 | } 5 | }); 6 | //borrowed from energy lollipop extension, nice feature! 7 | function drawIcon(value) { 8 | let canvas = document.createElement('canvas'); 9 | let context = canvas.getContext('2d'); 10 | 11 | context.beginPath(); 12 | context.fillStyle = value.color; 13 | context.arc(100, 100, 50, 0, 2 * Math.PI); 14 | context.fill(); 15 | 16 | return context.getImageData(50, 50, 100, 100); 17 | } 18 | -------------------------------------------------------------------------------- /5-browser-extension/solution/dist/images/plants-people.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/solution/dist/images/plants-people.png -------------------------------------------------------------------------------- /5-browser-extension/solution/dist/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "My Carbon Trigger", 4 | "version": "0.1.0", 5 | "host_permissions": [""], 6 | "background": { 7 | "service_worker": "background.js" 8 | }, 9 | "action": { 10 | "default_popup": "index.html" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /5-browser-extension/solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "carbon-trigger-extension", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "engines": { 7 | "npm": ">=9.0.0", 8 | "node": ">=18.0.0" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1", 12 | "watch": "webpack --watch", 13 | "build": "webpack" 14 | }, 15 | "keywords": [ 16 | "chrome extension", 17 | "edge extension", 18 | "carbon usage tracker" 19 | ], 20 | "author": "Microsoft Cloud Advocacy Team", 21 | "license": "MIT", 22 | "devDependencies": { 23 | "webpack": "^5.94.0", 24 | "webpack-cli": "^5.1.4" 25 | }, 26 | "dependencies": { 27 | "axios": "^1.8.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /5-browser-extension/start/dist/background.js: -------------------------------------------------------------------------------- 1 | //add listener here 2 | 3 | //borrowed from energy lollipop extension 4 | //draw the icon here 5 | -------------------------------------------------------------------------------- /5-browser-extension/start/dist/images/plants-people.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/start/dist/images/plants-people.png -------------------------------------------------------------------------------- /5-browser-extension/start/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | My Carbon Trigger 9 | 10 | 11 | 12 | 13 | plants and people 14 |
15 |

Welcome to Your Personal Carbon Trigger!

16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /5-browser-extension/start/dist/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/5-browser-extension/start/dist/main.js -------------------------------------------------------------------------------- /5-browser-extension/start/dist/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "My Carbon Trigger", 4 | "version": "0.1.0", 5 | "host_permissions": [""], 6 | "background": { 7 | "service_worker": "background.js" 8 | }, 9 | "action": { 10 | "default_popup": "index.html" 11 | } 12 | } -------------------------------------------------------------------------------- /5-browser-extension/start/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "carbon-trigger-extension", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "engines": { 7 | "npm": ">=9.0.0", 8 | "node": ">=18.0.0" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1", 12 | "watch": "webpack --watch", 13 | "build": "webpack" 14 | }, 15 | "keywords": [ 16 | "chrome extension", 17 | "edge extension", 18 | "carbon usage tracker" 19 | ], 20 | "author": "Microsoft Cloud Advocacy Team", 21 | "license": "MIT", 22 | "devDependencies": { 23 | "webpack": "^5.99.9", 24 | "webpack-cli": "^5.1.4" 25 | }, 26 | "dependencies": { 27 | "axios": "^1.7.4" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /5-browser-extension/start/src/index.js: -------------------------------------------------------------------------------- 1 | //1 2 | // form fields 3 | // results divs 4 | 5 | //6 6 | //call the API 7 | 8 | //5 9 | //set up user's api key and region 10 | 11 | //4 12 | // handle form submission 13 | 14 | //3 initial checks 15 | 16 | //2 17 | // set listeners and start app 18 | -------------------------------------------------------------------------------- /6-space-game/1-introduction/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | # Simula un juego 2 | 3 | ## Instrucciones 4 | 5 | Utilizando los ejemplos de código de la lección, escriba una representación de un juego que disfrute. Tendrá que ser un juego simple, pero el objetivo es usar la clase o el patrón de composición y el patrón pub / sub para mostrar cómo se puede lanzar un juego. ¡Se creativo! 6 | 7 | ## Rúbrica 8 | 9 | | Criterios | Ejemplar | Adecuado | Necesita mejorar | 10 | | -------- | ----- | --- | - | 11 | | | Se colocan tres elementos en la pantalla y se manipulan | Se colocan dos elementos en la pantalla y se manipulan | Un elemento se coloca en la pantalla y se manipula | 12 | -------------------------------------------------------------------------------- /6-space-game/1-introduction/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Produrre uno schizzo di un gioco 2 | 3 | ## Istruzioni 4 | 5 | Utilizzando gli esempi di codice nella lezione, scrivere una rappresentazione di un gioco che piace. Dovrà essere un gioco semplice, ma l'obiettivo è usare la classe o il modello di composizione e il modello pub/sub per mostrare come potrebbe essere avviato un gioco. Si dia sfogo alla propria creatività! 6 | 7 | ## Rubrica 8 | 9 | | Criteri | Ottimo | Adeguato | Necessita miglioramento | 10 | | -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- | 11 | | | Tre elementi vengono posizionati sullo schermo e manipolati | Due elementi vengono posizionati sullo schermo e manipolati | Un elemento viene posizionato sullo schermo e manipolato | -------------------------------------------------------------------------------- /6-space-game/1-introduction/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # ゲームのモックアップ 2 | 3 | ## 説明書 4 | 5 | レッスンで使用したコードサンプルを使用して、好きなゲームの表現を書いてください。単純なゲームである必要がありますが、目標は、クラスまたは構成パターンと pub/sub パターンのいずれかを使用して、ゲームがどのように起動するかを示すことです。創造力を発揮してください。 6 | 7 | ## ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 10 | | -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- | 11 | | | 3つの要素を画面上に配置して操作する | 2つの要素を画面上に配置して操作する | 1つの要素を画面上に配置して操作する | -------------------------------------------------------------------------------- /6-space-game/1-introduction/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 게임 제작하기 2 | 3 | ## 설명 4 | 5 | 수업에 있는 예제 코드를 사용해서 게임을 만들어 봅시다. 간단한 게임이어야 하며, 목표는 class 또는 composition 패턴과 pub/sub 패턴 중 하나를 사용하여 게임을 만드는 것입니다. 창의력을 보여주세요! 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 화면에 세개의 요소가 있고 조작할 수 있는 경우 | 화면에 두개의 요소가 있고 조작할 수 있는 경우 | 화면에 한개의 요소가 있고 조작할 수 있는 경우 12 | -------------------------------------------------------------------------------- /6-space-game/1-introduction/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 建立遊戲雛形 2 | 3 | ## 簡介 4 | 5 | 使用本課程中的程式案例，編寫一款你喜歡的遊戲呈現方式。這是一款簡單小規模的遊戲，目的是要能以 class、組合模式與發布訂閱模式呈現遊戲的運作方式。發揮你的創意！ 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | -------------------------- | -------------------------- | ---------------------------- | 11 | | | 畫面上有三個元素且能被控制 | 畫面上有兩個元素且能被控制 | 畫面上只有一個元素且能被控制 | 12 | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/assignment.md: -------------------------------------------------------------------------------- 1 | # Play with the Canvas API 2 | 3 | ## Instructions 4 | 5 | Pick one element of the Canvas API and create something interesting around it. Can you create a little galaxy of repeated stars? Can you create an interesting texture of colored lines? You can look at CodePen for inspiration (but don't copy) 6 | 7 | ## Rubric 8 | 9 | | Criteria | Exemplary | Adequate | Needs Improvement | 10 | | -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- | 11 | | | Code is submitted showing an interesting texture or shape | Code is submitted, but does not run | Code is not submitted | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/canvas_grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/2-drawing-to-canvas/canvas_grid.png -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/partI-solution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/2-drawing-to-canvas/partI-solution.png -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/solution/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/2-drawing-to-canvas/solution/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/solution/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/2-drawing-to-canvas/solution/assets/player.png -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | Juega con la API Canvas 2 | 3 | ## Instrucciones 4 | 5 | Elija un elemento de la API de Canvas y cree algo interesante a su alrededor. ¿Puedes crear una pequeña galaxia de estrellas repetidas? ¿Puedes crear una textura interesante de líneas de colores? Puede buscar inspiración en CodePen (pero no copiar) 6 | 7 | ## Rúbrica 8 | 9 | | Criterios | Ejemplar | Adecuado | Necesita mejorar | 10 | | -------- | -------------------------------------------------- ------- | ----------------------------------- | --------------------- | 11 | | | El código se envía mostrando una textura o forma interesante | Se envía el código, pero no se ejecuta | No se envía el código | 12 | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/translations/assignment.fr.md: -------------------------------------------------------------------------------- 1 | # Jouer avec l'API Canvas 2 | 3 | ## Instructions 4 | 5 | Choisissez un élément de l'API Canvas et créez quelque chose d'intéressant autour de lui. Pouvez-vous créer une petite galaxie d'étoiles répétées ? Pouvez-vous créer une texture intéressante de lignes colorées ? Vous pouvez vous inspirer de CodePen (mais ne copiez pas). 6 | 7 | ## Rubrique 8 | 9 | | Critères | Exemplaire | Adéquat | Besoin d'amélioration | 10 | | -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- | 11 | | | Le code est soumis montrant une texture ou une forme intéressante | Le code est soumis, mais ne s'exécute pas | Le code n'est pas soumis | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/translations/assignment.hi.md: -------------------------------------------------------------------------------- 1 | # कैनवस एपीआई के साथ खेले 2 | 3 | ## अनुदेश 4 | 5 | कैनवास एपीआई का एक तत्व चुनें और इसके चारों ओर कुछ दिलचस्प बनाएं. क्या आप बार-बार तारों की एक छोटी आकाशगंगा बना सकते हैं? क्या आप रंगीन लाइनों की एक दिलचस्प बनावट बना सकते हैं? आप प्रेरणा के लिए कोडपेन को देख सकते हैं (लेकिन कॉपी न करें) 6 | 7 | ## शीर्ष 8 | 9 | | मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत | 10 | | ------ | ------------------------------------------------------------- | ----------------------------------------- | ----------------------------- | 11 | | | एक दिलचस्प बनावट या आकार दिखाते हुए कोड प्रस्तुत किया जाता है | कोड सबमिट किया गया है, लेकिन नहीं चलता है | कोड प्रस्तुत नहीं किया गया है | 12 | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Giocare con l'API Canvas 2 | 3 | ## Istruzioni 4 | 5 | Sceglire un elemento dell'API Canvas e creare qualcosa di interessante attorno ad esso. Si è in grado di creare una piccola galassia di stelle ripetute? Si riesce a creare una interessante struttura di linee colorate? Si puoi guardare CodePen per l'ispirazione (ma non copiare) 6 | 7 | ## Rubrica 8 | 9 | | Criteri | Ottimo | Adeguato | Necessita miglioramento | 10 | | -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- | 11 | | | Il codice viene inviato mostrando una struttura o una forma interessante | Il codice viene inviato, ma non viene eseguito | Il codice non è stato inviato | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # Canvas API で遊ぶ 2 | 3 | ## 説明書 4 | 5 | Canvas API の要素を 1 つ選んで、その周りに何か面白いものを作りましょう。星が繰り返される小さな銀河を作ることができますか? 色のついた線で面白いテクスチャを作ることができますか? インスピレーションを得るために CodePen を見ることができます (ただし、コピーはしないでください)。 6 | 7 | ## ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 10 | | -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- | 11 | | | 興味深い質感や形状を示すコードが提出されている | コードは送信されたが実行されない | コードが提出されていない | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # Canvas API 사용하기 2 | 3 | ## 설명 4 | 5 | Canvas API에서 한 요소를 선택하고 그 주위에 재미있는 요소를 추가해 봅시다. 수많은 별이 모인 은하수를 만들수 있나요? 색깔이 있는 선으로 특별한 질감을 만들 수 있나요? 영감이 필요한다면 CodePen을 참고해보세요. (복사하지는 마세요.) 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 특별한 질감 또는 모양을 보여주는 코드를 제출한 경우 | 코드가 제출되었지만 실행되지 않는 경우 | 코드가 제출되지 않은 경우 12 | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/translations/assignment.ms.md: -------------------------------------------------------------------------------- 1 | # Main dengan Canvas API 2 | 3 | ## Arahan 4 | 5 | Pilih satu elemen API Canvas dan buat sesuatu yang menarik di sekitarnya. Bolehkah anda membuat galaksi kecil bintang berulang? Bolehkah anda membuat tekstur garis berwarna yang menarik? Anda boleh melihat CodePen untuk mendapatkan inspirasi (tetapi jangan menyalin) 6 | 7 | ## Rubrik 8 | 9 | | Kriteria | Contoh | Mencukupi | Usaha Lagi | 10 | | -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- | 11 | | | Kod dihantar menunjukkan tekstur atau bentuk yang menarik | Kod dihantar, tetapi tidak dijalankan | Kod tidak dihantar | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/translations/assignment.nl.md: -------------------------------------------------------------------------------- 1 | # Speel met de Canvas API 2 | 3 | ## Instructies 4 | 5 | Kies een element van de Canvas API en maak er iets interessants omheen. Kunt u een kleine melkweg van herhaalde sterren creëren? Kunt u een interessante textuur van gekleurde lijnen maken? U kunt CodePen bekijken voor inspiratie (maar kopieer niet) 6 | 7 | ## Rubriek 8 | 9 | | Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd | 10 | | -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- | 11 | | | Code wordt ingediend met een interessante textuur of vorm| Code is ingediend, maar wordt niet uitgevoerd | Code is niet verzonden | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 把玩 Canvas API 2 | 3 | ## 簡介 4 | 5 | 挑選一款 Canvas API 上的元素，為它建立一些有趣的設定。你能利用重複的星星建立銀河嗎？你能建立有特殊材質的線條嗎？你可以觀察 CodePen 上的範本激發想法，但請不要抄襲。 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | -------------------------- | ---------------------------- | ------------ | 11 | | | 程式碼呈現有趣的材質與圖案 | 有提交程式碼，但無法正常執行 | 未提交程式碼 | 12 | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/your-work/app.js: -------------------------------------------------------------------------------- 1 | function loadTexture(path) { 2 | return new Promise((resolve) => { 3 | const img = new Image() 4 | img.src = path 5 | img.onload = () => { 6 | resolve(img) 7 | } 8 | }) 9 | } 10 | 11 | function createEnemies(ctx, canvas, enemyImg) { 12 | // TODO draw enemies 13 | } 14 | 15 | window.onload = async () => { 16 | canvas = document.getElementById('canvas') 17 | ctx = canvas.getContext('2d') 18 | // TODO load textures 19 | 20 | // TODO draw black background 21 | // TODO draw hero 22 | // TODO uncomment the next line when you add enemies to screen 23 | //createEnemies(ctx, canvas, enemyImg); 24 | } 25 | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/your-work/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/2-drawing-to-canvas/your-work/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/your-work/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/2-drawing-to-canvas/your-work/assets/player.png -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/your-work/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/2-drawing-to-canvas/your-work/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/solution/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/3-moving-elements-around/solution/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/solution/assets/laserRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/3-moving-elements-around/solution/assets/laserRed.png -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/solution/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/3-moving-elements-around/solution/assets/player.png -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | # Comente su código 2 | 3 | ## Instrucciones 4 | 5 | Revisa tu archivo /app.js actual en la carpeta de tu juego y busca formas de comentarlo y ordenarlo. Es muy fácil que el código se salga de control y ahora es una buena oportunidad para agregar comentarios para asegurarse de que tiene un código legible para que pueda usarlo más tarde. 6 | 7 | ## Rúbrica 8 | 9 | | Criterios | Ejemplar | Adecuado | Necesita mejorar | 10 | | -------- | ---------------- | ------------------------------------- | ------------ | 11 | | | El código `app.js` está completamente comentado y organizado en bloques lógicos | El código `app.js` está adecuadamente comentado | El código `app.js` está algo desorganizado y carece de buenos comentarios | 12 | -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # コードをコメントする 2 | 3 | ## 説明書 4 | 5 | ゲームフォルダ内の現在の /app.js ファイルに目を通し、コメントを付けて片付ける方法を見つけてください。コードはいとも簡単に制御不能になります。今はコメントを追加して、後で使えるように読みやすいコードにする良い機会です。 6 | 7 | ## ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 10 | | -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- | 11 | | | `app.js` のコードは完全にコメントされ、論理的なブロックに整理されています。 | `app.js` のコードは適切にコメントされています。 | `app.js` のコードはやや乱れていて、良いコメントがありません。 | -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 코드 주석 달기 2 | 3 | ## 설명 4 | 5 | 게임 폴더에 있는 /app.js 파일을 살펴보고, 주석을 달고 정리해 봅시다. 코드가 많아지면 통제하기가 어려워질 수 있습니다. 지금 주석을 추가해서 나중에도 코드를 쉽게 파악할 수 있도록 조치해 봅시다. 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | `app.js` 코드가 주석으로 충분히 설명되어 있고 논리적으로 설계된 경우 | `app.js` 코드가 주석으로 적절히 설명된 경우 | `app.js` 코드가 주석으로 충분히 설명되지 않고 복잡하게 설계된 경우 12 | -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 為你的程式做註解 2 | 3 | ## 簡介 4 | 5 | 打開遊戲資料夾中目前的 /app.js 檔案，試著幫它做上註解並整理乾淨。程式碼很容易脫離掌控，現在是個好機會來確保你的程式是容易去閱讀的，在未來還可以被使用。 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | ----------------------------- | ----------------------- | ----------------------- | 11 | | | `app.js` 完整地註解且分塊整理 | `app.js` 有做充分的註解 | `app.js` 凌亂且缺乏註解 | -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/your-work/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/3-moving-elements-around/your-work/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/your-work/assets/laserRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/3-moving-elements-around/your-work/assets/laserRed.png -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/your-work/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/3-moving-elements-around/your-work/assets/player.png -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/your-work/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/3-moving-elements-around/your-work/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/solution/README.md: -------------------------------------------------------------------------------- 1 | This is a placeholder, left blank purposefully -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/solution/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/4-collision-detection/solution/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/solution/assets/laserRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/4-collision-detection/solution/assets/laserRed.png -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/solution/assets/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/4-collision-detection/solution/assets/life.png -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/solution/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/4-collision-detection/solution/assets/player.png -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # 衝突を調べる 2 | 3 | ## 説明書 4 | 5 | 衝突がどのように機能するかを理解するために、衝突するいくつかのアイテムで非常に小さなゲームを構築します。キープレスやマウスクリックでアイテムを移動させ、アイテムが当たったときに何かが起こるようにします。隕石が地球に衝突したり、バンパーカーに衝突したりします。創造力を発揮してください。 6 | 7 | ## ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 10 | | -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- | 11 | | | アイテムがキャンバスに描画され、基本的な衝突が発生し、反応が発生する完全な動作コードサンプルが作成されます。 | コードが不完全な場合 | コードの誤動作 | -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 충돌 감지 2 | 3 | ## 설명 4 | 5 | 충돌이 어떻게 작용하는지 더 잘 이해하기 위해 충돌하는 몇 가지 항목으로 아주 작은 게임을 만들어 봅시다. 키를 누르거나 마우스 클릭으로 이동하게 하고, 부딪혔을 때는 아이템들 중 하나에 무슨 일이 일어나게 해보세요. 부딪히는 것은 지구를 강타하는 유성이거나, 범퍼카 같은 것일 수도 있습니다. 창의력을 보여주세요! 6 | 7 | ## 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 항목을 캔버스에 끌어다 놓거나, 기본 충돌이 발생하고, 반응이 있는 샘플 코드를 만든 경우 | 코드가 일부 미완성인 경우 | 코드에 오류가 있는 경우 12 | -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 探索碰撞 2 | 3 | ## 簡介 4 | 5 | 為了更了解碰撞是如何運作的，建立一款小遊戲包含物件的碰撞。利用鍵盤或是滑鼠來移動物件，當物件碰撞時執行某些行為。它可以像是彗星撞地球，或是碰碰車。發揮你的創意！ 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | -------------------------------------------------------------- | ------------------ | ---------- | 11 | | | 建立出完整的程式：有在畫面上繪製物件、有基本的碰撞與對應的行為 | 程式有部分尚未完成 | 程式有瑕疵 | 12 | -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/your-work/README.md: -------------------------------------------------------------------------------- 1 | This is a placeholder, left blank purposefully -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/your-work/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/4-collision-detection/your-work/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/your-work/assets/laserRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/4-collision-detection/your-work/assets/laserRed.png -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/your-work/assets/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/4-collision-detection/your-work/assets/life.png -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/your-work/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/4-collision-detection/your-work/assets/player.png -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/your-work/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/4-collision-detection/your-work/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/assignment.md: -------------------------------------------------------------------------------- 1 | # Build a Scoring Game 2 | 3 | ## Instructions 4 | 5 | Create a game where you display life and points in a creative way. A suggestion is to show the life as hearts and the points as a big number in the bottom center part of the screen. Have a look here for [Free game resources](https://www.kenney.nl/) 6 | 7 | # Rubric 8 | 9 | | Criteria | Exemplary | Adequate | Needs Improvement | 10 | | -------- | ---------------------- | --------------------------- | -------------------------- | 11 | | | full game is presented | game is partially presented | partial game contains bugs | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/solution/README.md: -------------------------------------------------------------------------------- 1 | This is a placeholder, left blank purposefully -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/solution/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/5-keeping-score/solution/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/solution/assets/laserRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/5-keeping-score/solution/assets/laserRed.png -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/solution/assets/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/5-keeping-score/solution/assets/life.png -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/solution/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/5-keeping-score/solution/assets/player.png -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | # Construye un juego de puntuación 2 | 3 | ## Instrucciones 4 | 5 | Crea un juego en el que muestres la vida y los puntos de forma creativa. Una sugerencia es mostrar la vida como corazones y los puntos como un gran número en la parte inferior central de la pantalla. Eche un vistazo aquí para ver [Recursos de juegos gratuitos](https://www.kenney.nl/) 6 | 7 | # Rúbrica 8 | 9 | | Criterios | Ejemplar | Adecuado | Necesita mejorar | 10 | | -------- | ---------------------- | --------------------------- | -------------------------- | 11 | | | se presenta el juego completo | se presenta parcialmente el juego | juego parcial contiene errores | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/translations/assignment.fr.md: -------------------------------------------------------------------------------- 1 | # Développer un jeu de score 2 | 3 | ## Instructions 4 | 5 | Créez un jeu où vous affichez la vie et les points de manière créative. Une suggestion est de montrer la vie sous forme de cœurs et les points sous forme de grand nombre dans la partie centrale inférieure de l'écran. Jetez un coup d'œil ici pour des [ressources de jeu gratuites](https://www.kenney.nl/) 6 | 7 | # Rubrique 8 | 9 | | Critères | Exemplaire | Adéquat | Besoin d'amélioration | 10 | | -------- | ---------------------- | --------------------------- | -------------------------- | 11 | | | le jeu complet est présenté | le jeu est partiellement présenté | le jeu partiel contient des bugs | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/translations/assignment.hi.md: -------------------------------------------------------------------------------- 1 | # एक स्कोरिंग गेम बनाएँ 2 | 3 | ## अनुदेश 4 | 5 | एक खेल बनाएं जहां आप रचनात्मक तरीके से जीवन और बिंदुओं को प्रदर्शित करते हैं। एक सुझाव है कि जीवन को दिलों के रूप में दिखाना और स्क्रीन के निचले केंद्र भाग में एक बड़ी संख्या के रूप में अंक। [मुक्त खेल संसाधनों](https://www.kenney.nl/) के लिए यहाँ एक नज़र डाले । 6 | 7 | ## शीर्ष 8 | 9 | | मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत | 10 | | ------ | -------------------- | ------------------------------------- | --------------------------- | 11 | | | पूरा खेल प्रस्तुत है | खेल आंशिक रूप से प्रस्तुत किया गया है | आंशिक खेल में बग्स होते हैं | 12 | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/translations/assignment.it.md: -------------------------------------------------------------------------------- 1 | # Costruire un Gioco di Punteggio 2 | 3 | ## Istruzioni 4 | 5 | Creare un gioco in cui si mostrano vite e punti in modo creativo. Un suggerimento è quello di mostrare le vite come cuori e i punti come un numero grande nella parte centrale in basso dello schermo. Dare un'occhiata qui per [risorse di gioco gratuite](https://www.kenney.nl/) 6 | 7 | # Rubrica 8 | 9 | | Criteri | Ottimo | Adeguato | Necessita miglioramento | 10 | | -------- | ---------------------- | --------------------------- | -------------------------- | 11 | | | Viene presentato un gioco completo | Il gioco è presentato parzialmente | il gioco parziale contiene bug | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # スコアリングゲームの構築 2 | 3 | ## 説明書 4 | 5 | ライフとポイントを独創的な方法で表示するゲームを作成します。提案としては、ライフをハートで表示し、ポイントを画面中央下部の大きな数字で表示することです。[無料のゲームリソース](https://www.kenney.nl/)はこちらをご覧ください。 6 | 7 | # ルーブリック 8 | 9 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 10 | | -------- | ---------------------- | --------------------------- | -------------------------- | 11 | | | フルゲームが提示されています | 部分的に提示されたゲーム | 部分的なゲームにはバグが含まれています | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 득점 게임 만들기 2 | 3 | ## 설명 4 | 5 | 생명과 포인트를 창의적으로 보여주는 게임을 만들어 봅시다. 화면 가운데 하단에는 생명과 포인트를 큰 숫자로 나타내보세요. [무료 게임 목록](https://www.kenney.nl/)을 참고해보세요. 6 | 7 | # 평가 기준 8 | 9 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 10 | --- | --- | --- | --- 11 | | 완성도 있는 게임을 만든 경우 | 일부만 작동하는 게임을 만든 경우 | 게임에 오류가 있는 경우 12 | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/translations/assignment.ms.md: -------------------------------------------------------------------------------- 1 | # Bina Permainan Pemarkahan 2 | 3 | ## Arahan 4 | 5 | Buat permainan di mana anda menampilkan kehidupan dan mata dengan cara yang kreatif. Satu cadangan adalah untuk menunjukkan kehidupan sebagai hati dan poin sebagai angka yang besar di bahagian tengah bawah skrin. Lihat di sini [Sumber permainan percuma](https://www.kenney.nl/) 6 | 7 | # Rubrik 8 | 9 | | Kriteria | Contoh | Mencukupi | Usaha Lagi | 10 | | -------- | ---------------------- | --------------------------- | -------------------------- | 11 | | | permainan penuh dipersembahkan | permainan dipersembahkan sebahagiannya | permainan separa mengandungi pepijat | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/translations/assignment.nl.md: -------------------------------------------------------------------------------- 1 | # Bouw een scorespel 2 | 3 | ## Instructies 4 | 5 | Creëer een spel waarin u leven en punten op een creatieve manier weergeeft. Een suggestie is om het leven te laten zien als harten en de punten als een groot getal in het midden onderaan het scherm. Kijk hier voor [gratis spelbronnen](https://www.kenney.nl/) 6 | 7 | # Rubriek 8 | 9 | | Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd | 10 | | -------- | ---------------------- | --------------------------- | -------------------------- | 11 | | | volledige game wordt gepresenteerd | game wordt gedeeltelijk gepresenteerd | gedeeltelijke game bevat bugs | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 建立計分遊戲 2 | 3 | ## 簡介 4 | 5 | 建立一款遊戲，能有創意地顯示生命值與分數。建議上能在畫面的正下方，以心型圖示顯示生命值，或是斗大的數字顯示分數。看看這些[免費的遊戲資源](https://www.kenney.nl/)。 6 | 7 | ## 學習評量 8 | 9 | | 作業內容 | 優良 | 普通 | 待改進 | 10 | | -------- | ---------------- | ---------------- | ------------ | 11 | | | 呈現出完整的遊戲 | 遊戲提供部分內容 | 遊戲存在問題 | 12 | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/your-work/README.md: -------------------------------------------------------------------------------- 1 | This is a placeholder, left blank purposefully -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/your-work/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/5-keeping-score/your-work/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/your-work/assets/laserRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/5-keeping-score/your-work/assets/laserRed.png -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/your-work/assets/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/5-keeping-score/your-work/assets/life.png -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/your-work/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/5-keeping-score/your-work/assets/player.png -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/your-work/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/5-keeping-score/your-work/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/6-end-condition/solution/README.md: -------------------------------------------------------------------------------- 1 | This is a placeholder, left blank purposefully -------------------------------------------------------------------------------- /6-space-game/6-end-condition/solution/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/6-end-condition/solution/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/6-end-condition/solution/assets/laserRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/6-end-condition/solution/assets/laserRed.png -------------------------------------------------------------------------------- /6-space-game/6-end-condition/solution/assets/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/6-end-condition/solution/assets/life.png -------------------------------------------------------------------------------- /6-space-game/6-end-condition/solution/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/6-end-condition/solution/assets/player.png -------------------------------------------------------------------------------- /6-space-game/6-end-condition/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/6-end-condition/solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/6-end-condition/translations/assignment.ja.md: -------------------------------------------------------------------------------- 1 | # サンプルゲームを作る 2 | 3 | ## インストラクション 4 | 5 | 異なる終了条件で練習する小さなゲームを構築してみてください。ポイントの数を取得する間に変化し、主人公はすべてのライフを失うか、またはすべてのモンスターが退治されてしています。コンソールベースのアドベンチャーゲームのようなシンプルなものを作ってみてください。インスピレーションとして以下のゲームの流れを使用してください。 6 | 7 | ``` 8 | Hero> Strikes with broadsword - orc takes 3p damage 9 | Orc> Hits with club - hero takes 2p damage 10 | Hero> Kicks - orc takes 1p damage 11 | Game> Orc is defeated - Hero collects 2 coins 12 | Game> ****No more monsters, you have conquered the evil fortress**** 13 | ``` 14 | 15 | ## ルーブリック 16 | 17 | | 基準 | 模範的な例 | 適切な | 改善が必要 | 18 | | -------- | ---------------------- | --------------------------- | -------------------------- | 19 | | | フルゲームが提示されています | 部分的に提示されたゲーム | 部分的なゲームにはバグが含まれています | -------------------------------------------------------------------------------- /6-space-game/6-end-condition/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 샘플 게임 만들기 2 | 3 | ## 설명 4 | 5 | 게임이 끝나는 다양한 조건을 연습할 수 있는 작은 게임을 만들어 봅시다. 점수를 얼마나 얻어야 하는지에 따라 주인공이 목숨을 다 잃거나 모든 몬스터들이 패배합니다. 콘솔 기반 어드벤처 게임과 같은 간단한 것을 만들어봅시다. 아래 예시를 참고해서 영감을 얻어 보세요. 6 | 7 | ``` 8 | 영웅> 양날검 휘두르기 - 오크는 3포인트의 데미지를 입는다. 9 | 오크> 클럽 휘두르기 - 영웅은 2포인트의 데미지를 입는다. 10 | 영웅> 발차기 - 오크는 1포인트의 데미지를 입는다. 11 | 게임> 오크가 지는 경우 - 영웅은 2코인을 얻는다. 12 | 게임> ****해치울 몬스터가 더 이상 없으면 당신은 악마의 요새를 정복한 것입니다**** 13 | ``` 14 | 15 | ## 평가 기준 16 | 17 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 18 | --- | --- | --- | --- 19 | | 완성도 있는 게임을 만든 경우 | 부분적인 게임을 구현한 경우 | 게임에 일부 버그가 있는 경우 20 | -------------------------------------------------------------------------------- /6-space-game/6-end-condition/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 建立一款遊戲 2 | 3 | ## 簡介 4 | 5 | 試著建立一款小遊戲，實際應用不同的終止狀態。做一些變化，如取得的分數、英雄血量或是被擊敗的怪物。可以是很簡單的類型，例如文字冒險遊戲。請參考下列的遊戲流程作為啟發： 6 | 7 | ``` 8 | 英雄> 使用寶劍攻擊 - 獸人受到了 3 點傷害 9 | 獸人> 使用棍棒攻擊 - 英雄受到了 2 點傷害 10 | 英雄> 踢擊 - 獸人受到了 1 點傷害 11 | 遊戲訊息> 獸人已被擊敗 - 英雄取得 2 枚硬幣 12 | 遊戲訊息> ****已殲滅所有怪獸，你已佔領了邪惡堡壘**** 13 | ``` 14 | 15 | ## 學習評量 16 | 17 | | 作業內容 | 優良 | 普通 | 待改進 | 18 | | -------- | ---------------- | ---------------- | ------------ | 19 | | | 呈現出完整的遊戲 | 遊戲提供部分內容 | 遊戲存在問題 | 20 | -------------------------------------------------------------------------------- /6-space-game/6-end-condition/your-work/README.md: -------------------------------------------------------------------------------- 1 | This is a placeholder, left blank purposefully -------------------------------------------------------------------------------- /6-space-game/6-end-condition/your-work/assets/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/6-end-condition/your-work/assets/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/6-end-condition/your-work/assets/laserRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/6-end-condition/your-work/assets/laserRed.png -------------------------------------------------------------------------------- /6-space-game/6-end-condition/your-work/assets/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/6-end-condition/your-work/assets/life.png -------------------------------------------------------------------------------- /6-space-game/6-end-condition/your-work/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/6-end-condition/your-work/assets/player.png -------------------------------------------------------------------------------- /6-space-game/6-end-condition/your-work/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /6-space-game/6-end-condition/your-work/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solution", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/images/pewpew.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/images/pewpew.gif -------------------------------------------------------------------------------- /6-space-game/solution/README.md: -------------------------------------------------------------------------------- 1 | This is a placeholder, left blank purposefully -------------------------------------------------------------------------------- /6-space-game/solution/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Space Game 6 | 7 | 8 | 9 |

Image to use:

10 |

Canvas:

11 | 12 | 13 | Your browser does not support the HTML5 canvas tag. 14 | 15 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /6-space-game/solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "space-invaders", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "npx http-server -c-1 -p 5000", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/Background/backgroundColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/Background/backgroundColor.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/Background/nebula.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/Background/nebula.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/Background/speedLine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/Background/speedLine.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/Background/starBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/Background/starBackground.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/Background/starBig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/Background/starBig.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/Background/starSmall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/Background/starSmall.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/enemyShip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/enemyShip.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/enemyUFO.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/enemyUFO.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/laserGreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/laserGreen.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/laserGreenShot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/laserGreenShot.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/laserRed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/laserRed.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/laserRedShot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/laserRedShot.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/life.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/meteorBig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/meteorBig.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/meteorSmall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/meteorSmall.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/player.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/playerDamaged.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/playerDamaged.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/playerLeft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/playerLeft.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/playerRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/playerRight.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/png/shield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/png/shield.png -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/preview.jpg -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/readme.txt: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | Space Shooter graphics by Kenney Vleugels (www.kenney.nl) 4 | 5 | You may use these graphics in personal and commercial projects. 6 | Credit (www.kenney.nl) would be nice but is not mandatory. 7 | 8 | -- -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/spaceArt.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/spaceArt.ai -------------------------------------------------------------------------------- /6-space-game/solution/spaceArt/spaceArt.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spaceArt/spaceArt.swf -------------------------------------------------------------------------------- /6-space-game/solution/spritesheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/6-space-game/solution/spritesheet.png -------------------------------------------------------------------------------- /7-bank-project/1-template-route/history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/1-template-route/history.png -------------------------------------------------------------------------------- /7-bank-project/1-template-route/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 라우팅 개선 2 | 3 | ## 설명 4 | 5 | 경로 선언에는 현재 사용할 템플릿 ID만 포함됩니다. 하지만 새 페이지를 표시할 때는 추가할 것이 더 생기는 경우가 있습니다. 두 가지 추가 기능을 사용하여 라우팅 구현을 개선해 봅시다. 6 | 7 | - 각 템플릿에 제목을 부여하고 템플릿이 변경되면 새 제목으로 창 제목을 변경합니다. 8 | - 템플릿 변경 후 일부 코드를 실행하는 옵션을 추가합니다. 대시보드 페이지가 표시될 때마다 개발자 콘솔에 `'대시보드가 보임'`을 출력합니다. 9 | 10 | ## 평가 기준 11 | 12 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 13 | --- | --- | --- | --- 14 | | 두 기능이 구현되고 작동하는 경우. 제목 및 코드 추가는 `routes` 선언에 추가된 새 경로에서도 작동합니다. | 두 기능은 작동하지만, 동작은 하드 코딩되어 있으며 `routes` 선언을 통해 구성할 수 없는 경우.
세 번째 경로를 제목과 코드와 함께 추가하면 작동하지 않거나 부분적으로 작동합니다. | 기능 중 하나가 없거나 제대로 작동하지 않는 경우 15 | -------------------------------------------------------------------------------- /7-bank-project/1-template-route/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 增進網頁路由 2 | 3 | ## 簡介 4 | 5 | 我們的網頁路由的定義只包含模板的 ID。但當顯示新的網頁頁面時，我們或許會用到更多東西。讓我們來增進我們的網頁路由方式，新增兩項功能： 6 | 7 | - 給各個模板標題，在模板切換後同時更新網頁視窗的標題。 8 | - 加入額外選項，在模板切換後執行特定程式。我們希望在切換到儀表板頁面時，在開發者命令欄顯示 `'Dashboard is shown'`。 9 | 10 | ## 學習評量 11 | 12 | | 作業內容 | 優良 | 普通 | 待改進 | 13 | | -------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------ | 14 | | | 兩個新功能運作正常，標題與程式也能執行新的 `routes` 規則 | 兩個新功能運作正常，但行為是 hardcoded 上去而非使用 `routes` 規則。新的路由規則無法完整地運作 | 新功能不完全或不正常運行 | 15 | -------------------------------------------------------------------------------- /7-bank-project/2-forms/images/browser-console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/2-forms/images/browser-console.png -------------------------------------------------------------------------------- /7-bank-project/2-forms/images/click-register.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/2-forms/images/click-register.png -------------------------------------------------------------------------------- /7-bank-project/2-forms/images/form-post.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/2-forms/images/form-post.png -------------------------------------------------------------------------------- /7-bank-project/2-forms/images/result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/2-forms/images/result.png -------------------------------------------------------------------------------- /7-bank-project/2-forms/images/validation-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/2-forms/images/validation-error.png -------------------------------------------------------------------------------- /7-bank-project/2-forms/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 은행 앱 스타일링 2 | 3 | ## 설명 4 | 5 | 새 `styles.css` 파일을 만들고 현재 `index.html` 파일에 링크를 추가해봅니다. 방금 만든 CSS 파일에서 *로그인* 및 *대시 보드* 페이지가 멋지고 깔끔하게 보이도록 스타일을 추가합니다. 앱에 자체 브랜딩을 제공하기 위해 색상 테마를 만들어봅니다. 6 | 7 | > 팁 : HTML을 수정하고 필요한 경우 새 요소와 클래스를 추가 할 수 있습니다. 8 | 9 | ## 평가 기준 10 | 11 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 12 | --- | --- | --- | --- 13 | | 모든 페이지가 깔끔하고 읽기 쉬우며 일관된 색상 테마와 다양한 섹션들이 적절하게 돋보이는 경우 | 페이지가 스타일링되어있지만 테마가 없거나 섹션들이 명확하게 구분되지 않은 경우 | 페이지가 스타일링되어 있지 않았으며 섹션들이 질서가 없고 정보를 읽기가 어려운 경우 14 | -------------------------------------------------------------------------------- /7-bank-project/2-forms/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 造型化你的銀行程式 2 | 3 | ## 簡介 4 | 5 | 建立新的檔案 `styles.css`，匯入到你的 `index.html` 檔案中。藉由 CSS 檔，你能讓*登入*與*儀表板*頁面看起來更漂亮且整潔。試著為你的程式加入主題色彩，對應到你的品牌。 6 | 7 | > 提示：你可以修改 HTML 檔，在必要時新增元素與 classes。 8 | 9 | ## 學習評量 10 | 11 | | 作業內容 | 優良 | 普通 | 待改進 | 12 | | -------- | -------------------------------------------------- | ------------------------------------ | ---------------------------------------- | 13 | | | 所有的頁面整潔且易讀：統一的主題色彩且排版顯示正常 | 頁面有調整過，但缺乏主題且排版有瑕疵 | 頁面缺乏造型，排版凌亂且頁面資訊難以理解 | 14 | -------------------------------------------------------------------------------- /7-bank-project/3-data/images/login-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/3-data/images/login-error.png -------------------------------------------------------------------------------- /7-bank-project/3-data/images/mpa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/3-data/images/mpa.png -------------------------------------------------------------------------------- /7-bank-project/3-data/images/spa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/3-data/images/spa.png -------------------------------------------------------------------------------- /7-bank-project/3-data/translations/assignment.ko.md: -------------------------------------------------------------------------------- 1 | # 코드 리팩터링 및 주석 2 | 3 | ## 설명 4 | 5 | 코드베이스가 커짐에 따라 코드를 자주 리팩터링하여 시간이 지남에 따라 가독성과 유지 관리가 가능하도록 유지하는 것이 중요합니다. 주석을 추가하고 `app.js` 를 리팩터링하여 코드 품질을 개선합니다. 6 | 7 | - 서버 API 기본 URL과 같은 상수 추출 8 | - 유사한 코드를 분해합니다. 예를 들어 `createAccount()` 및 `getAccount()` 모두에서 사용되는 코드를 다시 그룹화하는 `sendRequest()` 함수를 만들 수 있습니다. 9 | - 읽기 쉽도록 코드 재구성 및 주석 추가 10 | 11 | ## 평가 기준 12 | 13 | 기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안 14 | --- | --- | --- | --- 15 | | 코드 주석이 잘 짜여진 여러개의 섹션으로 나뉘며 읽기 쉬운 경우. 그리고 상수들이 추출되고 잘 쪼개진 `sendRequest()` 함수를 생성한 경우 | 코드는 깔끔하지만 더 많은 주석, 지속적인 추출 또는 분해를 통해 개선될 수 있는 경우 | 코드가 지저분하고 주석도 잘 작성하지 않았으며 상수 또한 추출되지 않고 코드도 분해되지 않은 경우 16 | -------------------------------------------------------------------------------- /7-bank-project/3-data/translations/assignment.zh-tw.md: -------------------------------------------------------------------------------- 1 | # 重構並註解你的程式碼 2 | 3 | ## 簡介 4 | 5 | 正當你的程式碼越來越多時，頻繁地重構你的程式，讓程式碼容易去閱讀與維護變得十分重要。加入一些註解並重構檔案 `app.js` 來增進檔案的品質： 6 | 7 | - 取出常數，好比說伺服器 API 的根網址 8 | - 重構相同的程式碼：舉例來說，你可以建立函式 `sendRequest()` 來合併 `createAccount()` 與 `getAccount()`。 9 | - 重新編排你的程式和加入註解，讓它更容易地閱讀。 10 | 11 | ## 學習評量 12 | 13 | | 作業內容 | 優良 | 普通 | 待改進 | 14 | | -------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------ | ---------------------------------------------- | 15 | | | 程式碼有做註解，分塊地整理好。常數有被取出來且函式 `sendRequest()` 已設定完成 | 程式碼有做過處理，但仍可以藉由加入註解、排版與重構來增進品質 | 程式碼很雜亂，缺乏註解，常數與函式並沒有做規劃 | 16 | -------------------------------------------------------------------------------- /7-bank-project/4-state-management/images/data-flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/4-state-management/images/data-flow.png -------------------------------------------------------------------------------- /7-bank-project/4-state-management/images/dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/4-state-management/images/dialog.png -------------------------------------------------------------------------------- /7-bank-project/api/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "commonjs": true, 4 | "es2020": true, 5 | "node": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "parserOptions": { 9 | "ecmaVersion": 11 10 | }, 11 | "rules": { 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /7-bank-project/api/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.logs 3 | .DS_Store 4 | .Thumbs.db 5 | -------------------------------------------------------------------------------- /7-bank-project/api/api.http: -------------------------------------------------------------------------------- 1 | # You need REST Client extension for VS Code to use this file 2 | # Download at https://aka.ms/vscode/rest-client 3 | 4 | GET http://localhost:5000/api/ 5 | 6 | ### 7 | 8 | POST http://localhost:5000/api/accounts/ 9 | Content-Type: application/x-www-form-urlencoded 10 | 11 | user=sinedied¤cy=$&balance=50 12 | 13 | ### 14 | 15 | GET http://localhost:5000/api/accounts/sinedied 16 | 17 | ### 18 | 19 | DELETE http://localhost:5000/api/accounts/sinedied 20 | 21 | ### 22 | 23 | POST http://localhost:5000/api/accounts/sinedied/transactions 24 | Content-Type: application/json 25 | 26 | { 27 | "date": "2020-07-24", 28 | "object": "Bought book", 29 | "amount": -20 30 | } 31 | 32 | ### 33 | 34 | DELETE http://localhost:5000/api/accounts/sinedied/transactions/8825ff3e8331277911174fd1b73ff889 35 | -------------------------------------------------------------------------------- /7-bank-project/api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bank-api", 3 | "version": "1.0.0", 4 | "description": "Bank API", 5 | "private": true, 6 | "main": "server.js", 7 | "scripts": { 8 | "start": "node server.js", 9 | "lint": "eslint", 10 | "format": "prettier --single-quote --write *.js" 11 | }, 12 | "keywords": [], 13 | "author": { 14 | "name": "Yohan Lasorsa", 15 | "url": "https://twitter.com/sinedied" 16 | }, 17 | "license": "MIT", 18 | "devDependencies": { 19 | "eslint": "^7.5.0", 20 | "prettier": "^2.0.5" 21 | }, 22 | "dependencies": { 23 | "body-parser": "^1.20.3", 24 | "cors": "^2.8.5", 25 | "express": "^4.21.2" 26 | }, 27 | "engines": { 28 | "node": ">=10" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /7-bank-project/images/screen1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/images/screen1.png -------------------------------------------------------------------------------- /7-bank-project/images/screen2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/7-bank-project/images/screen2.png -------------------------------------------------------------------------------- /7-bank-project/solution/README.md: -------------------------------------------------------------------------------- 1 | # Bank app 2 | 3 | > Example solution for the bank app project, built with vanilla HTML5, CSS and JavaScript (no frameworks or libraries used). 4 | 5 | ## Running the app 6 | 7 | First make sure you have the [API server](../api/README.md) running. 8 | 9 | Any web server can be used to run the app, but since you should have [Node.js](https://nodejs.org) installed anyway to run the API, you can: 10 | 11 | 1. Git clone this repo. 12 | 2. Open a terminal, navigate to this directory, then run `npx lite-server .`. It will start a development web server on port `3000` 13 | 3. Open `http://localhost:3000` in a browser to run the app. 14 | -------------------------------------------------------------------------------- /7-bank-project/solution/translations/README.es.md: -------------------------------------------------------------------------------- 1 | # Aplicación bancaria 2 | 3 | > Solución de ejemplo para el proyecto de la aplicación bancaria, construida con HTML5 vanilla, CSS y JavaScript (sin entorno de trabajos ni bibliotecas). 4 | 5 | ## Ejecutando la aplicación 6 | 7 | Primero asegúrese de tener el [servidor API](../api/README.md) en ejecución. 8 | 9 | Se puede usar cualquier servidor web para ejecutar la aplicación, pero dado que debe tener [Node.js](https://nodejs.org) instalado de todos modos para ejecutar la API, puede: 10 | 11 | 1. Git clone este repositorio. 12 | 2. Abra una terminal, luego ejecute `npx lite-server solution`. Iniciará un servidor web de desarrollo en el puerto `3000` 13 | 3. Abra `http://localhost: 3000` en un navegador para ejecutar la aplicación. 14 | -------------------------------------------------------------------------------- /7-bank-project/solution/translations/README.fr.md: -------------------------------------------------------------------------------- 1 | # Application bancaire 2 | 3 | > Exemple de solution pour le projet d'application bancaire, développé avec du HTML5 vanilla, du CSS et du JavaScript (pas de frameworks ni de bibliothèques utilisés). 4 | 5 | ## Exécuter l'application 6 | 7 | Assurez-vous d'abord que le [serveur API](../../api/translations/README.fr.md) est en cours d'exécution. 8 | 9 | N'importe quel serveur Web peut être utilisé pour exécuter l'application, mais comme [Node.js](https://nodejs.org/fr) doit de toute façon être installé pour exécuter l'API, vous pouvez : 10 | 11 | 1. Git cloner ce dépôt. 12 | 2. Ouvrir un terminal, puis exécutez `npx lite-server solution`. Celà démarrera un serveur Web de développement sur le port `3000` 13 | 3. Ouvrir `http://localhost:3000` dans un navigateur pour exécuter l'application. -------------------------------------------------------------------------------- /7-bank-project/solution/translations/README.hi.md: -------------------------------------------------------------------------------- 1 | # बैंक एप 2 | 3 | > बैंक ऐप परियोजना के लिए उदाहरण समाधान, वेनिला एचटीएमएल 5, सीएसएस और जावास्क्रिप्ट के साथ बनाया गया (कोई फ्रेमवर्क या लाइब्रेरी का उपयोग नहीं किया गया) है. 4 | 5 | ## ऐप चल रहा हैं 6 | 7 | First make sure you have the [API server](../api/README.md) running पहले सुनिश्चित करें कि आपके पास [एपीआई सर्वर](../../api/translations/README.hi.md) चल रहा है. 8 | 9 | एप्लिकेशन को चलाने के लिए किसी भी वेब सर्वर का उपयोग किया जा सकता है, लेकिन चूंकि आपके पास एपीआई चलाने के लिए वैसे भी [नोडजेयस](https://nodejs.org) स्थापित होना चाहिए, आप कर सकते हैं: 10 | 11 | 1. ये रेपो गिट क्लोन. 12 | 2. एक टर्मिनल खोलें, फिर `npx lite-server solution` चलाएँ। यह पोर्ट `3000` पर एक विकास वेब सर्वर शुरू करेगा 13 | 3. एप्लिकेशन चलाने के लिए ब्राउज़र में `http://localhost:3000` खोलें. 14 | -------------------------------------------------------------------------------- /7-bank-project/solution/translations/README.it.md: -------------------------------------------------------------------------------- 1 | # App Bancaria 2 | 3 | > Soluzione di esempio per il progetto app bancaria, costruito con semplice HTML5, CSS e JavaScript (non è stata usato alcun framework o libreria). 4 | 5 | ## Eseguire l'app 6 | 7 | Per prima cosa assicurarsi di avere in esecuzione il [server API](../../api/translations/README.it.md). 8 | 9 | Può essere usato un qualsiasi server web per eseguire l'app, ma visto che si dovrebbe avere installato comunque [Node.js](https://nodejs.org) per eseguire l'API, è possibile: 10 | 11 | 1. Utilizzare il comando `git clone` con questo repository. 12 | 2. Aprire un terminale, poi eseguire `npx lite-server solution`. Verrà fatto partire un server web di sviluppo sulla porta `3000` 13 | 3. Aprire `http://localhost:3000` in un browser per eseguire l'app. 14 | -------------------------------------------------------------------------------- /7-bank-project/solution/translations/README.ja.md: -------------------------------------------------------------------------------- 1 | # 銀行アプリ 2 | 3 | > バニラ HTML5、CSS、JavaScript で構築された銀行アプリプロジェクトのソリューション例 (フレームワークやライブラリは使用していません)。 4 | 5 | ## アプリの実行 6 | 7 | まず、[API サーバー](../../api/translations/README.ja.md)が起動していることを確認します。 8 | 9 | アプリの実行にはどの Web サーバーを使用しても構いませんが、API を実行するためには [Node.js](https://nodejs.org/ja) がインストールされている必要があるので、以下のようにします。 10 | 11 | 1. このレポを Git でクローンします 12 | 2. ターミナルを開き、`npx lite-server solution` を実行します。これで、`3000` ポートで開発用ウェブサーバが起動します 13 | 3. ブラウザで `http://localhost:3000` を開いてアプリを実行します 14 | -------------------------------------------------------------------------------- /7-bank-project/solution/translations/README.ko.md: -------------------------------------------------------------------------------- 1 | # 은행 앱 2 | 3 | > 은행 앱 프로젝트의 예시 답안입니다. 바닐라 HTML5, CSS 그리고 JavaScript를 이용해 구현하였습니다(어떠한 프레임워크나 라이브러리도 사용되지 않았습니다). 4 | 5 | ## 앱을 실행하기 6 | 7 | 먼저 [API server](../api/README.md)가 동작하고 있는지 확인해주세요. 8 | 9 | Any web server can be used to run the app, but since you should have [Node.js](https://nodejs.org) installed anyway to run the API, you can: 10 | 11 | 어느 웹서버나 이 앱을 사용할 수 있으나, 아직까지는 이 API를 실행하기 위해서는 [Node.js](https://nodejs.org)를 설치해야 합니다. 아래의 방법으로 실행하세요: 12 | 13 | 1. 이 저장소를 Git clone 합니다. 14 | 2. 터미널을 열고, `npx lite-server solution`을 입력해 실행합니다. 이 명령은 `3000`번 포트에 개발 웹 서버를 시작하게 합니다. 15 | 3. 브라우저에서 `http://localhost:3000` 입력해 앱을 실행합니다. -------------------------------------------------------------------------------- /7-bank-project/solution/translations/README.ml.md: -------------------------------------------------------------------------------- 1 | # ബാങ്ക് ആപ്പ് 2 | 3 | > വാനില HTML5, CSS, JavaScript എന്നിവ ഉപയോഗിച്ച് നിർമ്മിച്ച ബാങ്ക് ആപ്പ് പ്രോജക്റ്റിനുള്ള ഉദാഹരണ പരിഹാരം (ചട്ടക്കൂടുകളോ ലൈബ്രറികളോ ഉപയോഗിച്ചിട്ടില്ല). 4 | 5 | ## ആപ്പ് പ്രവർത്തിപ്പിക്കുന്നു 6 | 7 | ആദ്യം നിങ്ങൾക്ക് [API സെർവർ](../api/README.md) പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. 8 | 9 | ആപ്പ് പ്രവർത്തിപ്പിക്കാൻ ഏത് വെബ് സെർവറും ഉപയോഗിക്കാം, എന്നാൽ API പ്രവർത്തിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് [Node.js](https://nodejs.org) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കേണ്ടതിനാൽ, നിങ്ങൾക്ക് ഇവ ചെയ്യാനാകും: 10 | 11 | 1. ഈ റിപ്പോ Git ക്ലോൺ ചെയ്യുക. 12 | 2. ഒരു ടെർമിനൽ തുറക്കുക, തുടർന്ന് `npx lite-server solution` റൺ ചെയ്യുക. അത് `3000` പോർട്ടിൽ ഒരു വികസന വെബ് സെർവർ ആരംഭിക്കും 13 | 3. ആപ്പ് പ്രവർത്തിപ്പിക്കുന്നതിന് ഒരു ബ്രൗസറിൽ `http://localhost:3000` തുറക്കുക. 14 | -------------------------------------------------------------------------------- /7-bank-project/solution/translations/README.ms.md: -------------------------------------------------------------------------------- 1 | # Aplikasi bank 2 | 3 | > Contoh penyelesaian untuk projek aplikasi bank, dibangun dengan vanilla HTML5, CSS dan JavaScript (tidak ada kerangka atau perpustakaan yang digunakan). 4 | 5 | ## Menjalankan aplikasi 6 | 7 | Mula-mula pastikan anda menjalankan [pelayan API](../../api/translations/README.ms.md). 8 | 9 | Mana-mana pelayan web boleh digunakan untuk menjalankan aplikasi, tetapi kerana anda seharusnya memasang [Node.js](https://nodejs.org) untuk menjalankan API, anda boleh: 10 | 11 | 1. Git klon repo ini. 12 | 2. Buka terminal, kemudian jalankan `npx lite-server solution`. Ia akan memulakan pelayan web pengembangan di port `3000` 13 | 3. Buka `http://localhost: 3000` di penyemak imbas untuk menjalankan aplikasi. -------------------------------------------------------------------------------- /7-bank-project/translations/README.zh-cn.md: -------------------------------------------------------------------------------- 1 | # :dollar: 建立银行 2 | 3 | 在这个项目中，你将学习如何建立一个虚构的银行。这些课程包括指导如何布局网络应用和提供路由，构建表单，管理状态，以及从一个 API 中获取银行的数据。 4 | 5 | | ![屏幕1](../images/screen1.png) | ![屏幕2](../images/screen2.png) | 6 | | ------------------------------- | ------------------------------- | 7 | 8 | ## 课程 9 | 10 | 1. [HTML 模版与网页路由](../1-template-route/translations/README.md) 11 | 2. [建立登陆与注册表单](../2-forms/translations/README.md) 12 | 3. [取得并使用资料](../3-data/translations/README.md) 13 | 4. [状态管理的概念](../4-state-management/translations/README.md) 14 | 15 | ### 贡献者 16 | 17 | 这些课程是由 [Yohan Lasorsa](https://twitter.com/sinedied) 用满满的 ♥️ 來编写。 18 | 19 | 如果你有兴趣建立本课程使用的 [服务器 API](../api/translations/README.zh-tw.md)，你可以遵循[这一系列的视频](https://aka.ms/NodeBeginner)，特别是视频 17 到 21。 20 | 21 | 你也可以访问[这款互动式教学网站](https://aka.ms/learn/express-api)。 22 | -------------------------------------------------------------------------------- /7-bank-project/translations/README.zh-tw.md: -------------------------------------------------------------------------------- 1 | # :dollar: 建立銀行 2 | 3 | 在這個專案中，你會學習如何建立虛擬銀行。這些課程包含許多教程：設計網頁應用程式的格式、提供網頁路由、建立表單、管理狀態和利用 API 抓取銀行的資料。 4 | 5 | | ![畫面1](../images/screen1.png) | ![畫面2](../images/screen2.png) | 6 | |---------------------------------|-----------------------------------| 7 | 8 | ## 課程 9 | 10 | 1. [HTML 模板與網頁路由](../1-template-route/translations/README.md) 11 | 2. [建立登入與註冊表單](../2-forms/translations/README.md) 12 | 3. [取得並使用資料](../3-data/translations/README.md) 13 | 4. [狀態控管的概念](../4-state-management/translations/README.md) 14 | 15 | ### 參與人員 16 | 17 | 這些課程是由 [Yohan Lasorsa](https://twitter.com/sinedied) 用滿滿的 ♥️ 來編寫。 18 | 19 | 如果你有興趣建立本課程使用的[伺服器 API](../api/translations/README.zh-tw.md)，你可以遵循[這一系列的影片](https://aka.ms/NodeBeginner)，特別是影片 17 至 21。 20 | 21 | 你也可以造訪[這款互動式教學網站](https://aka.ms/learn/express-api)。 -------------------------------------------------------------------------------- /8-code-editor/images/after-codeswing-extension-pb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/after-codeswing-extension-pb.png -------------------------------------------------------------------------------- /8-code-editor/images/create-a-fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/create-a-fork.png -------------------------------------------------------------------------------- /8-code-editor/images/create-new-file-pb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/create-new-file-pb.png -------------------------------------------------------------------------------- /8-code-editor/images/create-new-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/create-new-file.png -------------------------------------------------------------------------------- /8-code-editor/images/default-vscode-dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/default-vscode-dev.png -------------------------------------------------------------------------------- /8-code-editor/images/edit-a-file-pb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/edit-a-file-pb.png -------------------------------------------------------------------------------- /8-code-editor/images/edit-a-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/edit-a-file.png -------------------------------------------------------------------------------- /8-code-editor/images/edit-vscode.dev.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/edit-vscode.dev.gif -------------------------------------------------------------------------------- /8-code-editor/images/extension-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/extension-details.png -------------------------------------------------------------------------------- /8-code-editor/images/extension-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/extension-settings.png -------------------------------------------------------------------------------- /8-code-editor/images/extensions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/extensions.png -------------------------------------------------------------------------------- /8-code-editor/images/install-extension.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/install-extension.gif -------------------------------------------------------------------------------- /8-code-editor/images/new-file-github.com.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/new-file-github.com.png -------------------------------------------------------------------------------- /8-code-editor/images/open-palette-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/open-palette-menu.png -------------------------------------------------------------------------------- /8-code-editor/images/open-remote-repository.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/open-remote-repository.png -------------------------------------------------------------------------------- /8-code-editor/images/palette-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/palette-menu.png -------------------------------------------------------------------------------- /8-code-editor/images/project-on-vscode.dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/project-on-vscode.dev.png -------------------------------------------------------------------------------- /8-code-editor/images/working-tree-pb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/working-tree-pb.png -------------------------------------------------------------------------------- /8-code-editor/images/working-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/8-code-editor/images/working-tree.png -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /SUPPORT.md: -------------------------------------------------------------------------------- 1 | # Support 2 | 3 | ## How to file issues and get help 4 | 5 | This project uses GitHub Issues to track bugs and feature requests. Please search the existing issues before filing new issues to avoid duplicates. For new issues, file your bug or feature request as a new Issue. 6 | 7 | For help and questions about using this project, please refer to [our contributing guidelines](CONTRIBUTING.md). 8 | 9 | ## Microsoft Support Policy 10 | 11 | Support for this project is limited to the resources listed above. 12 | -------------------------------------------------------------------------------- /_404.md: -------------------------------------------------------------------------------- 1 | # Work in progress 2 | 3 | We are working on this page. Please check back later. 4 | 5 | Open an [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) if you have any questions. 6 | 7 | **[Back home](/)** -------------------------------------------------------------------------------- /docs/_navbar.md: -------------------------------------------------------------------------------- 1 | - Translations 2 | - [English (United States)](./README) 3 | - [বাংলা](./README.bn) 4 | - [中文(中国)](./README.zh-cn) 5 | - [中文(台湾)](./README.zh-tw) 6 | - [Español](./README.es) 7 | - [Français](./README.fr) 8 | - [Ελληνικά](./README.el) 9 | - [हिन्दी](./README.hi) 10 | - [Bahasa Melayu](./README.ms) 11 | - [മലയാളം](./README.ml) 12 | - [தமிழ்](./README.ta) 13 | - [తెలుగు](./README.te) 14 | - [Bahasa Indonesia](./README.id) 15 | - [Italiano](./README.it) 16 | - [日本語](./README.ja) 17 | - [Nederlands](./README.nl) 18 | - [नेपाली](./README.np) 19 | - [Português](./README.pt) 20 | - [Русский](./README.ru) 21 | -------------------------------------------------------------------------------- /docsifytopdf.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | contents: ['docs/_sidebar.md'], // array of "table of contents" files path 3 | pathToPublic: 'pdf/readme.pdf', // path where pdf will stored 4 | pdfOptions: { 5 | margin: { top: '100px', bottom: '100px' } 6 | }, // reference: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions 7 | removeTemp: true, // remove generated .md and .html or not 8 | emulateMedia: 'print', // mediaType, emulating by puppeteer for rendering pdf, 'print' by default (reference: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulatemediamediatype) 9 | }; 10 | -------------------------------------------------------------------------------- /images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/images/background.png -------------------------------------------------------------------------------- /images/character.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/images/character.png -------------------------------------------------------------------------------- /images/clone_repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/images/clone_repo.png -------------------------------------------------------------------------------- /images/createcodespace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/images/createcodespace.png -------------------------------------------------------------------------------- /images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/images/favicon.png -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/images/screenshot.png -------------------------------------------------------------------------------- /images/web.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/images/web.gif -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | .app-nav ul li { 2 | width: max-content; 3 | } -------------------------------------------------------------------------------- /lesson-template/assignment.md: -------------------------------------------------------------------------------- 1 | # [Assignment Name] 2 | 3 | ## Instructions 4 | 5 | ## Rubric 6 | 7 | | Criteria | Exemplary | Adequate | Needs Improvement | 8 | | -------- | --------- | -------- | ----------------- | 9 | | | | | | 10 | -------------------------------------------------------------------------------- /lesson-template/translations/assignment.es.md: -------------------------------------------------------------------------------- 1 | # [Nombre de la asignación] 2 | 3 | ## Instrucciones 4 | 5 | ## Rúbrica 6 | 7 | | Criterio | Ejemplo | Adecuado | Necesita mejorar | 8 | | -------- | --------- | -------- | ----------------- | 9 | | | | | | 10 | -------------------------------------------------------------------------------- /lesson-template/translations/assignment.fr.md: -------------------------------------------------------------------------------- 1 | # [Nom de la Mission] 2 | 3 | ## Instructions 4 | 5 | ## Rubrique 6 | 7 | | Critère | Exemplaire | Adéquat | A Améliorer | 8 | | ------- | ---------- | ------- | ----------- | 9 | | | | | | -------------------------------------------------------------------------------- /lesson-template/translations/assignment.hi.md: -------------------------------------------------------------------------------- 1 | # [असाइनमेंटका नाम] 2 | 3 | ## अनुदेश 4 | 5 | ## शीर्ष 6 | 7 | | मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत | 8 | | ------ | ----------- | -------- | -------------- | 9 | | | | | | 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-dev-for-beginners", 3 | "version": "1.0.0", 4 | "description": "Web Dev for Beginners - A Curriculum", 5 | "main": "index.js", 6 | "scripts": { 7 | "convert": "node_modules/.bin/docsify-to-pdf" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/microsoft/Web-Dev-For-Beginners.git" 12 | }, 13 | "keywords": [ 14 | "web", 15 | "dev", 16 | "development", 17 | "curriculum" 18 | ], 19 | "author": "Microsoft Cloud Advocates", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/microsoft/Web-Dev-For-Beginners/issues" 23 | }, 24 | "homepage": "https://github.com/microsoft/Web-Dev-For-Beginners#readme", 25 | "devDependencies": { 26 | "docsify-to-pdf": "0.0.5" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /pdf/readme.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/pdf/readme.pdf -------------------------------------------------------------------------------- /quiz-app/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | module.exports = { 3 | root: true, 4 | 'extends': [ 5 | 'plugin:vue/vue3-essential', 6 | 'eslint:recommended' 7 | ], 8 | parserOptions: { 9 | ecmaVersion: 'latest' 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /quiz-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | .vscode 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | *.tsbuildinfo 31 | -------------------------------------------------------------------------------- /quiz-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /quiz-app/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | }, 7 | "exclude": ["node_modules", "dist"] 8 | } 9 | -------------------------------------------------------------------------------- /quiz-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quizapp", 3 | "version": "1.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" 11 | }, 12 | "dependencies": { 13 | "vue": "^3.4.29", 14 | "vue-router": "^4.3.3" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^5.2.4", 18 | "eslint": "^8.57.0", 19 | "eslint-plugin-vue": "^9.23.0", 20 | "vite": "^6.3.5" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /quiz-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/quiz-app/public/favicon.ico -------------------------------------------------------------------------------- /quiz-app/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /quiz-app/src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import './base.css'; 2 | 3 | #app { 4 | max-width: 1280px; 5 | margin: 0 auto; 6 | padding: 2rem; 7 | font-weight: normal; 8 | } 9 | 10 | a, 11 | .green { 12 | text-decoration: none; 13 | color: hsla(160, 100%, 37%, 1); 14 | transition: 0.4s; 15 | padding: 3px; 16 | } 17 | 18 | @media (hover: hover) { 19 | a:hover { 20 | background-color: hsla(160, 100%, 37%, 0.2); 21 | } 22 | } 23 | 24 | @media (min-width: 1024px) { 25 | body { 26 | display: flex; 27 | place-items: center; 28 | } 29 | 30 | #app { 31 | display: grid; 32 | grid-template-columns: 1fr 1fr; 33 | padding: 0 2rem; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /quiz-app/src/components/QuizGreeting.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | 43 | -------------------------------------------------------------------------------- /quiz-app/src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /quiz-app/src/main.js: -------------------------------------------------------------------------------- 1 | import './assets/main.css' 2 | 3 | import { createApp } from 'vue' 4 | import App from './App.vue' 5 | import router from './router' 6 | 7 | const app = createApp(App) 8 | 9 | app.use(router) 10 | 11 | app.mount('#app') 12 | -------------------------------------------------------------------------------- /quiz-app/src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from 'vue-router' 2 | import HomeView from '../views/HomeView.vue' 3 | import QuizComponent from '@/components/QuizComponent.vue' 4 | 5 | const router = createRouter({ 6 | history: createWebHistory(import.meta.env.BASE_URL), 7 | routes: [ 8 | { 9 | path: '/', 10 | name: 'home', 11 | component: HomeView 12 | }, 13 | { 14 | path: '/quiz/:id', 15 | name: 'quiz-detail', 16 | component: QuizComponent 17 | }, 18 | { 19 | path: '/about', 20 | name: 'about', 21 | // route level code-splitting 22 | // this generates a separate chunk (About.[hash].js) for this route 23 | // which is lazy-loaded when the route is visited. 24 | component: () => import('../views/AboutView.vue') 25 | } 26 | ] 27 | }) 28 | 29 | export default router 30 | -------------------------------------------------------------------------------- /quiz-app/src/views/AboutView.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | -------------------------------------------------------------------------------- /quiz-app/src/views/HomeView.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /quiz-app/vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | ], 11 | resolve: { 12 | alias: { 13 | '@': fileURLToPath(new URL('./src', import.meta.url)) 14 | } 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /sketchnotes/browser.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/browser.jpg -------------------------------------------------------------------------------- /sketchnotes/webdev101-a11y.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-a11y.png -------------------------------------------------------------------------------- /sketchnotes/webdev101-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-css.png -------------------------------------------------------------------------------- /sketchnotes/webdev101-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-github.png -------------------------------------------------------------------------------- /sketchnotes/webdev101-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-html.png -------------------------------------------------------------------------------- /sketchnotes/webdev101-js-arrays.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-js-arrays.png -------------------------------------------------------------------------------- /sketchnotes/webdev101-js-datatypes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-js-datatypes.png -------------------------------------------------------------------------------- /sketchnotes/webdev101-js-decisions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-js-decisions.png -------------------------------------------------------------------------------- /sketchnotes/webdev101-js-functions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-js-functions.png -------------------------------------------------------------------------------- /sketchnotes/webdev101-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-js.png -------------------------------------------------------------------------------- /sketchnotes/webdev101-programming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/sketchnotes/webdev101-programming.png -------------------------------------------------------------------------------- /teaching-files/canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/teaching-files/canvas.png -------------------------------------------------------------------------------- /teaching-files/moodle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/teaching-files/moodle.png -------------------------------------------------------------------------------- /teaching-files/webdev-common-cartridge.imscc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/teaching-files/webdev-common-cartridge.imscc -------------------------------------------------------------------------------- /teaching-files/webdev-moodle.mbz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/4ccb645e245bda86865572ddb162b78c7da393b9/teaching-files/webdev-moodle.mbz --------------------------------------------------------------------------------