diff --git a/collections/a-minimal-ui-for-filtering-flight-search-results/README.md b/Archive/a-minimal-ui-for-filtering-flight-search-results/README.md similarity index 100% rename from collections/a-minimal-ui-for-filtering-flight-search-results/README.md rename to Archive/a-minimal-ui-for-filtering-flight-search-results/README.md diff --git a/collections/a-minimal-ui-for-filtering-flight-search-results/index.html b/Archive/a-minimal-ui-for-filtering-flight-search-results/index.html similarity index 100% rename from collections/a-minimal-ui-for-filtering-flight-search-results/index.html rename to Archive/a-minimal-ui-for-filtering-flight-search-results/index.html diff --git a/basic-introduction-html-css/css-and-styling-structure/README.md b/Archive/basic-introduction-html-css/css-and-styling-structure/README.md similarity index 100% rename from basic-introduction-html-css/css-and-styling-structure/README.md rename to Archive/basic-introduction-html-css/css-and-styling-structure/README.md diff --git a/basic-introduction-html-css/css-classes-and-selectors/README.md b/Archive/basic-introduction-html-css/css-classes-and-selectors/README.md similarity index 100% rename from basic-introduction-html-css/css-classes-and-selectors/README.md rename to Archive/basic-introduction-html-css/css-classes-and-selectors/README.md diff --git a/basic-introduction-html-css/css-styling-overrides/README.md b/Archive/basic-introduction-html-css/css-styling-overrides/README.md similarity index 100% rename from basic-introduction-html-css/css-styling-overrides/README.md rename to Archive/basic-introduction-html-css/css-styling-overrides/README.md diff --git a/basic-introduction-html-css/html-css-js-comments/README.md b/Archive/basic-introduction-html-css/html-css-js-comments/README.md similarity index 100% rename from basic-introduction-html-css/html-css-js-comments/README.md rename to Archive/basic-introduction-html-css/html-css-js-comments/README.md diff --git a/basic-introduction-html-css/html-elements/README.md b/Archive/basic-introduction-html-css/html-elements/README.md similarity index 100% rename from basic-introduction-html-css/html-elements/README.md rename to Archive/basic-introduction-html-css/html-elements/README.md diff --git a/basic-introduction-html-css/html-semantics/README.md b/Archive/basic-introduction-html-css/html-semantics/README.md similarity index 100% rename from basic-introduction-html-css/html-semantics/README.md rename to Archive/basic-introduction-html-css/html-semantics/README.md diff --git a/basic-introduction-html-css/learn-more-about-html/README.md b/Archive/basic-introduction-html-css/learn-more-about-html/README.md similarity index 100% rename from basic-introduction-html-css/learn-more-about-html/README.md rename to Archive/basic-introduction-html-css/learn-more-about-html/README.md diff --git a/basic-introduction-html-css/linking-pages-and-elements/README.md b/Archive/basic-introduction-html-css/linking-pages-and-elements/README.md similarity index 100% rename from basic-introduction-html-css/linking-pages-and-elements/README.md rename to Archive/basic-introduction-html-css/linking-pages-and-elements/README.md diff --git a/basic-introduction-html-css/putting-together-html-css-js/README.md b/Archive/basic-introduction-html-css/putting-together-html-css-js/README.md similarity index 100% rename from basic-introduction-html-css/putting-together-html-css-js/README.md rename to Archive/basic-introduction-html-css/putting-together-html-css-js/README.md diff --git a/building-a-game-with-canvas/absolute-and-relative-file-paths/README.md b/Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/README.md similarity index 100% rename from building-a-game-with-canvas/absolute-and-relative-file-paths/README.md rename to Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/README.md diff --git a/building-a-game-with-canvas/absolute-and-relative-file-paths/images/idle.png b/Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/images/idle.png similarity index 100% rename from building-a-game-with-canvas/absolute-and-relative-file-paths/images/idle.png rename to Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/images/idle.png diff --git a/building-a-game-with-canvas/absolute-and-relative-file-paths/index.html b/Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/index.html similarity index 100% rename from building-a-game-with-canvas/absolute-and-relative-file-paths/index.html rename to Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/index.html diff --git a/building-a-game-with-canvas/absolute-and-relative-file-paths/main.js b/Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/main.js similarity index 100% rename from building-a-game-with-canvas/absolute-and-relative-file-paths/main.js rename to Archive/building-a-game-with-canvas/absolute-and-relative-file-paths/main.js diff --git a/building-a-game-with-canvas/animating-with-images/README.md b/Archive/building-a-game-with-canvas/animating-with-images/README.md similarity index 100% rename from building-a-game-with-canvas/animating-with-images/README.md rename to Archive/building-a-game-with-canvas/animating-with-images/README.md diff --git a/building-a-game-with-canvas/animating-with-images/final.js b/Archive/building-a-game-with-canvas/animating-with-images/final.js similarity index 100% rename from building-a-game-with-canvas/animating-with-images/final.js rename to Archive/building-a-game-with-canvas/animating-with-images/final.js diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/1.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/1.png similarity index 100% rename from building-a-game-with-canvas/animating-with-images/images/idle/1.png rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/1.png diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/2.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/2.png similarity index 100% rename from building-a-game-with-canvas/animating-with-images/images/idle/2.png rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/2.png diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/3.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/3.png similarity index 100% rename from building-a-game-with-canvas/animating-with-images/images/idle/3.png rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/3.png diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/4.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/4.png similarity index 100% rename from building-a-game-with-canvas/animating-with-images/images/idle/4.png rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/4.png diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/5.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/5.png similarity index 100% rename from building-a-game-with-canvas/animating-with-images/images/idle/5.png rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/5.png diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/6.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/6.png similarity index 100% rename from building-a-game-with-canvas/animating-with-images/images/idle/6.png rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/6.png diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/7.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/7.png similarity index 100% rename from building-a-game-with-canvas/animating-with-images/images/idle/7.png rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/7.png diff --git a/building-a-game-with-canvas/animating-with-images/images/idle/8.png b/Archive/building-a-game-with-canvas/animating-with-images/images/idle/8.png similarity index 100% rename from building-a-game-with-canvas/animating-with-images/images/idle/8.png rename to Archive/building-a-game-with-canvas/animating-with-images/images/idle/8.png diff --git a/building-a-game-with-canvas/animating-with-images/index.html b/Archive/building-a-game-with-canvas/animating-with-images/index.html similarity index 100% rename from building-a-game-with-canvas/animating-with-images/index.html rename to Archive/building-a-game-with-canvas/animating-with-images/index.html diff --git a/building-a-game-with-canvas/animating-with-images/main.js b/Archive/building-a-game-with-canvas/animating-with-images/main.js similarity index 100% rename from building-a-game-with-canvas/animating-with-images/main.js rename to Archive/building-a-game-with-canvas/animating-with-images/main.js diff --git a/building-a-game-with-canvas/dynamic-drawings/README.md b/Archive/building-a-game-with-canvas/dynamic-drawings/README.md similarity index 100% rename from building-a-game-with-canvas/dynamic-drawings/README.md rename to Archive/building-a-game-with-canvas/dynamic-drawings/README.md diff --git a/building-a-game-with-canvas/dynamic-drawings/final.js b/Archive/building-a-game-with-canvas/dynamic-drawings/final.js similarity index 100% rename from building-a-game-with-canvas/dynamic-drawings/final.js rename to Archive/building-a-game-with-canvas/dynamic-drawings/final.js diff --git a/building-a-game-with-canvas/dynamic-drawings/index.html b/Archive/building-a-game-with-canvas/dynamic-drawings/index.html similarity index 100% rename from building-a-game-with-canvas/dynamic-drawings/index.html rename to Archive/building-a-game-with-canvas/dynamic-drawings/index.html diff --git a/building-a-game-with-canvas/dynamic-drawings/main.js b/Archive/building-a-game-with-canvas/dynamic-drawings/main.js similarity index 100% rename from building-a-game-with-canvas/dynamic-drawings/main.js rename to Archive/building-a-game-with-canvas/dynamic-drawings/main.js diff --git a/building-a-game-with-canvas/first-steps-with-canvas/README.md b/Archive/building-a-game-with-canvas/first-steps-with-canvas/README.md similarity index 100% rename from building-a-game-with-canvas/first-steps-with-canvas/README.md rename to Archive/building-a-game-with-canvas/first-steps-with-canvas/README.md diff --git a/building-a-game-with-canvas/first-steps-with-canvas/index.html b/Archive/building-a-game-with-canvas/first-steps-with-canvas/index.html similarity index 100% rename from building-a-game-with-canvas/first-steps-with-canvas/index.html rename to Archive/building-a-game-with-canvas/first-steps-with-canvas/index.html diff --git a/building-a-game-with-canvas/first-steps-with-canvas/main.js b/Archive/building-a-game-with-canvas/first-steps-with-canvas/main.js similarity index 100% rename from building-a-game-with-canvas/first-steps-with-canvas/main.js rename to Archive/building-a-game-with-canvas/first-steps-with-canvas/main.js diff --git a/building-a-game-with-canvas/install-node-js/README.md b/Archive/building-a-game-with-canvas/install-node-js/README.md similarity index 100% rename from building-a-game-with-canvas/install-node-js/README.md rename to Archive/building-a-game-with-canvas/install-node-js/README.md diff --git a/building-a-game-with-canvas/intro/README.md b/Archive/building-a-game-with-canvas/intro/README.md similarity index 100% rename from building-a-game-with-canvas/intro/README.md rename to Archive/building-a-game-with-canvas/intro/README.md diff --git a/building-a-game-with-canvas/loading-external-images/README.md b/Archive/building-a-game-with-canvas/loading-external-images/README.md similarity index 100% rename from building-a-game-with-canvas/loading-external-images/README.md rename to Archive/building-a-game-with-canvas/loading-external-images/README.md diff --git a/building-a-game-with-canvas/loading-external-images/images/idle.png b/Archive/building-a-game-with-canvas/loading-external-images/images/idle.png similarity index 100% rename from building-a-game-with-canvas/loading-external-images/images/idle.png rename to Archive/building-a-game-with-canvas/loading-external-images/images/idle.png diff --git a/building-a-game-with-canvas/loading-external-images/index.html b/Archive/building-a-game-with-canvas/loading-external-images/index.html similarity index 100% rename from building-a-game-with-canvas/loading-external-images/index.html rename to Archive/building-a-game-with-canvas/loading-external-images/index.html diff --git a/building-a-game-with-canvas/loading-external-images/main.js b/Archive/building-a-game-with-canvas/loading-external-images/main.js similarity index 100% rename from building-a-game-with-canvas/loading-external-images/main.js rename to Archive/building-a-game-with-canvas/loading-external-images/main.js diff --git a/building-a-game-with-canvas/loading-multiple-animations/README.md b/Archive/building-a-game-with-canvas/loading-multiple-animations/README.md similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/README.md rename to Archive/building-a-game-with-canvas/loading-multiple-animations/README.md diff --git a/building-a-game-with-canvas/loading-multiple-animations/final.js b/Archive/building-a-game-with-canvas/loading-multiple-animations/final.js similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/final.js rename to Archive/building-a-game-with-canvas/loading-multiple-animations/final.js diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/1.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/1.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/1.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/1.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/2.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/2.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/2.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/2.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/3.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/3.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/3.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/3.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/4.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/4.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/4.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/4.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/5.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/5.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/5.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/5.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/6.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/6.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/6.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/6.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/7.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/7.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/7.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/7.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/idle/8.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/8.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/idle/8.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/idle/8.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/1.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/1.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/1.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/1.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/2.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/2.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/2.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/2.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/3.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/3.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/3.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/3.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/4.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/4.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/4.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/4.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/5.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/5.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/5.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/5.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/6.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/6.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/6.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/6.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/kick/7.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/7.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/kick/7.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/kick/7.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/1.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/1.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/1.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/1.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/2.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/2.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/2.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/2.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/3.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/3.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/3.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/3.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/4.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/4.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/4.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/4.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/5.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/5.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/5.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/5.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/6.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/6.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/6.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/6.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/images/punch/7.png b/Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/7.png similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/images/punch/7.png rename to Archive/building-a-game-with-canvas/loading-multiple-animations/images/punch/7.png diff --git a/building-a-game-with-canvas/loading-multiple-animations/index.html b/Archive/building-a-game-with-canvas/loading-multiple-animations/index.html similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/index.html rename to Archive/building-a-game-with-canvas/loading-multiple-animations/index.html diff --git a/building-a-game-with-canvas/loading-multiple-animations/main.js b/Archive/building-a-game-with-canvas/loading-multiple-animations/main.js similarity index 100% rename from building-a-game-with-canvas/loading-multiple-animations/main.js rename to Archive/building-a-game-with-canvas/loading-multiple-animations/main.js diff --git a/building-a-game-with-canvas/martial-arts-sim-intro/README.md b/Archive/building-a-game-with-canvas/martial-arts-sim-intro/README.md similarity index 100% rename from building-a-game-with-canvas/martial-arts-sim-intro/README.md rename to Archive/building-a-game-with-canvas/martial-arts-sim-intro/README.md diff --git a/building-a-game-with-canvas/taking-control/README.md b/Archive/building-a-game-with-canvas/taking-control/README.md similarity index 100% rename from building-a-game-with-canvas/taking-control/README.md rename to Archive/building-a-game-with-canvas/taking-control/README.md diff --git a/building-a-game-with-canvas/taking-control/final.js b/Archive/building-a-game-with-canvas/taking-control/final.js similarity index 100% rename from building-a-game-with-canvas/taking-control/final.js rename to Archive/building-a-game-with-canvas/taking-control/final.js diff --git a/building-a-game-with-canvas/taking-control/images/background.jpg b/Archive/building-a-game-with-canvas/taking-control/images/background.jpg similarity index 100% rename from building-a-game-with-canvas/taking-control/images/background.jpg rename to Archive/building-a-game-with-canvas/taking-control/images/background.jpg diff --git a/building-a-game-with-canvas/taking-control/images/backward/1.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/1.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/backward/1.png rename to Archive/building-a-game-with-canvas/taking-control/images/backward/1.png diff --git a/building-a-game-with-canvas/taking-control/images/backward/2.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/2.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/backward/2.png rename to Archive/building-a-game-with-canvas/taking-control/images/backward/2.png diff --git a/building-a-game-with-canvas/taking-control/images/backward/3.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/3.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/backward/3.png rename to Archive/building-a-game-with-canvas/taking-control/images/backward/3.png diff --git a/building-a-game-with-canvas/taking-control/images/backward/4.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/4.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/backward/4.png rename to Archive/building-a-game-with-canvas/taking-control/images/backward/4.png diff --git a/building-a-game-with-canvas/taking-control/images/backward/5.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/5.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/backward/5.png rename to Archive/building-a-game-with-canvas/taking-control/images/backward/5.png diff --git a/building-a-game-with-canvas/taking-control/images/backward/6.png b/Archive/building-a-game-with-canvas/taking-control/images/backward/6.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/backward/6.png rename to Archive/building-a-game-with-canvas/taking-control/images/backward/6.png diff --git a/building-a-game-with-canvas/taking-control/images/block/1.png b/Archive/building-a-game-with-canvas/taking-control/images/block/1.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/block/1.png rename to Archive/building-a-game-with-canvas/taking-control/images/block/1.png diff --git a/building-a-game-with-canvas/taking-control/images/block/2.png b/Archive/building-a-game-with-canvas/taking-control/images/block/2.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/block/2.png rename to Archive/building-a-game-with-canvas/taking-control/images/block/2.png diff --git a/building-a-game-with-canvas/taking-control/images/block/3.png b/Archive/building-a-game-with-canvas/taking-control/images/block/3.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/block/3.png rename to Archive/building-a-game-with-canvas/taking-control/images/block/3.png diff --git a/building-a-game-with-canvas/taking-control/images/block/4.png b/Archive/building-a-game-with-canvas/taking-control/images/block/4.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/block/4.png rename to Archive/building-a-game-with-canvas/taking-control/images/block/4.png diff --git a/building-a-game-with-canvas/taking-control/images/block/5.png b/Archive/building-a-game-with-canvas/taking-control/images/block/5.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/block/5.png rename to Archive/building-a-game-with-canvas/taking-control/images/block/5.png diff --git a/building-a-game-with-canvas/taking-control/images/block/6.png b/Archive/building-a-game-with-canvas/taking-control/images/block/6.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/block/6.png rename to Archive/building-a-game-with-canvas/taking-control/images/block/6.png diff --git a/building-a-game-with-canvas/taking-control/images/block/7.png b/Archive/building-a-game-with-canvas/taking-control/images/block/7.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/block/7.png rename to Archive/building-a-game-with-canvas/taking-control/images/block/7.png diff --git a/building-a-game-with-canvas/taking-control/images/block/8.png b/Archive/building-a-game-with-canvas/taking-control/images/block/8.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/block/8.png rename to Archive/building-a-game-with-canvas/taking-control/images/block/8.png diff --git a/building-a-game-with-canvas/taking-control/images/block/9.png b/Archive/building-a-game-with-canvas/taking-control/images/block/9.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/block/9.png rename to Archive/building-a-game-with-canvas/taking-control/images/block/9.png diff --git a/building-a-game-with-canvas/taking-control/images/forward/1.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/1.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/forward/1.png rename to Archive/building-a-game-with-canvas/taking-control/images/forward/1.png diff --git a/building-a-game-with-canvas/taking-control/images/forward/2.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/2.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/forward/2.png rename to Archive/building-a-game-with-canvas/taking-control/images/forward/2.png diff --git a/building-a-game-with-canvas/taking-control/images/forward/3.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/3.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/forward/3.png rename to Archive/building-a-game-with-canvas/taking-control/images/forward/3.png diff --git a/building-a-game-with-canvas/taking-control/images/forward/4.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/4.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/forward/4.png rename to Archive/building-a-game-with-canvas/taking-control/images/forward/4.png diff --git a/building-a-game-with-canvas/taking-control/images/forward/5.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/5.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/forward/5.png rename to Archive/building-a-game-with-canvas/taking-control/images/forward/5.png diff --git a/building-a-game-with-canvas/taking-control/images/forward/6.png b/Archive/building-a-game-with-canvas/taking-control/images/forward/6.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/forward/6.png rename to Archive/building-a-game-with-canvas/taking-control/images/forward/6.png diff --git a/building-a-game-with-canvas/taking-control/images/idle/1.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/1.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/idle/1.png rename to Archive/building-a-game-with-canvas/taking-control/images/idle/1.png diff --git a/building-a-game-with-canvas/taking-control/images/idle/2.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/2.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/idle/2.png rename to Archive/building-a-game-with-canvas/taking-control/images/idle/2.png diff --git a/building-a-game-with-canvas/taking-control/images/idle/3.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/3.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/idle/3.png rename to Archive/building-a-game-with-canvas/taking-control/images/idle/3.png diff --git a/building-a-game-with-canvas/taking-control/images/idle/4.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/4.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/idle/4.png rename to Archive/building-a-game-with-canvas/taking-control/images/idle/4.png diff --git a/building-a-game-with-canvas/taking-control/images/idle/5.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/5.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/idle/5.png rename to Archive/building-a-game-with-canvas/taking-control/images/idle/5.png diff --git a/building-a-game-with-canvas/taking-control/images/idle/6.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/6.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/idle/6.png rename to Archive/building-a-game-with-canvas/taking-control/images/idle/6.png diff --git a/building-a-game-with-canvas/taking-control/images/idle/7.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/7.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/idle/7.png rename to Archive/building-a-game-with-canvas/taking-control/images/idle/7.png diff --git a/building-a-game-with-canvas/taking-control/images/idle/8.png b/Archive/building-a-game-with-canvas/taking-control/images/idle/8.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/idle/8.png rename to Archive/building-a-game-with-canvas/taking-control/images/idle/8.png diff --git a/building-a-game-with-canvas/taking-control/images/kick/1.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/1.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/kick/1.png rename to Archive/building-a-game-with-canvas/taking-control/images/kick/1.png diff --git a/building-a-game-with-canvas/taking-control/images/kick/2.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/2.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/kick/2.png rename to Archive/building-a-game-with-canvas/taking-control/images/kick/2.png diff --git a/building-a-game-with-canvas/taking-control/images/kick/3.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/3.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/kick/3.png rename to Archive/building-a-game-with-canvas/taking-control/images/kick/3.png diff --git a/building-a-game-with-canvas/taking-control/images/kick/4.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/4.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/kick/4.png rename to Archive/building-a-game-with-canvas/taking-control/images/kick/4.png diff --git a/building-a-game-with-canvas/taking-control/images/kick/5.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/5.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/kick/5.png rename to Archive/building-a-game-with-canvas/taking-control/images/kick/5.png diff --git a/building-a-game-with-canvas/taking-control/images/kick/6.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/6.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/kick/6.png rename to Archive/building-a-game-with-canvas/taking-control/images/kick/6.png diff --git a/building-a-game-with-canvas/taking-control/images/kick/7.png b/Archive/building-a-game-with-canvas/taking-control/images/kick/7.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/kick/7.png rename to Archive/building-a-game-with-canvas/taking-control/images/kick/7.png diff --git a/building-a-game-with-canvas/taking-control/images/punch/1.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/1.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/punch/1.png rename to Archive/building-a-game-with-canvas/taking-control/images/punch/1.png diff --git a/building-a-game-with-canvas/taking-control/images/punch/2.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/2.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/punch/2.png rename to Archive/building-a-game-with-canvas/taking-control/images/punch/2.png diff --git a/building-a-game-with-canvas/taking-control/images/punch/3.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/3.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/punch/3.png rename to Archive/building-a-game-with-canvas/taking-control/images/punch/3.png diff --git a/building-a-game-with-canvas/taking-control/images/punch/4.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/4.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/punch/4.png rename to Archive/building-a-game-with-canvas/taking-control/images/punch/4.png diff --git a/building-a-game-with-canvas/taking-control/images/punch/5.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/5.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/punch/5.png rename to Archive/building-a-game-with-canvas/taking-control/images/punch/5.png diff --git a/building-a-game-with-canvas/taking-control/images/punch/6.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/6.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/punch/6.png rename to Archive/building-a-game-with-canvas/taking-control/images/punch/6.png diff --git a/building-a-game-with-canvas/taking-control/images/punch/7.png b/Archive/building-a-game-with-canvas/taking-control/images/punch/7.png similarity index 100% rename from building-a-game-with-canvas/taking-control/images/punch/7.png rename to Archive/building-a-game-with-canvas/taking-control/images/punch/7.png diff --git a/building-a-game-with-canvas/taking-control/index.html b/Archive/building-a-game-with-canvas/taking-control/index.html similarity index 100% rename from building-a-game-with-canvas/taking-control/index.html rename to Archive/building-a-game-with-canvas/taking-control/index.html diff --git a/building-a-game-with-canvas/taking-control/main.js b/Archive/building-a-game-with-canvas/taking-control/main.js similarity index 100% rename from building-a-game-with-canvas/taking-control/main.js rename to Archive/building-a-game-with-canvas/taking-control/main.js diff --git a/building-a-game-with-canvas/using-callbacks/README.md b/Archive/building-a-game-with-canvas/using-callbacks/README.md similarity index 100% rename from building-a-game-with-canvas/using-callbacks/README.md rename to Archive/building-a-game-with-canvas/using-callbacks/README.md diff --git a/building-a-game-with-canvas/using-callbacks/final.js b/Archive/building-a-game-with-canvas/using-callbacks/final.js similarity index 100% rename from building-a-game-with-canvas/using-callbacks/final.js rename to Archive/building-a-game-with-canvas/using-callbacks/final.js diff --git a/building-a-game-with-canvas/using-callbacks/images/idle.png b/Archive/building-a-game-with-canvas/using-callbacks/images/idle.png similarity index 100% rename from building-a-game-with-canvas/using-callbacks/images/idle.png rename to Archive/building-a-game-with-canvas/using-callbacks/images/idle.png diff --git a/building-a-game-with-canvas/using-callbacks/index.html b/Archive/building-a-game-with-canvas/using-callbacks/index.html similarity index 100% rename from building-a-game-with-canvas/using-callbacks/index.html rename to Archive/building-a-game-with-canvas/using-callbacks/index.html diff --git a/building-a-game-with-canvas/using-callbacks/main.js b/Archive/building-a-game-with-canvas/using-callbacks/main.js similarity index 100% rename from building-a-game-with-canvas/using-callbacks/main.js rename to Archive/building-a-game-with-canvas/using-callbacks/main.js diff --git a/building-web-forms/creating-form-validations/README.md b/Archive/building-web-forms/creating-form-validations/README.md similarity index 100% rename from building-web-forms/creating-form-validations/README.md rename to Archive/building-web-forms/creating-form-validations/README.md diff --git a/building-web-forms/creating-your-first-form/README.md b/Archive/building-web-forms/creating-your-first-form/README.md similarity index 100% rename from building-web-forms/creating-your-first-form/README.md rename to Archive/building-web-forms/creating-your-first-form/README.md diff --git a/building-web-forms/creating-your-first-form/sample_user_form.jpg b/Archive/building-web-forms/creating-your-first-form/sample_user_form.jpg similarity index 100% rename from building-web-forms/creating-your-first-form/sample_user_form.jpg rename to Archive/building-web-forms/creating-your-first-form/sample_user_form.jpg diff --git a/building-web-forms/form-and-form-elements/README.md b/Archive/building-web-forms/form-and-form-elements/README.md similarity index 100% rename from building-web-forms/form-and-form-elements/README.md rename to Archive/building-web-forms/form-and-form-elements/README.md diff --git a/building-web-forms/learn-more-forms/README.md b/Archive/building-web-forms/learn-more-forms/README.md similarity index 100% rename from building-web-forms/learn-more-forms/README.md rename to Archive/building-web-forms/learn-more-forms/README.md diff --git a/building-web-forms/load-from-web-storage/README.md b/Archive/building-web-forms/load-from-web-storage/README.md similarity index 100% rename from building-web-forms/load-from-web-storage/README.md rename to Archive/building-web-forms/load-from-web-storage/README.md diff --git a/building-web-forms/submitting-user-data/README.md b/Archive/building-web-forms/submitting-user-data/README.md similarity index 100% rename from building-web-forms/submitting-user-data/README.md rename to Archive/building-web-forms/submitting-user-data/README.md diff --git a/building-web-forms/web-storage/README.md b/Archive/building-web-forms/web-storage/README.md similarity index 100% rename from building-web-forms/web-storage/README.md rename to Archive/building-web-forms/web-storage/README.md diff --git a/building-web-forms/why-html-forms/README.md b/Archive/building-web-forms/why-html-forms/README.md similarity index 100% rename from building-web-forms/why-html-forms/README.md rename to Archive/building-web-forms/why-html-forms/README.md diff --git a/capstone-project/README.md b/Archive/capstone-project/README.md similarity index 100% rename from capstone-project/README.md rename to Archive/capstone-project/README.md diff --git a/functions/need-additional-help/README.md b/Archive/functions/need-additional-help/README.md similarity index 100% rename from functions/need-additional-help/README.md rename to Archive/functions/need-additional-help/README.md diff --git a/functions/need-additional-help/final.js b/Archive/functions/need-additional-help/final.js similarity index 100% rename from functions/need-additional-help/final.js rename to Archive/functions/need-additional-help/final.js diff --git a/introduction/how-to-get-help/README.md b/Archive/introduction/how-to-get-help/README.md similarity index 100% rename from introduction/how-to-get-help/README.md rename to Archive/introduction/how-to-get-help/README.md diff --git a/Archive/introduction/how-to-get-help/revised-community-guideline/README.md b/Archive/introduction/how-to-get-help/revised-community-guideline/README.md new file mode 100644 index 0000000..c3ffffb --- /dev/null +++ b/Archive/introduction/how-to-get-help/revised-community-guideline/README.md @@ -0,0 +1,91 @@ +# Thriving in Our Programming Community + +As you embark on your journey in the landscape of programming, it's essential to recognize that you're not alone. The vast programming community is here to support and enrich your experience every step of the way. Your achievement lies in the interconnected community that shapes it. In this lesson, we'll delve into the significance of engaging actively with the programming community and how it can improve your coding skills to new heights. + +## The Power of Programming Communities + +Coding is an art which thrives on collaboration and shared knowledge. By immersing yourself in the programming community, you open doors to a world of collective expertise. Whether you're working on a complex algorithm or seeking guidance on best practices, the community is your go-to resource. + +The programming community facilitates: + +1. **Collaboration**: Bringing together diverse minds can lead to innovative solutions that an individual might not have considered. +2. **Learning from Others**: Exploring different perspectives helps you grasp concepts faster and broadens your understanding. +3. **Problem Solving**: Tackling coding challenges becomes smoother with the input and insights of fellow programmers. + +The sense of community has a huge impact on human advancement. Here is a [TedX](https://www.youtube.com/watch?v=7yNl-AsQRRw) session about how communities help each other create an exponential impact. An impact not just on your path, but in the path of other people who work along with you too. You are an important part of the community we seek to develop, as an important part of this future, we urge you to be inclusive and help us build this into an impactful ecosystem + + +## Discord: The Platform for Building Our Coding Community + +At the heart of our community lies Discord, a versatile and powerful platform that enhances your coding experience in numerous ways: + +1. **Real-time Communication**: Discord provides an interactive space for instant discussions, allowing you to seek help and share insights without delay. +2. **Dedicated Channels**: Organized channels for specific topics, projects, and interests enable focused conversations & knowledge sharing. +3. **Support**: A support pipeline of dedicated staff, who are available to answer and offer a helping hand for all your questions and queries related to the course. +4. **Network**: A network for communication with all the students and alumni taking our courses from across the country. Opening gates to conversations related to your programming stories and problems/solutions you have faced during your learning experience and a network of other developers. + +## Open Source Platforms: Pillars of Collaboration + +Several open-source platforms serve as pillars of collaboration, enabling programmers to contribute, learn, and grow together: + +- **[GitHub](https://github.com)**: A hub for collaborative coding, version control, and open-source project hosting. +- **[Stackoverflow](https://stackoverflow.com/)**: A platform that supports shared coding endeavors, fostering a strong developer community. + + +## Embracing the Coding Community Philosophy + +Engaging in the programming community requires adopting a set of principles that promote mutual growth and respect: + +1. **Inclusivity and Respect**: Every voice matters; create an environment where all feel valued and heard. +2. **Active Participation**: Engage in discussions, code reviews, and collaborative projects to contribute and learn. +3. **Giving and Receiving**: Embrace mentorship and offer assistance to fellow programmers, fostering a culture of support. +4. **Continuous Learning**: Develop a growth mindset by learning from peers and seeking constructive feedback. + +## Graduate attribute for Web development professionals + +While going through your web developpment courses, students will be exposed to a range of attributes that are of highly valued in the programming community across the globe. And are some necessary aspects for the web development professionals. It is important that you take note of these values and focus to build up on these skills as you approach your professional path in the area of web development. Use the discord community and intiate conversations about these topics with your fellow learners. + +1. **Comprehensive Web skills** : Develop mastery in HTML,CSS & JS, and other web technologies, enabling you to develop complex and responsive web solutions. +2. **Full-stack proficiency** : Acquire front-end and back-end expertise, integrating databases and APIs to build complete web applications. +3. **Problem-Solving Mastery** : Analyze and practise complex technical issues, enhancing your ability to created optimized solutions. +4. **Effective Collaboration** : Utilize Git for version control and teamwork, communicating and contributing effectively within development groups. +5.**User-Focused Design**: Learn about UI/UX and design principles and understant the importance of catering intelligent user interfaces. +6. **Security and Ethical Awareness** : Learn about security measures, prioritizing data privacy, and adhere to ethical standards while showcasing professionalism and accountability. + +Here is a [reference link](https://www.ugc.gov.in/e-book/locf/mobile/index.html#p=7), go to page number 6 to read more about graduate attributes._ + + +## Behavioral Rules and Standards + +To ensure a positive and productive experience within the programming community, we adhere to the following behavioral rules and standards: + +1. **Respectful Communication**: Treat all community members with courtesy and respect. Avoid offensive language, personal attacks, and discriminatory remarks. + +2. **Constructive Criticism**: Provide feedback in a constructive manner, focusing on the code and ideas rather than attacking individuals. + +3. **Collaborative Environment**: Embrace collaboration, share insights, and engage in healthy discussions to promote collective learning. + +4. **Plagiarism-Free Zone**: Give credit where it's due and refrain from submitting others' work as your own. Plagiarism undermines the spirit of learning and growth. + +5. **Inclusivity and Diversity**: Embrace diversity of backgrounds, experiences, and perspectives. Our community is strengthened by its rich tapestry of voices. + +6. **Helping Others**: Contribute positively by assisting fellow members, particularly those who are newer to coding. A helping hand can make a significant impact. + +7. **Adherence to Platform Guidelines**: Respect the guidelines of the platforms we use, such as GitHub and GitLab, when contributing to projects. + +## Resources for Cultivating Your Coding Community Involvement + + +Remember community engagement is all about sharing, do not refrain from sharing whenever you come across something interesting, that might intrigue your fellow programmers. To start with consider exploring these resources that we would like to share with you: + + +* The Mythical Man-Month Book by Fred Brooks : An interesting read about software development, presenting some ideas about second-system effect and advocacy of prototyping. + +* [Some interesting project ideas for when you are done with our WD courses.](https://www.crio.do/projects/category/web-development-projects/) + + +In your coding journey, remember that the programming community is your steadfast companion. Engage, collaborate, and share on the discord channel, and contribute to the community that will shape your path to success. + +[Community meme](https://img.devrant.com/devrant/rant/r_660997_XfjvN.jpg) + + diff --git a/introduction/install-prettier-plugin-in-vscode/README.md b/Archive/introduction/install-prettier-plugin-in-vscode/README.md similarity index 100% rename from introduction/install-prettier-plugin-in-vscode/README.md rename to Archive/introduction/install-prettier-plugin-in-vscode/README.md diff --git a/introduction/install-prettier-plugin-in-vscode/format.js b/Archive/introduction/install-prettier-plugin-in-vscode/format.js similarity index 100% rename from introduction/install-prettier-plugin-in-vscode/format.js rename to Archive/introduction/install-prettier-plugin-in-vscode/format.js diff --git a/introduction/installing-ubuntu-linux-using-virtualbox/README.md b/Archive/introduction/installing-ubuntu-linux-using-virtualbox/README.md similarity index 100% rename from introduction/installing-ubuntu-linux-using-virtualbox/README.md rename to Archive/introduction/installing-ubuntu-linux-using-virtualbox/README.md diff --git a/introduction/installing-ubuntu-linux-using-wsl/README.md b/Archive/introduction/installing-ubuntu-linux-using-wsl/README.md similarity index 100% rename from introduction/installing-ubuntu-linux-using-wsl/README.md rename to Archive/introduction/installing-ubuntu-linux-using-wsl/README.md diff --git a/introduction/installing-vscode/README.md b/Archive/introduction/installing-vscode/README.md similarity index 100% rename from introduction/installing-vscode/README.md rename to Archive/introduction/installing-vscode/README.md diff --git a/introduction/web-browsers/README.md b/Archive/introduction/web-browsers/README.md similarity index 100% rename from introduction/web-browsers/README.md rename to Archive/introduction/web-browsers/README.md diff --git a/numbers-booleans-objects/accessing-data-in-js-objects/README.md b/Archive/numbers-booleans-objects/accessing-data-in-js-objects/README.md similarity index 100% rename from numbers-booleans-objects/accessing-data-in-js-objects/README.md rename to Archive/numbers-booleans-objects/accessing-data-in-js-objects/README.md diff --git a/numbers-booleans-objects/add-update-delete-objects/README.md b/Archive/numbers-booleans-objects/add-update-delete-objects/README.md similarity index 100% rename from numbers-booleans-objects/add-update-delete-objects/README.md rename to Archive/numbers-booleans-objects/add-update-delete-objects/README.md diff --git a/numbers-booleans-objects/create-a-function-to-validate-passphrase/README.md b/Archive/numbers-booleans-objects/create-a-function-to-validate-passphrase/README.md similarity index 100% rename from numbers-booleans-objects/create-a-function-to-validate-passphrase/README.md rename to Archive/numbers-booleans-objects/create-a-function-to-validate-passphrase/README.md diff --git a/numbers-booleans-objects/creating-and-working-with-objects/README.md b/Archive/numbers-booleans-objects/creating-and-working-with-objects/README.md similarity index 100% rename from numbers-booleans-objects/creating-and-working-with-objects/README.md rename to Archive/numbers-booleans-objects/creating-and-working-with-objects/README.md diff --git a/numbers-booleans-objects/manipulating-objects/README.md b/Archive/numbers-booleans-objects/manipulating-objects/README.md similarity index 100% rename from numbers-booleans-objects/manipulating-objects/README.md rename to Archive/numbers-booleans-objects/manipulating-objects/README.md diff --git a/style-matters/introduction-to-css-frameworks/README.md b/Archive/style-matters/introduction-to-css-frameworks/README.md similarity index 100% rename from style-matters/introduction-to-css-frameworks/README.md rename to Archive/style-matters/introduction-to-css-frameworks/README.md diff --git a/style-matters/introduction-to-tailwind-css/README.md b/Archive/style-matters/introduction-to-tailwind-css/README.md similarity index 100% rename from style-matters/introduction-to-tailwind-css/README.md rename to Archive/style-matters/introduction-to-tailwind-css/README.md diff --git a/style-matters/introduction-to-tailwind-css/_templates/index.css b/Archive/style-matters/introduction-to-tailwind-css/_templates/index.css similarity index 100% rename from style-matters/introduction-to-tailwind-css/_templates/index.css rename to Archive/style-matters/introduction-to-tailwind-css/_templates/index.css diff --git a/style-matters/introduction-to-tailwind-css/_templates/index.end.html b/Archive/style-matters/introduction-to-tailwind-css/_templates/index.end.html similarity index 100% rename from style-matters/introduction-to-tailwind-css/_templates/index.end.html rename to Archive/style-matters/introduction-to-tailwind-css/_templates/index.end.html diff --git a/style-matters/introduction-to-tailwind-css/_templates/index.start.html b/Archive/style-matters/introduction-to-tailwind-css/_templates/index.start.html similarity index 100% rename from style-matters/introduction-to-tailwind-css/_templates/index.start.html rename to Archive/style-matters/introduction-to-tailwind-css/_templates/index.start.html diff --git a/style-matters/introduction-to-tailwind-css/index.css b/Archive/style-matters/introduction-to-tailwind-css/index.css similarity index 100% rename from style-matters/introduction-to-tailwind-css/index.css rename to Archive/style-matters/introduction-to-tailwind-css/index.css diff --git a/style-matters/introduction-to-tailwind-css/index.html b/Archive/style-matters/introduction-to-tailwind-css/index.html similarity index 100% rename from style-matters/introduction-to-tailwind-css/index.html rename to Archive/style-matters/introduction-to-tailwind-css/index.html diff --git a/style-matters/styling-html-using-css-files/README.md b/Archive/style-matters/styling-html-using-css-files/README.md similarity index 100% rename from style-matters/styling-html-using-css-files/README.md rename to Archive/style-matters/styling-html-using-css-files/README.md diff --git a/style-matters/styling-html-using-css-files/_templates/index.css b/Archive/style-matters/styling-html-using-css-files/_templates/index.css similarity index 100% rename from style-matters/styling-html-using-css-files/_templates/index.css rename to Archive/style-matters/styling-html-using-css-files/_templates/index.css diff --git a/style-matters/styling-html-using-css-files/_templates/index.end.html b/Archive/style-matters/styling-html-using-css-files/_templates/index.end.html similarity index 100% rename from style-matters/styling-html-using-css-files/_templates/index.end.html rename to Archive/style-matters/styling-html-using-css-files/_templates/index.end.html diff --git a/style-matters/styling-html-using-css-files/_templates/index.start.html b/Archive/style-matters/styling-html-using-css-files/_templates/index.start.html similarity index 100% rename from style-matters/styling-html-using-css-files/_templates/index.start.html rename to Archive/style-matters/styling-html-using-css-files/_templates/index.start.html diff --git a/style-matters/styling-html-using-css-files/index.css b/Archive/style-matters/styling-html-using-css-files/index.css similarity index 100% rename from style-matters/styling-html-using-css-files/index.css rename to Archive/style-matters/styling-html-using-css-files/index.css diff --git a/style-matters/styling-html-using-css-files/index.html b/Archive/style-matters/styling-html-using-css-files/index.html similarity index 100% rename from style-matters/styling-html-using-css-files/index.html rename to Archive/style-matters/styling-html-using-css-files/index.html diff --git a/style-matters/tailwinds-relationship-with-javascript/README.md b/Archive/style-matters/tailwinds-relationship-with-javascript/README.md similarity index 100% rename from style-matters/tailwinds-relationship-with-javascript/README.md rename to Archive/style-matters/tailwinds-relationship-with-javascript/README.md diff --git a/style-matters/using-css-framework-for-styling/README.md b/Archive/style-matters/using-css-framework-for-styling/README.md similarity index 100% rename from style-matters/using-css-framework-for-styling/README.md rename to Archive/style-matters/using-css-framework-for-styling/README.md diff --git a/style-matters/working-with-tailwind/README.md b/Archive/style-matters/working-with-tailwind/README.md similarity index 100% rename from style-matters/working-with-tailwind/README.md rename to Archive/style-matters/working-with-tailwind/README.md diff --git a/style-matters/working-with-tailwind/_templates/index.end.html b/Archive/style-matters/working-with-tailwind/_templates/index.end.html similarity index 100% rename from style-matters/working-with-tailwind/_templates/index.end.html rename to Archive/style-matters/working-with-tailwind/_templates/index.end.html diff --git a/style-matters/working-with-tailwind/_templates/index.start.html b/Archive/style-matters/working-with-tailwind/_templates/index.start.html similarity index 100% rename from style-matters/working-with-tailwind/_templates/index.start.html rename to Archive/style-matters/working-with-tailwind/_templates/index.start.html diff --git a/style-matters/working-with-tailwind/index.html b/Archive/style-matters/working-with-tailwind/index.html similarity index 100% rename from style-matters/working-with-tailwind/index.html rename to Archive/style-matters/working-with-tailwind/index.html diff --git a/working-with-strings/adding-comments-to-html-and-js/README.md b/Archive/working-with-strings/adding-comments-to-html-and-js/README.md similarity index 100% rename from working-with-strings/adding-comments-to-html-and-js/README.md rename to Archive/working-with-strings/adding-comments-to-html-and-js/README.md diff --git a/working-with-strings/putting-html-and-js-together/README.md b/Archive/working-with-strings/putting-html-and-js-together/README.md similarity index 100% rename from working-with-strings/putting-html-and-js-together/README.md rename to Archive/working-with-strings/putting-html-and-js-together/README.md diff --git a/working-with-strings/what-is-javascript/README.md b/Archive/working-with-strings/what-is-javascript/README.md similarity index 100% rename from working-with-strings/what-is-javascript/README.md rename to Archive/working-with-strings/what-is-javascript/README.md diff --git a/working-with-strings/what-is-javascript/index.html b/Archive/working-with-strings/what-is-javascript/index.html similarity index 100% rename from working-with-strings/what-is-javascript/index.html rename to Archive/working-with-strings/what-is-javascript/index.html diff --git a/Basic Introduction to HTML & CSS/CSS and styling structure.md b/Basic Introduction to HTML & CSS/CSS and styling structure.md new file mode 100644 index 0000000..6a904e2 --- /dev/null +++ b/Basic Introduction to HTML & CSS/CSS and styling structure.md @@ -0,0 +1,12 @@ +# Enhancing Web Design with CSS: + +In our recent lessons, you've gained an understanding of what HTML is and how it's used to structure documents. However, you may have noticed that the documents we created looked quite basic when viewed in web browsers. Headings appeared larger than regular text, paragraphs had spacing and line breaks, and links were colored and underlined to stand out. + +## Unleashing Creative Possibilities: + +The web would indeed be a boring place if all websites adhered to this basic appearance. This is where Cascading Style Sheets (CSS) come into play. With CSS, you have the power to finely control how HTML elements are presented in the browser, allowing for creativity and customization. + +## Exploring CSS: + +In the upcoming lessons, we'll delve deeper into the world of CSS. You'll learn how to style HTML elements, apply colors, adjust layouts, and create visually appealing web pages. CSS empowers web developers and designers to transform the look and feel of web content, making each website unique and engaging. + diff --git a/Basic Introduction to HTML & CSS/CSS classes and selectors.md b/Basic Introduction to HTML & CSS/CSS classes and selectors.md new file mode 100644 index 0000000..05151ac --- /dev/null +++ b/Basic Introduction to HTML & CSS/CSS classes and selectors.md @@ -0,0 +1,5 @@ +# Selecting Elements for Styling in CSS: + +To style different elements in our HTML page, first we have to find a way to refer to those elements. In CSS, selectors are used to **target** the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, which helps us to precisely select which element to style. + +Let's find out how to use these selectors. \ No newline at end of file diff --git a/Basic Introduction to HTML & CSS/CSS styling overrides.md b/Basic Introduction to HTML & CSS/CSS styling overrides.md new file mode 100644 index 0000000..44a6010 --- /dev/null +++ b/Basic Introduction to HTML & CSS/CSS styling overrides.md @@ -0,0 +1,9 @@ +# Defining CSS Rules in HTML Projects: + +We already know that, in any HTML project, there are three different places where we can write our CSS rules: + +1. Along with the HTML elements, as inline styles. +2. Inside HTML `HEAD`, using the `` tag. +* **External:** The CSS is kept in a seperate file, and we use a `link` tag, like so: ``. This is generally the preferred way of writing custom CSS. \ No newline at end of file diff --git a/Basics of JavaScript data structures/A minimal UI for filtering flight search results.md b/Basics of JavaScript data structures/A minimal UI for filtering flight search results.md new file mode 100644 index 0000000..3a40253 --- /dev/null +++ b/Basics of JavaScript data structures/A minimal UI for filtering flight search results.md @@ -0,0 +1,9 @@ +You have used filters if you have done shopping, or booked tickets, or ordered food online. Filters are very useful in narrowing down the number of items we want to look at in the user interface. + +Let us look at a narrow slice of filtering functionality common to most flight booking apps. + +This examples uses HTML & CSS to display a bunch of search results. The user can then filter search results form the browser. We will write JavaScript which make this functionality possible. + +This small scale example will show you how most applications are implemented at a larger scale. + +In this lesson, we'll work on a `index.html` file that has been prepared for this exercise. Download the file below, and then follow along with the lesson's video. \ No newline at end of file diff --git a/Basics of JavaScript data structures/Accessing data in Objects.md b/Basics of JavaScript data structures/Accessing data in Objects.md new file mode 100644 index 0000000..7240683 --- /dev/null +++ b/Basics of JavaScript data structures/Accessing data in Objects.md @@ -0,0 +1 @@ +**Video** \ No newline at end of file diff --git a/Basics of JavaScript data structures/Add, delete, and update Object properties.md b/Basics of JavaScript data structures/Add, delete, and update Object properties.md new file mode 100644 index 0000000..4b12cfa --- /dev/null +++ b/Basics of JavaScript data structures/Add, delete, and update Object properties.md @@ -0,0 +1 @@ +**Video** diff --git a/Basics of JavaScript data structures/Arrays - handling ordered values.md b/Basics of JavaScript data structures/Arrays - handling ordered values.md new file mode 100644 index 0000000..571d894 --- /dev/null +++ b/Basics of JavaScript data structures/Arrays - handling ordered values.md @@ -0,0 +1 @@ +You'll learn how to use arrays as a container for a collection of JavaScript values. \ No newline at end of file diff --git a/Basics of JavaScript data structures/Creating and working with Objects.md b/Basics of JavaScript data structures/Creating and working with Objects.md new file mode 100644 index 0000000..b53a374 --- /dev/null +++ b/Basics of JavaScript data structures/Creating and working with Objects.md @@ -0,0 +1,2 @@ +**Video** + diff --git a/Basics of JavaScript data structures/Filter an array based on some criteria.md b/Basics of JavaScript data structures/Filter an array based on some criteria.md new file mode 100644 index 0000000..1526901 --- /dev/null +++ b/Basics of JavaScript data structures/Filter an array based on some criteria.md @@ -0,0 +1,11 @@ +Another operation that you frequently need to do on an array of values is to select a few from the list, that match one or more conditions. We call this filtering. + +To filter an array we can use the array `filter` method. Whereas `map` returns an array with the same number of values as the input array, this is not necessarily true for `filter`. + +The result of filtering an array could return any number of results, up to the original length of the array. This means that, depending on the criteria, the resulting array could be empty (no element satisfies the criteria), the same as the original array (all elements satify the criteria), or some length less than the original array (some elements satify the criteria). + +The `filter` function works very similarly to the `forEach` and `map` functions. + +The callback function provided to a `filter` function should return either `true` or `false`. The callback function is expected to run a test on the array value. If it meets the filtering criteria, then return `true`. This includes that value in the resulting array. If the callback function returns `false` the corresponding value is excluded from the resulting array. + +Let us try it out with a working example. \ No newline at end of file diff --git a/Basics of JavaScript data structures/Generate an HTML list from an array using the map function.md b/Basics of JavaScript data structures/Generate an HTML list from an array using the map function.md new file mode 100644 index 0000000..25de193 --- /dev/null +++ b/Basics of JavaScript data structures/Generate an HTML list from an array using the map function.md @@ -0,0 +1,10 @@ +It is better to use the `map` function to create a new array, rather than simulating it using the `forEach` function. + +This is demonstrated by refactoring an earlier example written using `forEach` to generate an HTML list to instead use the `map` function. + + +### New VSCode trick - Open Containing Folder + +In the above video, you saw a demo of how we can we can quickly open the folder that holds the file we're looking at. + +You can do this by right-clicking on a file or folder (in VSCode's _Explorer_) and selecting the _Reveal in Explorer_ (or _Reveal in Finder_ on macOS or _Open Containing Folder_ on Linux) option. This feature also has a keyboard shortcut that is shown next to the button. \ No newline at end of file diff --git a/Basics of JavaScript data structures/Generate an HTML list from an array.md b/Basics of JavaScript data structures/Generate an HTML list from an array.md new file mode 100644 index 0000000..574aff5 --- /dev/null +++ b/Basics of JavaScript data structures/Generate an HTML list from an array.md @@ -0,0 +1,5 @@ +This is a practical application for the array `forEach` method. An HTML list will be programmatically generated from an input array of string values. + + + + diff --git a/Basics of JavaScript data structures/Iterating over an array using the forEach method.md b/Basics of JavaScript data structures/Iterating over an array using the forEach method.md new file mode 100644 index 0000000..65eceb0 --- /dev/null +++ b/Basics of JavaScript data structures/Iterating over an array using the forEach method.md @@ -0,0 +1,7 @@ +Information is often represented as a collection of values. In JavaScript this neatly maps to an array of values. + +So far you've learned how to apply a function to a single value to either return a result or perform a side-effect like logging to the browsers console. + +When you have an array of values the function can be repeatedly applied to every value in that array. This is known as iterating over an array of values. + +You will learn about the `forEach` method for iterating over an array of values. diff --git a/Basics of JavaScript data structures/Manipulating Objects.md b/Basics of JavaScript data structures/Manipulating Objects.md new file mode 100644 index 0000000..b53a374 --- /dev/null +++ b/Basics of JavaScript data structures/Manipulating Objects.md @@ -0,0 +1,2 @@ +**Video** + diff --git a/Basics of JavaScript data structures/Nested Array iteration.md b/Basics of JavaScript data structures/Nested Array iteration.md new file mode 100644 index 0000000..8a1245b --- /dev/null +++ b/Basics of JavaScript data structures/Nested Array iteration.md @@ -0,0 +1,17 @@ +It's pretty common to find arrays that contain values like strings, numbers, objects and booleans. However the value inside an array can also be another array. + +For example, consider a 2-dimensional array. This is an array whose values are themselves arrays. In JavaScript it'll look something like like this: + +```js +let values = [ + [100, 99, 100], // index 0 + [99, 99, 99], // index 1 + [100, 100, 100] // index 2 +]; +``` + +The `values` array contains 3 array items. Each array item contains 3 number type values. + +How do you iterate over such a 2D array? Or, how do you generate a 2D array using iteration? + +Let us learn about such arrays using an example where we render multiplication tables to HTML. \ No newline at end of file diff --git a/Basics of JavaScript data structures/Task: Create a function to filter data.md b/Basics of JavaScript data structures/Task: Create a function to filter data.md new file mode 100644 index 0000000..d1710d9 --- /dev/null +++ b/Basics of JavaScript data structures/Task: Create a function to filter data.md @@ -0,0 +1,34 @@ +## Create a log date filter function + +Let's get hands-on and test what you have learned by trying to implement a small function. + +The function should accept an array of log entries (objects). Here's an example log entry object to understand its shape. + +``` javascript +{ name: "Harry" , date: "2021-01-21T02:53:42+05:30" } +``` + +The function should accept an array of these objects and return the names of those entries whose date matches the current date, as a string. The names should be separated by a comma. + +For example, if today is the 21^st^ of January 2021 (2021-01-21), and the function is given an array of these three entries: + +``` javascript +[ + { name: "Harry", date: "2021-01-21T02:53:42+05:30" }, + { name: "Hermione", date: "2021-01-22T02:53:42+05:30" }, + { name: "Ron", date: "2021-01-21T03:53:42+05:30" } +] +``` + +...the function should return the value `Harry,Ron`. + +Note how the names are separated by a comma without any spaces in between. + +We have prepared a skeleton JS file which you can download and work on. You need to implement the `todaysEntries` function without changing the function name or any other part of the file. + +## Important instructions + +1. Changing the name of the function will lead to the rejection of your submitted code. +2. Make sure you `return` a string from the function - do not print it to the console. +3. Do not remove the `module.exports = ...` line when submitting your JS file. That line is required for automated tests to work properly. +4. You may need to comment out the `module.exports = ...` line to run the JS file in the browser, but don't forget to restore it before uploading the file here. \ No newline at end of file diff --git a/Basics of JavaScript data structures/Transforming Nested Arrays.md b/Basics of JavaScript data structures/Transforming Nested Arrays.md new file mode 100644 index 0000000..b4d5a52 --- /dev/null +++ b/Basics of JavaScript data structures/Transforming Nested Arrays.md @@ -0,0 +1,7 @@ +The multiplication tables we built earlier uses a 2-dimensional (2D) array. It was generated through nested iteration. The outer iteration happened over the numbers, and the inner iteration happened over the multipliers. + +Here we will see how the code becomes simpler when the `forEach` is substituted with the `map` function. + +The inner iteration generates a single table containing the multiplication line items. This can be done using `map`. The outer iteration generates all the multiplication tables which are arrays themselves. This too can be done using `map`. + +Let us see how that can be done. diff --git a/Basics of JavaScript data structures/Transforming from one array to another using the map method.md b/Basics of JavaScript data structures/Transforming from one array to another using the map method.md new file mode 100644 index 0000000..8addd58 --- /dev/null +++ b/Basics of JavaScript data structures/Transforming from one array to another using the map method.md @@ -0,0 +1,7 @@ +You can apply a function to an array of values to produce a new array. This function will be applied to each value in the input array. The resulting array will contain the same number of items as the input array. The item at index 0 will be the result of applying the function on the item at index 0 of the input array. + +The array function which does this is called `map`. + +The functionality of `map` can be simulated using `forEach`. In the section on array iteration we used `forEach` to generate a list of HTML elements. Using the `map` function is easier than doing the same using `forEach`. + +Let us first learn how to use `map` function on an array of values. You will see that most of what you learned about the functioning of the `forEach` function applies here for `map` as well. \ No newline at end of file diff --git a/Basics of JavaScript data structures/Use the index of the array value with filter.md b/Basics of JavaScript data structures/Use the index of the array value with filter.md new file mode 100644 index 0000000..5a3e8a2 --- /dev/null +++ b/Basics of JavaScript data structures/Use the index of the array value with filter.md @@ -0,0 +1,5 @@ +Let us look at an example which requires us to know the index of the value when using the `filter` function on an array. + +You are provided the daily unique visitors to your webpage. The value at 0 index is the count for Monday, 1 for Tuesday, 2 for Wednesday, ..., 6 for Sunday. + +This time-series data can now be filtered in various ways. Put another way you can find out how many visitors arrived at your webpage over the weekend etc. \ No newline at end of file diff --git a/Basics of JavaScript data structures/Using index of array value with map.md b/Basics of JavaScript data structures/Using index of array value with map.md new file mode 100644 index 0000000..8b4b1f6 --- /dev/null +++ b/Basics of JavaScript data structures/Using index of array value with map.md @@ -0,0 +1,2 @@ +Here we use the second argument to the callback function which tells us the index of the current value when using the `map` function. This should begin to look familiar if you know how this works when using the `forEach` function. + diff --git a/Basics of JavaScript data structures/Using the index of the array value during iteration.md b/Basics of JavaScript data structures/Using the index of the array value during iteration.md new file mode 100644 index 0000000..f92b76a --- /dev/null +++ b/Basics of JavaScript data structures/Using the index of the array value during iteration.md @@ -0,0 +1,3 @@ +Sometimes when iterating over an array value it is necessary to also know the index of that value within the array. An example of this would be to display the values as a numbered list. + +In this lesson, we'll talk about a different form of the callback function passed to the array `forEach` method. The first argument is the value and the second argument is the index of the value in that array. \ No newline at end of file diff --git a/Creating a registration with validations /Capstone: Deploy the registration page to GitHub pages.md b/Creating a registration with validations /Capstone: Deploy the registration page to GitHub pages.md new file mode 100644 index 0000000..61d88bf --- /dev/null +++ b/Creating a registration with validations /Capstone: Deploy the registration page to GitHub pages.md @@ -0,0 +1,38 @@ +**To complete this course**: Host the registration form that we demonstrated in this level using [GitHub Pages](https://pages.github.com) (we have show you exactly how to use GitHub Pages in the [lesson](https://www.pupilfirst.school/targets/19268)). +You'll need to make one additional change to the registration form (details below), host it online, and then share its link with us. + +## What you need to do + +1. Your registration form must have all the functionality demonstrated in this level, including loading of saved data from web storage. + +2. **Add additional validations** to the date input field so that it accepts date of birth for people between ages 18 and 55 only. You'll need to figure out how to do this. + +3. Host your website on GitHub Pages, and share the link to a hosted version of your website. The [lesson under Resources](https://www.pupilfirst.school/targets/19268) details the steps involved in doing so. + +## Please ensure that... + +1. ...your website is live, and accessible. +2. ...the link you share shows the registration `form` along with the `table` element. The table should be empty when we first visit the webpage. +3. The `table` element's header should contain the following columns with the exact text: `Name`, `Email`, `Password`, `Dob`, and `Accepted terms?`. +4. ...the `input` elements must have the `id` values demonstrated in this level. i.e., `name`, `email`, `password`, and `dob`. +5. ...there must be an `` element with `type="checkbox"`. +6. ...there must be a ` + +``` + +The final HTML for the form we created will look something like the one below: + +```html + +
+ + + + + + + + + + + + + + + + +
+ +``` + +There are multiple other form controls that HTML provides, and you can use them in your applications based on your requirements. You can refer to the details of the same [here](https://www.w3schools.com/html/html_form_elements.asp). + +In the upcoming lessons, we will learn about validating the input entered by the user and how user data is submitted to a web server. diff --git a/Creating a registration with validations /First steps with Form and Form elements.md b/Creating a registration with validations /First steps with Form and Form elements.md new file mode 100644 index 0000000..fde8efc --- /dev/null +++ b/Creating a registration with validations /First steps with Form and Form elements.md @@ -0,0 +1,76 @@ +In this lesson, we will learn about HTML Forms and using Form controls within them to collect user input on web pages. + +The HTML `form` element helps to create an HTML form for user input. It is used as a container for elements such as text fields, checkboxes, radio buttons and submit buttons. + +Let's create a `form` that can collect user data. This element wraps all the other elements that go inside our form. + +In the HTML document created earlier enter the following code. + +```html +
## form elements
+``` + +You cannot have forms nested inside another form. That means you cannot have a `form` element inside another `form` element. + +Now let's add a few form-related elements to the above `form`. + +### Text fields + +The `input` element with the type `text` is used to get Text-based user data from the web pages. + +```js +
+ +
+``` + +The `type` attribute indicates what kind of input we want the user to enter. If we give a value of text to the `type` attribute, it means the input requires a text value to be entered. + +There are many possible values for this particular attribute. Some possible values are email, password etc. + +### The `Label` element + +The `label` element defines a label for many form elements. It is used to provide context for the form elements. + +> Action: Open the HTML Document created previously and add a Label to the Form element as below. + +```js +
+ + +
+``` + +The `for` attribute associates the label with a particular form element. The way it matches is by the ID of the input element. + +### Checkboxes + +The `input` element with the type `checkbox` allows a user to select 0 or more options of a limited number of choices. + +> Action: Open the HTML Document created previously and add a checkbox to the Form element as below. + +```js + + +``` + +### Radio button + +The `input` element with the type `radio` allows a user to select a single option from a limited number of choices. + + +```js + + +``` + +### Submit button + +The `input` element with the type `submit` allows a user to send the collected form data to a web server. + + +```js + +``` + +The above-mentioned controls are some basic form-related controls used across most web forms. Next, we will learn about using these controls to create a full-fledged web form to be used on our web page. \ No newline at end of file diff --git a/Creating a registration with validations /Introduction to Web Storage.md b/Creating a registration with validations /Introduction to Web Storage.md new file mode 100644 index 0000000..76426a2 --- /dev/null +++ b/Creating a registration with validations /Introduction to Web Storage.md @@ -0,0 +1,49 @@ +Web Storage provides mechanisms to store key-value pairs in a much more intuitive way than using cookies. Traditionally cookies are used to save data in the client side. But cookies have a storage limit of 4 KB. Cookies also get sent with every request to the server. + +With HTML5, web storage was introduced. The data stored using Web Storage APIs are never sent to the server. APIs or Application Programming Interface is a software intermediary that allows two applications to talk to each other. + +There are two different Web Storage APIs available: + +## 1. sessionStorage + +- The values are stored only for the duration of page session. Page session is the duration through which the tab or window remains open. + +- Maximum of 5 MB can be stored. + +#### Basic Usage + +```js +// Save data to sessionStorage +sessionStorage.setItem("name", "John Doe"); + +// Get saved data from sessionStorage +let name = sessionStorage.getItem("name"); + +// Remove saved data from sessionStorage +sessionStorage.removeItem("name"); + +// Remove all saved data from sessionStorage +sessionStorage.clear(); +``` + +## 2. localStorage + +- localStorage is similar to sessionStorage, but it doesn't have an expiry. +- Data stored in localStorage is never sent to the server. +- Data is shared between all tabs and windows from the same origin. + +#### Basic Usage + +```js +// Save data to localStorage +localStorage.setItem("themePreference", "Dark"); + +// Get saved data from localStorage +const themePreference = localStorage.getItem("themePreference"); + +// Remove saved data from localStorage +localStorage.removeItem("themePreference"); + +// Remove all saved data from localStorage +localStorage.clear(); +``` diff --git a/Creating a registration with validations /Learn more about Forms.md b/Creating a registration with validations /Learn more about Forms.md new file mode 100644 index 0000000..1fc1e8f --- /dev/null +++ b/Creating a registration with validations /Learn more about Forms.md @@ -0,0 +1,16 @@ +> This is optional reading. In this target, we'll link you to external documentation that you can look at if you want to. Do that only if you are curious and have the time to spare. Otherwise, you can safely skip this chapter. + +## References + +Here are a few references for the HTML Forms related specifications and documentation. These contain details about all the HTML Forms and Form controls. + +1. [W3C HTML Form Specification](https://html.spec.whatwg.org/multipage/forms.html#forms) +2. [Mozilla HTML Forms Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) +3. [W3Schools HTML Form reference](https://www.w3schools.com/html/html_forms.asp) + +## Tutorials + +Here are a few tutorials that can help you with understanding HTML Forms in detail. + +1. [Web forms — Working with user data](https://developer.mozilla.org/en-US/docs/Learn/Forms) +2. [A step-by-step guide to getting started with HTML forms](https://www.freecodecamp.org/news/a-step-by-step-guide-to-getting-started-with-html-forms-7f77ae4522b5/) \ No newline at end of file diff --git a/Creating a registration with validations /Submit and View Inputs from Web Storage.md b/Creating a registration with validations /Submit and View Inputs from Web Storage.md new file mode 100644 index 0000000..ff4d4b4 --- /dev/null +++ b/Creating a registration with validations /Submit and View Inputs from Web Storage.md @@ -0,0 +1,41 @@ +## Saving data locally + +## Storing as a JSON string + +The keys and values in web storage can only be of `string` type. If we need to save a JavaScript object to web storage, we first need to convert it to string. To help us with that, JavaScript provides a built-in `JSON.stringify` method. + +JSON stands for JavaScript Object Notation. It's a syntax for storing a complex object in string form for easy transmission. It's also easy for us to write manually. + +You'll notice that JSON strings look the same as normal objects or arrays that we write in JavaScript. That's because this notation is taken directly from the JavaScript language. However, JSON is used universally across programming languages as a way to convert complex types into a string. + +In JavaScript, you can convert a valid `JSON` string back into an object using the `JSON.parse` method. + +```js +const userData = { + name: "John Doe", + themePreference: "Dark", +}; + +// Convert JSON Object to string representation. +const stringifiedUserData = JSON.stringify(userData); + +// Let's check the type of the constant we just created. +console.log(typeof(stringifiedUserData)); // string + +// Save the data to localStorage. +localStorage.setItem("userData", stringifiedUserData); + +// Retrieve the string from localStorage. +const retrievedUserData = localStorage.getItem("userData"); + +// Convert the string back as JavaScript object. +const parsedUserData = JSON.parse(retrievedUserData); + +// Let's check the type of the constant we just created by parsing the JSON string. +console.log(typeof(parsedUserData)); // object + +// We should be able to access the `name` property now. +console.log(parsedUserData.name); // John Doe +``` + +## Retrieving data stored locally diff --git a/Creating a registration with validations /Submitting user data from Forms.md b/Creating a registration with validations /Submitting user data from Forms.md new file mode 100644 index 0000000..5c66c67 --- /dev/null +++ b/Creating a registration with validations /Submitting user data from Forms.md @@ -0,0 +1,98 @@ +In this lesson, we will learn about what happens when a user submits a form. We will also learn about where the data goes, and how we can check, what data is sent to the web server. + +First, we'll discuss what happens to the data when we submit a form. To understand that, we need to have an understanding of Client-Server architecture. + +## Client-Server architecture + +The Web uses a Client-Server architecture that can be summarized as follows: + +1. Client (a web browser) sends a request, +2. To a Server (a web server like Apache, Tomcat, etc.), +3. Using the [HTTP protocol](https://developer.mozilla.org/en-US/docs/Web/HTTP). + +The server answers the request using the same protocol. + +The HTML form we create is a user-friendly way to configure an HTTP request to send data to a server. This enables the user to provide information to be delivered in the HTTP request. + +## Sending data + +The `form` element defines how the data will be sent to the web server. All of its attributes are designed to let you configure the request to be sent when a user clicks a submit button. + +The two most important attributes of a `form` element are `action` and `method`. + +### `action` attribute + +The `action` attribute defines where we would like to send the data. Its value must be a valid URL. If this attribute isn't provided, the data will be sent to the URL of the page containing the form — the current page. + +```js + +
#External URL + #Local URL + +``` + +The names and values of the form controls are sent to the server as `name-value` pairs joined with the `&` symbol. + +### `method` attribute + +The `method` attribute defines how data is sent. The HTTP protocol provides several ways to perform a request. + +HTML form data can be transmitted via a number of different methods, the most common being the `GET` method and the `POST` method. + +HTTP requests, such as the ones we send through HTML forms, consist of two parts: + +1. A header that contains a set of data about the browser and our HTML. +2. A body that can contain information necessary for the server. + +#### `GET` method + +`GET` method is used by the browser to ask the server to send back a given resource. In this case, the browser sends an empty body. Because the body is empty if a form is sent using this method, the data sent to the server is added to the URL. + +```js + + + + + + + +
+ +``` + +Since the `GET` method has been used, you'll see the URL `https://www.google.com/?name=John+Doe&email=john.doe%40email.com` appear in the browser address bar when you submit the form. + +The data is appended to the URL as a series of name-value pairs. + +#### `POST` method + +`POST` method is a little different. It's the method the browser uses to talk to the server when asking for a response based on the body of the HTTP request. + +If a form is sent using this method, the data is appended to the body of the HTTP request. + +```js + +
+ + + + + +
+ +``` + +When the form is submitted using the POST method, you get no data appended to the URL, and it is instead included in the request body. + +The HTTP requests are not visible on the browser and to view them you need to use the `Developer Tools` available inbuilt on the browser. + +After submitting the form: + +1. Open the developer tools. +2. Select “Network” +3. Select “All” +4. Select “google.com” in the “Name” tab +5. Select “Headers” +6. Look under the “Form Data” section to see the data sent as a part of the request. + +We will learn more about building forms and other ways to store and retrieve data from forms in the upcoming lessons. \ No newline at end of file diff --git a/Creating a registration with validations /WD101 Completion feedback form.md b/Creating a registration with validations /WD101 Completion feedback form.md new file mode 100644 index 0000000..5544725 --- /dev/null +++ b/Creating a registration with validations /WD101 Completion feedback form.md @@ -0,0 +1 @@ +Congratulations, you are about to complete WD101. This form is to understand your approach and interest in Web development so far. diff --git a/Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md b/Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md new file mode 100644 index 0000000..ebe05ee --- /dev/null +++ b/Creating a registration with validations /Why should you learn about the HTML Form element and Form data?.md @@ -0,0 +1,13 @@ +# HTML Forms: Enhancing User Interaction + +HTML forms are a powerful tool for web interaction. They serve two primary functions: + +* **Data Collection**: Forms gather user data, commonly seen in registration or login forms for services like Gmail or Facebook. + +* **User Interaction**: Forms are the main point of interaction between users and web applications. They enable data input, which can be sent for processing or used to update applications instantly. + +**Form Components:** +HTML forms include various controls like text fields, dropdowns, buttons, checkboxes, and radio buttons. These controls are usually created using the element. + +**Enhancing User Experience:** +Forms can enforce data formats and values through validation and can also provide text labels for accessibility. Understanding how to use and customize forms is essential for creating user-friendly web experiences. \ No newline at end of file diff --git a/Functions - code we can call multiple times!/A note on arrow functions.md b/Functions - code we can call multiple times!/A note on arrow functions.md new file mode 100644 index 0000000..215f38f --- /dev/null +++ b/Functions - code we can call multiple times!/A note on arrow functions.md @@ -0,0 +1,56 @@ +There are two ways in which functions can be defined: + +1. Traditional definition using the `function` keyword. +2. Arrow function. + +Traditionally, functions were defined using the `function` keyword. For example, + +```js +function someFn() { + // ... +} +``` + +Modern JavaScript provides a new (and arguably better) way of defining a function, called **arrow function**. This approach treats a function just like variables and is defined using `let` or `const` keywords. Here's an example of an _arrow function_ that's equivalent to the above _traditional_ function: + +```js +const someFun = () => { + // ... +} +``` + +Let's now see how we would approach calculating the _sum of two numbers_ using both of these approaches. + +## Using a traditional function + +```js +function add(a, b) { + return a + b; +} + +let sum = add(2, 3); +console.log("Sum is: ", sum); // Sum is 5 +``` + +Here, the `add` function accepts two arguments, computes their sum in the body of the function and returns the calculated value. + +## Using an arrow function + +```js +const add = (a, b) => { + return a + b; +} + +let sum = add(2, 3); +console.log("Sum is: ", sum); // Sum is: 5 +``` + +Arrow functions can also be used to write single-line *arrow function expressions*. If we leave out the curly braces (`{ ... }`), we can also leave out the `return` keyword, and the function will still return the value of the function's expression. Here's an example: + +```js +let add = (a, b) => a + b; +let sum = add(2, 3); +console.log("Sum is: ", sum); // Sum is: 5 +``` + +Note that such arrow function expressions can exclusively be used for single-line operations. If you need to write multiple lines of code in a function, you'll need to use curly braces and the `return` keyword. \ No newline at end of file diff --git a/Functions - code we can call multiple times!/Explicitly return a value from a function.md b/Functions - code we can call multiple times!/Explicitly return a value from a function.md new file mode 100644 index 0000000..9026a5b --- /dev/null +++ b/Functions - code we can call multiple times!/Explicitly return a value from a function.md @@ -0,0 +1,40 @@ +A function like `console.log` performs a side-effect. It does not return any value, but it prints the string we passed as an argument to the web browser console. + +In our programs, we often need functions that can accept one or more arguments, perform some work, and then return the result of that computation. + +In this lesson, you will learn how to do this. + + +**Video** + +## Special Case: Arrow-functions without curly braces + +There is one special case that you need to be aware of - single-expression functions. Here's an example. + +```js +let sumOfSquaresSingleLine = (x, y) => Math.pow(x, 2) + Math.pow(y, 2); + +let sumOfSquaresMultiLine = (x, y) => { + return Math.pow(x, 2) + Math.pow(y, 2); +}; +``` + +Both functions will return _sum of squares_ of two arguments. However, note how the _single-expression_ function omits the `return` keyword. + +When the _body_ of a function is a single _expression_, the `return` keyword isn't required, and neither are the curly braces (`{ ... }`). The _result_ of that expression is automatically returned from the function. + +Most commonly, this syntax is used to write compact, single-line functions to improve readability. However, it is possible to write a multi-line expression in the same way. You'll find an example of this in a later lesson. + +However, when your function needs multiple statements to execute, the curly braces are **required** and are used to delimit the operations performed by the function. In this case, the `return` keyword is also **required** for the function to _return_ anything. When curly braces are used, if you fail to write a `return` statement, your function will always return the value `undefined`. + +```js +let foo = () => 1; + +let bar = () => { + // Without an explicit 'return', this function will always return `undefined`. + 1 +}; + +foo(); // 1 +bar(); // undefined +``` \ No newline at end of file diff --git a/Functions - code we can call multiple times!/Functions - part 1.md b/Functions - code we can call multiple times!/Functions - part 1.md new file mode 100644 index 0000000..b4f1698 --- /dev/null +++ b/Functions - code we can call multiple times!/Functions - part 1.md @@ -0,0 +1 @@ +`console.log` is a function you have used numerous times by now. At the end of this lesson you will have learned how to write your own functions. \ No newline at end of file diff --git a/Functions - code we can call multiple times!/Functions - part 2.md b/Functions - code we can call multiple times!/Functions - part 2.md new file mode 100644 index 0000000..2d36743 --- /dev/null +++ b/Functions - code we can call multiple times!/Functions - part 2.md @@ -0,0 +1,5 @@ +We will work on a longer example which is written in the procedural manner and **refactor** it to use small functions. + +When we **refactor** code the structure of the code changes. We do not change the functionality or the existing behaviour of the code. + +Programmers refactor the code they've written often to make it easier to read, understand, and modify by themselves in the future, and also to make it easier for other people to work with the same code. \ No newline at end of file diff --git a/Functions - code we can call multiple times!/Need additional help?.md b/Functions - code we can call multiple times!/Need additional help?.md new file mode 100644 index 0000000..10b3973 --- /dev/null +++ b/Functions - code we can call multiple times!/Need additional help?.md @@ -0,0 +1,5 @@ +To complete the _milestone target_ in this level of the course, you'll need to do some things that _haven't_ been taught in the course. + +This is intentional. + +If you're having trouble creating a working solution for the assignment, _this_ lesson will give you some hints on how to proceed. \ No newline at end of file diff --git a/Functions - code we can call multiple times!/Passing a function as an argument.md b/Functions - code we can call multiple times!/Passing a function as an argument.md new file mode 100644 index 0000000..0fec1c3 --- /dev/null +++ b/Functions - code we can call multiple times!/Passing a function as an argument.md @@ -0,0 +1,11 @@ +In JavaScript a function is also just a value like the string, number, boolean, object or array. The implication is that you can pass a function itself as an argument to another function. When functions are passed as arguments to other functions, we refer to them as **callback functions** or simply **callbacks**. + +> **Why the name "callback"?**\ +> Because we're passing some code that we expect a function to *call back* (execute). + +To learn more about callback functions, we'll experiment with two functions available in the web browser: + +1. `setTimeout` +2. `setInterval` + +Both these functions accept a __callback__ function as its first argument. After a time delay the __callback__ function is executed (_"called back"_). \ No newline at end of file diff --git a/Functions - code we can call multiple times!/Task: Create a name to initials converter function.md b/Functions - code we can call multiple times!/Task: Create a name to initials converter function.md new file mode 100644 index 0000000..b650920 --- /dev/null +++ b/Functions - code we can call multiple times!/Task: Create a name to initials converter function.md @@ -0,0 +1,27 @@ +## Convert name to initials. + +Now that you have a good idea of Javascript functions, let's test what you have learned by attempting a small task to write a function. + +The function should basically take an input name(a string) and convert the same to initials, for e.g John Doe to JD. + +Here are few conditions to be met: + +1. A single-worded name must return the first two letters of the word as initials. Eg. John should have an initial JO +2. A two-worded name must return the first letter of each of the words in the name. Eg. John Doe should have an initial JD +3. A name with more words should return the starting letter of the first and the last word as initial. Eg. John Doe Honai should have an initial JH +4. The function should return all initials in uppercase. + +We have attached a skeleton JS file with this lesson. You are expected to just complete the empty function `createInitialsFromName` so that it _returns_ the expected value. + +## Important instructions + +1. Changing the name of the function will lead to the rejection of your submitted code. +2. Make sure you `return` the initials string from the function - do not print it to the console. +3. Do not remove the `module.exports = ...` line when submitting your JS file. That line is required for automated tests to work properly. +4. You may need to comment out the `module.exports = ...` line to run the JS file in the browser, but don't forget to restore it before uploading the file here. + +Download the file above and complete the function `createInitialsFromName` with the conditions mentioned above. + +Once you're done, save your changes, and upload the file in the _Complete_ tab of this lesson. + +Good luck with the task! Have fun! :) \ No newline at end of file diff --git a/Let's create our own websites!/Client & Server.md b/Let's create our own websites!/Client & Server.md new file mode 100644 index 0000000..792cc57 --- /dev/null +++ b/Let's create our own websites!/Client & Server.md @@ -0,0 +1,26 @@ +## Client & Server + +When you're browsing the Internet, you usually start by typing in an address into the browser's address bar, or by initiating a search. + +This means that information needs to flow from a machine (somewhere in the world) connected to the Internet, to your computer, which is also connected to the Internet. + +- The machine that requests some info (your PC, for example) is called **the client**. +- The machine that stores the information is called **the server**. + +For example, if you want to know the current weather in your city today, you might start by opening up a web browser. Next, you type in the web address that provides weather. `https://weather.com`, for example, and press _Enter_. + +In that moment your computer starts talking to another computer over Internet, called a server, usually thousands of miles away. And in milliseconds your computer asks that server for a web document (in our case, `weather.com`) and the server starts to talk back to your computer using a couple of different languages, the most important of which is HTML - **H**yper **T**ext **M**arkup **L**anguage - which is used to tell a web browser how a page looks. + +All of a web document's contents are transferred over the Internet using a set of rules called [HTTP (HyperText Transfer Protocol)](https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol). Such rules are often called _protocols_, and there are a few different kinds used in the Internet. HTTP is the most common one. + +## Hops + +If you've watched the earlier video about how the Internet works, then you probably noticed that machines connected to the Internet don't talk to each other directly. Instead, _packets_ of information sent across the internet might _hop_ across many machines on their journey from the _client_ to the _server_. This makes the Internet resilient to failures. Even if one path from a client to a server fails, another can still be taken by the packets that are sent out. + +However, this introduces a big problem. Every machine that a packet _hops through_ gets to keep that _packet_ for a short time, during which it can be _read_. + +## Security + +You might have noticed that web addresses often start with `https://`. The `HTTPS` is the _Secure_ version of the HyperText Transfer Protocol, and is used by almost all websites and web applications - the protocol guarantees that only the client and the server can understand the information that is sent from one side to the other. + +Watch the following video to learn more about how the Internet is used to send information securely from you to the server and back. \ No newline at end of file diff --git a/Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md b/Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md new file mode 100644 index 0000000..0c11ea6 --- /dev/null +++ b/Let's create our own websites!/Deploy! Put your website on the internet, and get URL you can share.md @@ -0,0 +1,26 @@ +> **Important Reminder:** If this target appears as _Locked_, please check Level 1 lessons, and make sure that you have completed all _milestones_ (including answering quizzes) before you start working on the assignment here. +> +> Once you have moved up to Level 2, this lesson will include a _Complete_ tab that'll let you submit the link to your webpage for review. + +Once you make a website, it is no fun if it just sits in your computer and no one else can see it. + +So, in this tutorial we'll see how to upload it to the internet and get a URL through which anyone in the world can access it! + +Watch the tutorial, and then submit the URL to your webpage hosted on Glitch. We'll try to visit it, and check to make sure that it's accessible. Submitting a link here will let you move onto the next level. + +> **Glitch's UI has changed since this tutorial video was created!** +\ +> If you're confused by any of the changes, we've left notes below the video that should point you in the right direction. + + +## Changes to Glitch's UI + +Here are some instructions that should help you navigate Glitch's updated UI. + +### Previewing your Glitch project + +To preview the Glitch project, there'a _Preview_ button on the bottom pane. Clicking on it will present the same two options - to _Open preview pane_ or to _Preview in a new window_. + +### Changing the name of the Glitch project + +To change the name of the Glitch project, you now need to click _Settings_ on the left pane, and click _Edit details on project page_. In the new page that pops up, click _Edit details_, change the name of the project and click the _Save_ button. \ No newline at end of file diff --git a/Let's create our own websites!/IP address and URL.md b/Let's create our own websites!/IP address and URL.md new file mode 100644 index 0000000..4541d2f --- /dev/null +++ b/Let's create our own websites!/IP address and URL.md @@ -0,0 +1,57 @@ +## IP Address + +Just as every house is assigned a specific and unique postal address, all computers connected to the Internet are also assigned an _IP Address_. IP stands for **I**nternet **P**rotocol. + +There are two kinds of IP addresses: _IPv4_ and _IPv6_. + +An example of an IPV4 address looks like a combination of 4 numbers: + +``` +142.250.76.46 +``` + +**IPv4** is the older version which allows for a maximum of around *4.3 billion* IP addresses. Each of those four numbers (segment) represents 8 _bits_ of information. That means one segment can count as high as 255. + +While 4.3 billion might sound like a lot of addresses, it isn't anywhere near enough to satisfy today's numbers of devices connected to the internet. To satisfy the need for _addressing_ the ever-growing number internet users and devices, a new **IPv6** version was created that can provide _many more_ addresses. + +An example of a _full_ IPv6 IP address would be: + +``` +2001:0db8:0000:0000:0000:ff00:0042:8329 +``` + +Notice how the IPv6 address is much longer than IPv4? It greatly increases the available address space. + +How much more? + +``` +340,282,366,920,938,463,463,374,607,431,768,211,456 addresses +``` + +That's approximately 3.4×10^38^. That's a lot - we're not going to need another version of IP addresses for a long while (if ever). + +> **Do you want to know what your IP address is?** +> +> The simplest way to discover your current IP address is by typing "What is my IP" in Google search. Google will display your IP address at the top of the search results page. + +## Domain Names + +Since IP addresses are unique, they are useful for computers to connect with each other, but we humans have a difficult time reading them, or remembering them. + +**Domains** associate an IP address like ```142.250.76.46``` with a string of text like `google.com`. Thanks to the [**D**omain **N**ame **S**ystem](https://www.cloudflare.com/learning/dns/what-is-dns/) (DNS), both are interchangeable. You can go to http://142.250.76.46 or http://google.com and end up on the exact same website. + +When you type in a domain name into your browser's address bar, your browser contacts the DNS to figure out its IP address, and then uses _that_ to actually contact the server that belongs to the domain. + +In short, a domain name is a unique, easy-to-remember address used to access websites. + +## What's a URL? + +**URL** stands for _Uniform Resource Locator_, it's simply a web address that uniquely identifies a specific resource in the computer network or the Internet. + +For example, the current page’s URL is `https://www.pupilfirst.school/targets/12078`, and it can be divided in 3 parts: + +- ```https://``` is the protocol. +- ```www.pupilfirst.school``` is the domain. +- ```/targets/12078``` is the path to a _resource_. + +Watch the video below to learn more about how networks talk to each other, and how the Internet works. \ No newline at end of file diff --git "a/Let's create our own websites!/Looking inside website using \"Inspect Element\".md" "b/Let's create our own websites!/Looking inside website using \"Inspect Element\".md" new file mode 100644 index 0000000..89f23a7 --- /dev/null +++ "b/Let's create our own websites!/Looking inside website using \"Inspect Element\".md" @@ -0,0 +1,10 @@ +Every website you see on the internet is made with HTML tags just like the ones you learned before. + +And you can actually see their sources! + + +There are a few ways to access Google Chrome Inspect Element: + +- Right-click anywhere on the webpage, and at the very bottom of the menu that pops up, you will see _Inspect_. Click that. +- Click the hamburger menu (the icon with 3 stacked dots) on the far right of your Google Chrome toolbar, click *More Tools*, then select *Developer Tools*. Alternately, in the file menu, click *View > Developer > Developer Tools*. +- Prefer keyboard shortcuts? Press `⌘+⌥+I` on macOS, or `F12` on Windows to open *Inspect Elements* without clicking anything. \ No newline at end of file diff --git a/Let's create our own websites!/Our first HTML page - in about 10 minutes.md b/Let's create our own websites!/Our first HTML page - in about 10 minutes.md new file mode 100644 index 0000000..724d63c --- /dev/null +++ b/Let's create our own websites!/Our first HTML page - in about 10 minutes.md @@ -0,0 +1,39 @@ +Watch and follow the steps below to make your first webpage! + +> Note: You will create the files being covered in this level, under your `wd101\html-css` folder. Thus, on your terminal, execute + +```bash +## Go to html-css folder +cd /home/NAME/wd101/html-css +``` + +Once you are inside `html-css` folder, open VSCode from the terminal by tying in `code .`. + +```bash +code . +``` + + +## Adding a second page, and linking to it + +Now that you've created _one_ page, let's quickly take a look at how to add a _second_ page, and then _link_ to it. + +To create a second page, let's create a new HTML file: `about.html` in the same folder as `index.html`. You can write whatever you like in this page. + +Now, to link to this page from `index.html`, add the following tag. + +```html + +About +``` + +In the `about.html` file, you can add a link _back_ to the `index.html` file. + +```html + +Homepage +``` + +Such links that allow you to navigate between webpages are called _hyperlinks_. + +Check out [documentation on W3Schools](https://www.w3schools.com/html/html_links.asp) to learn more. \ No newline at end of file diff --git a/Let's create our own websites!/The tag - let's show an image in our page.md b/Let's create our own websites!/The tag - let's show an image in our page.md new file mode 100644 index 0000000..e72d1fa --- /dev/null +++ b/Let's create our own websites!/The tag - let's show an image in our page.md @@ -0,0 +1,3 @@ +All text and no pictures make any website boring :) + +So, let's add an image to our page. \ No newline at end of file diff --git a/Let's create our own websites!/The Internet.md b/Let's create our own websites!/The Internet.md new file mode 100644 index 0000000..129e96e --- /dev/null +++ b/Let's create our own websites!/The Internet.md @@ -0,0 +1,12 @@ + + + + +## What is the Internet? + +The origin of the Internet dates back to the 1960s, with it starting out as a way to connect computers across the United States. Today, billions of devices are **interconnected** over the Internet. + +In the following video, Vint Cerf, one of the _fathers of the internet_ explains the history of the net and how no one person or organization is really in charge of it. + diff --git a/Let's create our own websites!/The World Wide Web (WWW).md b/Let's create our own websites!/The World Wide Web (WWW).md new file mode 100644 index 0000000..c4fcd3f --- /dev/null +++ b/Let's create our own websites!/The World Wide Web (WWW).md @@ -0,0 +1,31 @@ +## The Web + +The World Wide Web is commonly shortened to _WWW_, or simply called _the Web_. + +A broader definition comes from the organization that Web inventor Tim Berners-Lee helped found, the [World Wide Web Consortium (W3C)](https://www.w3.org/). + +> The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge. + +In simple terms, the World Wide Web is a network of public webpages connected to one another so that information is exchanged between computers on the Internet. + +> **Note:** The _Internet_ and the _Web_ are different things: The _Web_ uses the _Internet_ to pass through information. + +## Webpage + +A _webpage_ is a document on the World Wide Web, created using HTML, that can be viewed in a web browser. + +To access a webpage you can either: + +- Type its URL, like `http://google.com` in your Web browser... +- ...or click on a link, like [this one](http://google.com). + +> **What's a website?**\ +> A _webpage_ is a single HTML document. A collection of such documents, usually linked to each other under the same domain is called a _website_. + +## Web browser + +A web browser, or simply _browser_ is an application used to access websites. + +Popular web browsers include Microsoft Edge, Google Chrome and Mozilla Firefox. + +> In this course, we're using _Google Chrome_ in all of our video demonstrations. You can [install Google Chrome by visiting this link](https://www.google.com/intl/en_in/chrome/). \ No newline at end of file diff --git a/Let's create our own websites!/Web Browsers.md b/Let's create our own websites!/Web Browsers.md new file mode 100644 index 0000000..9e13ba9 --- /dev/null +++ b/Let's create our own websites!/Web Browsers.md @@ -0,0 +1,38 @@ +We all use web browsers like Google Chrome, Mozilla Firefox and Microsoft Edge every day, but do we understand what they are? + +Let's find out, what made the web browsers, one of the most used software application in today's world. + +### What is web browser? + +A **Web Browser** is nothing but a software application, which is used to access the information available on the internet. When a user like you and me requests some information, the web browser fetches the data from a web server and then displays the response on your desktop or mobile device. The information is transferred using the **Hypertext Transfer Protocol (HTTP)**, which defines how text, images and video are transmitted on the web. + +### How does a web browser work? +Every webpage, image and video available on the internet, has its own unique Uniform Resource Locator (URL). You've already learned about **URL** in the previous video. +It's like a street address that tells your browser where to go on the Internet. + +When you type a URL into the browser's address bar and press `Enter` on your keyboard, the browser will load the page associated with that URL. + +It uses a piece of software called a **rendering engine** to translate that data into text and images. This data is written in **Hypertext Markup Language** (HTML) and web browsers read this code to create what we see, hear and experience on the internet. + +### History of the web browser +The first web browser, **WorldWideWeb** was created in the year of 1990 by Tim Berners-Lee. +Though, it was completely different from the World Wide Web we use today. + +In 1993, a new browser Mosaic was revealed by Mark Andressen and their team. It was the first browser to display text and images at a time on the device screen. +Later in 1994, he also created another browser called, **Netscape**. + +Microsoft launched their Internet Explorer in 1995, and soon it became the most popular web browser. + +In later years, modern browsers like Mozilla Firefox, Google Chrome, Apple Safari came to market. + +### Website Cookies +Websites save information about you in certain files called **cookies**. +Cookie gets saved on your computer for the next time you visit that site. Upon your return, the website code will read that cookie to see that it’s you. + +For example, when you go to a website, the page remembers your username and password – that’s made possible by a cookie. +Some cookies are used to remember our interests, our browsing patterns, etc. Websites show us ads based on our interests, using cookies. + +### Conclusion +Browsers also does other things like, it keeps your personal information secure and check sites for viruses. It also keeps tracks of sites you've visited and keeps relevant information in its cache. So, the next time you request those same websites, they will load up faster because there's fewer data to download and update the cached version. + +That's it for this lesson, see you in the next one. \ No newline at end of file diff --git a/Let's create our own websites!/You can make and host your own website today!.md b/Let's create our own websites!/You can make and host your own website today!.md new file mode 100644 index 0000000..c0ac9d9 --- /dev/null +++ b/Let's create our own websites!/You can make and host your own website today!.md @@ -0,0 +1 @@ +Before we get started with programming in earnest, let's have some fun and create our own websites! \ No newline at end of file diff --git a/Styling Matters/Introduction to CSS Frameworks.md b/Styling Matters/Introduction to CSS Frameworks.md new file mode 100644 index 0000000..1613ad7 --- /dev/null +++ b/Styling Matters/Introduction to CSS Frameworks.md @@ -0,0 +1,49 @@ +# Streamlining Styling with CSS Frameworks: + +In our previous lessons, we've covered the essentials of adding classes to a CSS file and applying them within HTML files. While it's highly recommended to employ external CSS files to enhance code organization and prevent redundancy, there comes a point in larger projects where crafting CSS rules can become a time-consuming endeavor. + +## Introducing CSS Frameworks: + +To address this challenge, many professional developers opt for a forward-thinking approach – leveraging CSS frameworks. But what exactly is a CSS framework? + +## Understanding CSS Frameworks: + +In essence, a CSS framework comprises multiple pre-designed CSS style sheets tailored for the use of web developers and designers. These style sheets offer a streamlined way to infuse web design functionalities into our HTML, encompassing tasks such as color schemes, layout structuring, font choices, navigation bars, and more. + +## Efficiency and Convenience: + +With a CSS framework, you need only focus on crafting well-structured HTML with appropriate classes and IDs. The framework does the heavy lifting, supplying predefined classes for common web elements such as buttons, cards, sliders, navigation bars, and flexible column-based layouts. This approach simplifies the styling process and accelerates the development of complex web pages. + +### Now, what are the advantages of using CSS Framework? +1. First, you can quickly create a user-friendly and visually appealing User Interface. +2. CSS frameworks make it simple to create websites that are compatible with multiple browsers and browser versions. +3. Teams with multiple developers, especially larger ones, can really appreciate the standards that a CSS framework brings to the table. + +### Popular CSS frameworks: + +#### Bootstrap +I can’t think of a conversation about CSS frameworks that wouldn’t include Bootstrap. Twitter introduced the framework in 2011 to make responsive web design easily accessible to developers. Here are some reasons why you should consider using it in your projects. +1. **Most popular front-end framework:** Bootstrap is among the most popular open source projects in existence. +2. **Massive Ecosystem:** Among front-end frameworks, Bootstrap’s ecosystem is unmatched. It offers, out of the box, a vast library of layouts, themes, UI elements, panels, modals, buttons, alerts, cards, etc., that devs and designers can choose from and implement. +3. Bootstrap is easily customizable. + +Bootstrap website Link: http://getbootstrap.com/ + +#### Tailwind CSS +**“Most CSS frameworks do too much”** — Tailwind‘s motto clearly explains why it’s a lightweight framework that offers freedom to developers. It doesn’t come with a specific set of design elements, but rather allows you to implement your own unique style faster. +**Reasons to Use Tailwind** +1. **Highly Customizable:** Tailwind CSS comes with a default configuration, but it allows us to easily customize the - styling, themes, spacing, palettes, etc. +2. It comes with commonly used *Utility Patterns* to deal with standard requirements: specifying and organizing classes, cascading classes, etc. +3. Even though Tailwind doesn’t include any pre-designed components, it allows you to create your own custom components that you can reuse throughout your projects. + +Tailwind website Link: https://tailwindcss.com/ + +**To conclude** + +There are a lot other CSS frameworks available in the market today such as: Foundation, Bulma, Miligram, Materialize etc. Some of them offer pre-made components, some only provide utility classes and don’t offer styling. In one way or another, they all help us to boost our productivity. + +So, choosing a framework with a high level of community support, such as Bootstrap or Foundation, is a safe choice since the large community supports the project. + +But on the other hand, since many frameworks become bloated over time, newer and better options start emerging. Tailwind is one of them as is focuses on improving coding productivity while maintaining a small size and a very specific set of features. + +So, in the next lesson we will find out, how to use a CSS framework for styling. \ No newline at end of file diff --git a/Styling Matters/Introduction to Tailwind CSS.md b/Styling Matters/Introduction to Tailwind CSS.md new file mode 100644 index 0000000..260fd97 --- /dev/null +++ b/Styling Matters/Introduction to Tailwind CSS.md @@ -0,0 +1,14 @@ +# Intro to Tailwind + +In this course, we're not going into detail about everything that you can do with CSS. + +CSS is a very large and complex topic that deserves a separate course of its own. + +So, instead of learning more about _traditional_ CSS, we're going to quickly jump over to using a _framework_. Developers often use _frameworks_ or _libraries_ to make their job easier, and **Tailwind** is one such CSS framework. + + +** Video ** + +As we've mentioned in the video, one of things that a CSS library like Tailwind does is to _reset_ the base styles of all elements on the page to a safe default. + +If you would like to learn more about why such a CSS reset is required, we recommend reading the article [Reboot, Resets, and Reasoning](https://css-tricks.com/reboot-resets-reasoning/), authored by Chris Coyier. \ No newline at end of file diff --git a/Styling Matters/Tailwind's relationship with JavaScript.md b/Styling Matters/Tailwind's relationship with JavaScript.md new file mode 100644 index 0000000..3c68b48 --- /dev/null +++ b/Styling Matters/Tailwind's relationship with JavaScript.md @@ -0,0 +1,4 @@ +# CSS & JS + +The usage of modern web development tools is deeply tied to the JavaScript ecosystem. Learn how properly using a CSS framework like Tailwind is also dependent on knowing your way around JS. + diff --git a/Styling Matters/Using CSS Frameworks for styling.md b/Styling Matters/Using CSS Frameworks for styling.md new file mode 100644 index 0000000..46224ff --- /dev/null +++ b/Styling Matters/Using CSS Frameworks for styling.md @@ -0,0 +1,62 @@ +# Using CSS framework + +In previous lessons, we delved into the concept of CSS frameworks, explored their advantages, and discussed the popular frameworks available in today's market. We also explored how CSS frameworks can enhance our productivity by offering a range of pre-designed UI components and utility classes. + +In this lesson, our focus will be on the practical aspect: how to integrate a CSS framework into an HTML project. + +There are various methods to incorporate a CSS framework into a web application, but for the sake of convenience, we'll concentrate on the most straightforward approaches. + +## How to add a CSS framework to any HTML project? +There are number of different ways to use a CSS framework in a web application. In this lesson, we will focus only on the most convenient ones. + +### Method 1: Using a Content Delivery Network or CDN + +A CDN is a group of interconnected computers, that are distributed around the globe. Their goal is to provide your data or file or content from the nearest possible location, from where you are sitting right now. Whether we know it or not, every one of us interact with CDNs on a daily basis, when reading articles on news sites, shopping online or watching YouTube videos. + +All modern CSS frameworks have uploaded their stable releases to these CDNs. You only need to include their compiled CSS and JS file to your HTML webpage. + +#### For Bootstrap +As we saw in the previous lesson, Bootstrap is one of the most popular CSS, HTML, and JavaScript framework that exists today. + +Using the Bootstrap CDN is a great way to deliver the content to your users, quickly and efficiently, based on their geographic location. To link Bootstrap in HTML you can use this method: + +Just copy this stylesheet `link` tag to the `` of your HTML file. + +```html + + +``` + +##### One advantage of using the Bootstrap CDN is: +Many users already have downloaded Bootstrap from CDN when visiting another site. As a result, it will be loaded from the cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time. + +#### For Tailwind CSS +Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. + +Tailwind comes with a default configuration, but it allows us to easily customize the - styling, themes, spacing, palettes, etc. + +To add Tailwind to your application, just copy this stylesheet `link` tag to the `` of your HTML file. + +```html + +``` + + +### Method 2: Downloading the files locally +Another way of importing these CSS frameworks to HTML is to directly download the files locally to your HTML project folder. Then you can simply link them as normal external stylesheet and JS file. + +#### For Bootstrap +The files can be downloaded from their official website: +https://getbootstrap.com/docs/5.2/getting-started/download/#compiled-css-and-js + +Keep the `bootstrap.min.css` file in your project folder and link it inside the `head` of your HTML. + +```` + +```` + +Once you integrate Bootstrap or TailwindCSS with HTML, you can simply use their respective classes and style your HTML files in the desired manner. + +You can refer to the official documentation of the CSS framework that you are going to use in your project, for more information on the different components and utility classes available. + +That's it for this lesson, see you in the next one. diff --git a/Styling Matters/Working with Tailwind.md b/Styling Matters/Working with Tailwind.md new file mode 100644 index 0000000..b501440 --- /dev/null +++ b/Styling Matters/Working with Tailwind.md @@ -0,0 +1,9 @@ +# Working with Tailwind + +This concise overview provides a glimpse into the effective utilization of Tailwind CSS features to enhance the visual appeal of a web page. Additionally, you can access the comprehensive Tailwind CSS documentation at https://tailwindcss.com/docs for in-depth learning + +** Video ** + +It's important to note that Tailwind isn't the only option when it comes to choosing a CSS framework. In the video, we've mentioned [Bootstrap](https://getbootstrap.com) and [Materialize](https://materializecss.com), but there are [more good options](https://dev.to/theme_selection/best-css-frameworks-in-2020-1jjh). + +> **New VS Code trick - Multiple cursors:** In the above video, you can see how we can employ multiple cursors to quickly add the same text to multiple lines. Check out [the official documentation regarding multiple cursors](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor) to learn more about how this feature can be used. \ No newline at end of file diff --git a/Welcome to the course/About Discord community.md b/Welcome to the course/About Discord community.md new file mode 100644 index 0000000..3a5d315 --- /dev/null +++ b/Welcome to the course/About Discord community.md @@ -0,0 +1,82 @@ +# Thriving in Our Programming Community + +As you embark on your journey in the landscape of programming, it's essential to recognise that you're not alone. The vast programming community is here to support and enrich your experience every step of the way. Your achievement lies in the interconnected community that shapes it. In this lesson, we'll delve into the significance of engaging actively with the programming community and how it can improve your coding skills to new heights. + +## The Power of Programming Communities + +Coding is an art which thrives on collaboration and shared knowledge. By immersing yourself in the programming community, you open doors to a world of collective expertise. Whether you're working on a complex algorithm or seeking guidance on best practices, the community is your go-to resource. + +The programming community facilitates: + +1. **Collaboration**: Bringing together diverse minds can lead to innovative solutions that an individual might not have considered. +2. **Learning from Others**: Exploring different perspectives helps you grasp concepts faster and broadens your understanding. +3. **Problem Solving**: Tackling coding challenges becomes smoother with the input and insights of fellow programmers. + +The sense of community has a huge impact on human advancement. Here is a TedX session about how communities help each other create an exponential impact. An impact not just on your path, but in the path of other people who work along with you too. You are an important part of the community we seek to develop, as an important part of this future, we urge you to be inclusive and help us build this into an impactful ecosystem. + +https://youtu.be/7yNl-AsQRRw + +## Discord: The Platform for Building Our Coding Community + +At the heart of our community lies Discord, a versatile and powerful platform that enhances your coding experience in numerous ways: + +1. **Real-time Communication**: Discord provides an interactive space for instant discussions, allowing you to seek help and share insights without delay. +2. **Dedicated Channels**: Organized channels for specific topics, projects, and interests enable focused conversations & knowledge sharing. +3. **Support**: A support pipeline of dedicated staff, who are available to answer and offer a helping hand for all your questions and queries related to the course. +4. **Network**: A network for communication with all the students and alumni taking our courses from across the country. Opening gates to conversations related to your programming stories and problems/solutions you have faced during your learning experience and a network of other developers. + +Check out this video, which will walk you through all the channels where you can interact with on discord. + +## Open Source Platforms: Pillars of Collaboration + +Several open-source platforms serve as pillars of collaboration, enabling programmers to contribute, learn, and grow together: + +- **[GitHub](https://github.com)**: A hub for collaborative coding, version control, and open-source project hosting. +- **[Stackoverflow](https://stackoverflow.com/)**: A platform that supports shared coding endeavors, fostering a strong developer community. + + +## Graduate attribute for Web development professionals + +While going through your web development courses, students will be exposed to a range of attributes that are of highly valued in the programming community across the globe. And are some necessary aspects for the web development professionals. It is important that you take note of these values and focus to build up on these skills as you approach your professional path in the area of web development. Use the discord community and initiate conversations about these topics with your fellow learners. + +1. **Comprehensive Web skills** : Develop mastery in HTML,CSS & JS, and other web technologies, enabling you to develop complex and responsive web solutions. +2. **Full-stack proficiency** : Acquire front-end and back-end expertise, integrating databases and APIs to build complete web applications. +3. **Problem-Solving Mastery** : Analyse and practise complex technical issues, enhancing your ability to created optimised solutions. +4. **Effective Collaboration** : Utilize Git for version control and teamwork, communicating and contributing effectively within development groups. +5.**User-Focused Design**: Learn about UI/UX and design principles and understand the importance of catering intelligent user interfaces. +6. **Security and Ethical Awareness** : Learn about security measures, prioritising data privacy, and adhere to ethical standards while showcasing professionalism and accountability. + +Here is a [reference link](https://www.ugc.gov.in/e-book/locf/mobile/index.html#p=7), go to page number 6 to read more about graduate attributes._ + + +## Behavioural Rules and Standards + +To ensure a positive and productive experience within the programming community, we adhere to the following behavioural rules and standards: + +1. **Respectful Communication**: Treat all community members with courtesy and respect. Avoid offensive language, personal attacks, and discriminatory remarks. + +2. **Constructive Criticism**: Provide feedback in a constructive manner, focusing on the code and ideas rather than attacking individuals. + +3. **Collaborative Environment**: Embrace collaboration, share insights, and engage in healthy discussions to promote collective learning. + +4. **Plagiarism-Free Zone**: Give credit where it's due and refrain from submitting others' work as your own. Plagiarism undermines the spirit of learning and growth. + +5. **Inclusivity and Diversity**: Embrace diversity of backgrounds, experiences, and perspectives. Our community is strengthened by its rich tapestry of voices. + +6. **Helping Others**: Contribute positively by assisting fellow members, particularly those who are newer to coding. A helping hand can make a significant impact. + +7. **Adherence to Platform Guidelines**: Respect the guidelines of the platforms we use, such as GitHub and GitLab, when contributing to projects. + +## Resources for Cultivating Your Coding Community Involvement + + +Remember community engagement is all about sharing, do not refrain from sharing whenever you come across something interesting, that might intrigue your fellow programmers. To start with consider exploring these resources that we would like to share with you: + + +* The Mythical Man-Month Book by Fred Brooks : An interesting read about software development, presenting some ideas about second-system effect and advocacy of prototyping. + +* [Some interesting project ideas for when you are done with our WD courses.](https://www.crio.do/projects/category/web-development-projects/) + + +In your coding journey, remember that the programming community is your steadfast companion. Engage, collaborate, and share on the discord channel, and contribute to the community that will shape your path to success. + diff --git a/Welcome to the course/About Puilfirst LMS.md b/Welcome to the course/About Puilfirst LMS.md new file mode 100644 index 0000000..3e24e6a --- /dev/null +++ b/Welcome to the course/About Puilfirst LMS.md @@ -0,0 +1,77 @@ +## What makes the Pupilfirst LMS special? + +[Pupilfirst LMS is an open-source project](https://github.com/pupilfirst/pupilfirst), built right here in India, by the Pupilfirst team. + +Our team uses this LMS to run courses such as the one you're looking at right now. + +This lesson will give you a quick tour of the Pupilfirst LMS. + +To sign in, you have multiple options. When you first get started, you'll be visiting [pupilfirst.school](https://www.pupilfirst.school), clicking _Sign In_, and choosing one of the many options to sign in. + +Sign-in using a third-party account, or with one-time link sent to your email, or with a password. +Sign-in using a third-party account, or with one-time link sent to your email, or with a password. + +Once you sign-in successfully, you will see the list of courses you are a part of on your *Dashboard*. + +From one of the listed courses on your _Dashboard_, click _View Course_ to view its curriculum. + +## Curriculum + +This is the main page where you will see all of the course content. + +Your course curriculum! +Your course curriculum! + +## This course has 8 levels + +To complete the course, you need to complete all levels in the course. + +Levels in the course; you can select a level from the dropdown and see the lessons in that level +Levels in the course; you can select a level from the dropdown and see the lessons in that level + +## How to complete a level, and *level up* + +To complete a level, you must complete all lessons marked as **milestone targets**. + +Pay special attention to lessons marked as "milestone targets". Focus on completing these in the level that you're in. + +## How to complete lessons + +Start by clicking on a lesson to view its content - you'll start on the _Learn_ tab which shows the content of the lesson. + +Clicking on a lesson reveals its content. +Clicking on a lesson reveals its content. + + +Some lessons can be _Locked_ until you complete some prerequisites. Once you complete the prerequisites for the lesson (some of the previous lessons), you will be able to complete the lesson as well. + +Some lessons can also be _locked_ until you reach the level they're in. + +> **Important reminder:** Focus on completing milestone targets in your current level, and move up through the levels. That'll unlock more lessons. + +An example of a lesson that is "locked". +An example of a lesson that is "locked". + +Some lessons can be completed by simply **marking them as complete**. + +An example of a lesson that is completed by clicking on "Mark As Complete". +An example of a lesson that is completed by clicking on "Mark As Complete". + +Some lessons can be completed by **visiting a link**. + +An example of a lesson that is completed by "Visiting a Link". +An example of a lesson that is completed by "Visiting a Link". + +Some lessons can be completed by **taking a quiz**. + +An example of a lesson that is completed by clicking by "Taking a Quiz". +An example of a lesson that is completed by clicking by "Taking a Quiz". + +Some lessons are completed by **submitting your work** for evaluation. These lessons can be _Locked_ until you complete some prerequisites. They will change to _Submitted_ once you've uploaded your work, and then it'll change to _Passed_ or _Failed_ after your submission is reviewed. + +In WD101, the submissions students make will go through a set of automated tests and if the submission passes the test, it is accepted, else it is rejected. Students are provided feedback which will allow them to work on the submission again and resubmit to get a passing grade. + +## How to know you have completed the course? + +Please go to the [report](https://www.pupilfirst.school/courses/1802/report) page. If all the level progress markers are *green*, it means that you have completed all the levels and hence the course is complete. + diff --git a/Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md b/Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md new file mode 100644 index 0000000..d0ee20f --- /dev/null +++ b/Welcome to the course/Adherence to the Code of Conduct of Pupilfirst School.md @@ -0,0 +1,67 @@ +As part of the application process, you have acknowledged and accepted the Code of Conduct of Pupilfirst School. It is essential for a student to understand the code of conduct and ensure all your actions within the WD courses aligns within that. Failure to do so may result in certain actions being taken, which could impact your continued participation in the course as a regular student. + +Pupilfirst School's Code of conduct has 2 standards: + + * Academic Standards + * Behavioural Standards + + +## What are the Academic Standards of Pupilfirst School? + +Academic standards are expectations/guideline for a student to follow while working on WD courses to ensure proper learning outcomes. At Pupilfirst, we give the utmost priority to academic integrity, and we expect all our students to be ethical and honest in all their activities within Pupilfirst school. + + +Important academic standards to be followed at Pupilfirst School : + +### ** Do Not Plagiarise/Copy** +Plagiarism refers to the act of using/copying someone else's work and presenting it as your own. At Pupilfirst we believe in the importance of submitting original work and have enforced a strict review mechanism to detect plagiarism at any level of the course. + + +Example of actions that are categorised as an attempt to plagiarism: +* Misappropriating or passing off someone else’s work as your own. +* Tampering with another person's work and attempting to present it as your original creation. +* Working on individual assignments as a group and then submitting identical or near-identical submissions. +* Copying solutions from external sources on the internet and then submitting them for review. + +All of your submissions will undergo a thorough plagiarism evaluation. Our internal committee is responsible for conducting this examination. Pupilfirst School employs an advanced AI-powered plagiarism detection system, and any endeavor to engage in plagiarism will be flagged, assessed by a subject matter expert, and followed by appropriate actions as necessary. + + + **What happens when a student’s WD 101 final capstone submission is confirmed as plagiarised?** +When a students' WD 101 final capstone submission is confirmed as plagiarised based on the similarities to previous submissions that were received, the submission will be rejected, and the students' access to the WD 101 course will be restricted. + +*A student whose WD 101 final capstone submission was confirmed as plagiarised* +* Will not get a course completion certificate. +* Will not be onboarded to WD 201 course. +* Will continue to have preview access to the course. + +**Note:** If your WD 101 final capstone submission is confirmed as plagiarised, and you are confident that your submission is original, you can challenge the decision by sharing your grievance at **wd-grievance@pupilfirst.org**. The Grievance Redressal Team will attend to your query and investigate within 24–48 hours. + + +### ** Always follow milestone target instructions** +All assignments within WD courses come with clear instructions from industry expert coaches on how to approach and complete the task. Always follow the instruction, clear all your doubts and submit only original work for review. + + +### ** Follow the timelines listed in the course calendar** + +It is important for you to access and follow the timelines as per the [course calendar](https://www.pupilfirst.school/courses/1802/calendar) set for every cohort. WD courses follow deadline(s) and the same will be marked in respective course calenders. Post WD 101 final deadline, WD 101 course access of students who cannot meet the deadline requirement will be restricted. + +*A student who misses the WD 101 final capstone deadline* +* Will not get a course completion certificate. +* Will not be onboarded to WD 201 course. +* Will only have preview access to the course. + + +### ** Clarify all your doubts and questions over Pupilfirst Discord Server** +As you progress in the courses, you may face some difficulty in the course or submissions. Always feel free to ask all your questions within the learning community over Pupilfirst Discord Server. Industry experts and Teaching Assistants will help you clear your doubts and progress in the course. + + +### ** Peer Learning** +Pupilfirst is committed to a Learner-Centered Model approach that promotes peer learning. We strongly encourage you to engage in knowledge sharing and assist fellow students in understanding concepts covered within the course; this can happen in your classroom during the course allotted hours, on your campus during breaks or in Pupilfirst Discord server. + +However, it is important to note that sharing your solution or code with others is not allowed. This restriction is in place to ensure the integrity of the learning process and avoid any potential consequences, such as audit actions. + +## What Are Pupilfirst School's Behavioral Standards? + +Behavioral standards encompass the guidelines and expectations that students are required to follow when engaging with the community or interacting with fellow learners. These standards aim to foster an environment that is open, welcoming, diverse, inclusive, and conducive to a healthy community. + +Detailed information regarding behavioral standards will be provided in the upcoming lesson titled "About the Discord Community."  \ No newline at end of file diff --git a/Welcome to the course/Build your student profile.md b/Welcome to the course/Build your student profile.md new file mode 100644 index 0000000..1bf58f8 --- /dev/null +++ b/Welcome to the course/Build your student profile.md @@ -0,0 +1,6 @@ +Congratulations on getting onboarded to WD101 course. + +We would like to understand your current English comprehension (Listening & Reading) and Programming background to create your student profile. Note that this **does not** affect your eligibility to continue to the WD201 course. + +Go ahead and click the _Submit Form_ button below and fill in the form that appears. + diff --git a/Welcome to the course/For Windows users: VSCode works well with WSL.md b/Welcome to the course/For Windows users: VSCode works well with WSL.md new file mode 100644 index 0000000..7b5fc16 --- /dev/null +++ b/Welcome to the course/For Windows users: VSCode works well with WSL.md @@ -0,0 +1,19 @@ +> **Not using Windows?**\ +> Mark this lesson as complete, and move along. + +## Are you running an older version of Windows? + +If you're using virtual machine software like _VMWare Workstation Player_ or _VirtualBox_, then install Visual Studio Code _inside_ your virtual machine's Ubuntu OS, instead of inside Windows. + +## For Windows 10 & 11 users... + +If you're running Windows 10 or 11, you're probably using WSL. This means your code will be kept inside the _Ubuntu_ OS running inside Windows. + +When Visual Studio Code is installed inside a Windows PC that has WSL enabled, you'll need to install an additional plugin - [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) that will let you access files on the Ubuntu system running _inside_ Windows transparently. + +1. Install the [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) Visual Studio Code extension. +2. In your Ubuntu terminal, navigate to a folder you want to open with Visual Studio Code, and type `code .`. That's `code` followed by the `.` (period, or full-stop) symbol. + +This will open the folder inside Visual Studio Code running natively in Windows, but you'll be editing files inside the Ubuntu OS. + +> **Reminder:** Typing `code .` is the quickest & most reliable way to open Visual Studio Code from the command-line. \ No newline at end of file diff --git a/Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md b/Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md new file mode 100644 index 0000000..a8d4b50 --- /dev/null +++ b/Welcome to the course/How to withdraw from LITE Advanced Web Development Program.md @@ -0,0 +1,12 @@ +If you find that you are unable to comply with the guidelines mentioned in the previous target, you have the option to withdraw yourself from the LITE program by deleting your LMS profile. + +Please be aware that this decision is completely voluntary, and it is important to carefully consider the implications before proceeding with the deletion of your profile. + +* Deleting your profile is a permanent action and cannot be reversed. +* Upon deletion, your LMS profile will be permanently deleted, and your access to the course will be suspended. +* Pupilfirst will not be held responsible for any consequences that may arise as a result of account deletion. + +**Steps to Delete account** +* Step 1 : Go to your [user profile](https://www.pupilfirst.school/user/edit). +* Step 2 : Scroll down to the bottom of the webpage +* Step 3 : Click on "Delete your account: button \ No newline at end of file diff --git a/Welcome to the course/Install Ubuntu using virtual machine software.md b/Welcome to the course/Install Ubuntu using virtual machine software.md new file mode 100644 index 0000000..a0b156e --- /dev/null +++ b/Welcome to the course/Install Ubuntu using virtual machine software.md @@ -0,0 +1,8 @@ +If your computer is running Windows older than _Windows 10_, then you're not going to be able to use the WSL feature that we documented in the last target. + +Instead, the easiest method to run Ubuntu inside an older version of Windows is to use virtual machine software. + +We have documented how to use two such software to install and run Ubuntu. You can find these in the _Appendix_ of the course. Here are quick links to the two available options: + +1. **Recommended:** [Install Ubuntu using VMware Workstation Player](https://www.pupilfirst.school/targets/18681) +2. [Install Ubuntu using Virtualbox](https://www.pupilfirst.school/targets/18680) \ No newline at end of file diff --git a/Welcome to the course/Installing Ubuntu on Windows, using WSL.md b/Welcome to the course/Installing Ubuntu on Windows, using WSL.md new file mode 100644 index 0000000..11d194e --- /dev/null +++ b/Welcome to the course/Installing Ubuntu on Windows, using WSL.md @@ -0,0 +1,24 @@ +> **Important Note**: This lesson is for Windows users only. If you're using macOS, or Linux, simply mark this one as complete and move on. + +## Why Linux, why not Windows? + +You can develop perfectly fine on any operating system. However, many developers choose Linux or OSX (Mac) as their development environment because countless developer _tools_ are built for Unix systems _first_. This makes it typically (much) easier to set up on Unix systems. It is also generally accepted that the Unix command line is superior to the Windows command line. + +In this course, we're assuming that you have access to a Linux development environment because it makes it easier to build and maintain the course content when it targets just one environment. + + +## Using WSL + +Follow the official Windows instructions for installing WSL on your computer running Windows 10 or above: + +https://docs.microsoft.com/en-us/windows/wsl/install + +### Notes + +1. You'll need administrative permissions on your computer to be able to set up WSL. + +2. If you're running Windows 11, or an up-to-date version of Windows 10, you can set up WSL effortlessly - follow the instructions on the page linked above. + +3. If you're running an older version of Windows 10, you might need to follow the [Manual installation steps for older versions](https://docs.microsoft.com/en-us/windows/wsl/install-manual). When following manual installation steps, remember to choose Ubuntu 20.04 as your distribution in [Step 6 - Install your Linux distribution of choice](https://docs.microsoft.com/en-us/windows/wsl/install-manual#step-6---install-your-linux-distribution-of-choice). + +> At the end of the installation process, make sure that you have WSL version 2 installed by running `wsl --list -v` from the Windows command line to show running virtual machines and their WSL versions. The older version 1 of WSL is outdated and can cause issues when running applications inside it. \ No newline at end of file diff --git a/Welcome to the course/Installing Visual Studio Code.md b/Welcome to the course/Installing Visual Studio Code.md new file mode 100644 index 0000000..229f610 --- /dev/null +++ b/Welcome to the course/Installing Visual Studio Code.md @@ -0,0 +1,19 @@ +We'll be using Visual Studio Code (VS Code) in many parts of this course. Watch the following video to learn how to install Visual Studio Code on your system. + + +## A good editor + +[Visual Studio Code](https://code.visualstudio.com/) is [the most popular editor among developers today](https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-integrated-development-environment). It's free, open-source, and has a great community that has built numerous extensions (plugins). + +## How to install it + +Go through the official documentation here: https://code.visualstudio.com/docs/setup/setup-overview + +Follow the instructions specific to your OS. + +## Running Visual Studio Code + +The quickest and most reliable way to start Visual Studio Code is from the command-line. + +From your command-line, navigate to the directory you want to open in Visual Studio Code, and type `code .` (_code_ followed by the _period_ character). + diff --git a/Welcome to the course/Installing the Prettier VSCode extension.md b/Welcome to the course/Installing the Prettier VSCode extension.md new file mode 100644 index 0000000..35a0c71 --- /dev/null +++ b/Welcome to the course/Installing the Prettier VSCode extension.md @@ -0,0 +1 @@ +Let's begin using Visual Studio Code by installing the _Prettier_ extension. Prettier helps keep our code _pretty_ (hence the name). \ No newline at end of file diff --git a/Welcome to the course/Introduction to command-line for beginners.md b/Welcome to the course/Introduction to command-line for beginners.md new file mode 100644 index 0000000..6fbd3e9 --- /dev/null +++ b/Welcome to the course/Introduction to command-line for beginners.md @@ -0,0 +1,27 @@ +As a web developer, you're likely going to spend a lot of time doing things on the command-line. It's gives you quick access to a variety of essential tools. + +**However,** when you're starting out, there's a few things - some basics - that you need to get comfortable with. Thankfully, it won't take too much time either. + +We'll use [Ubuntu's command-line tutorial for beginners](https://ubuntu.com/tutorials/command-line-for-beginners) to quickly run you through some _essential_ knowledge (and a bit of trivia) involving the command-line. + +## Good command-lines are built according to a standard + +The tutorial linked in this lesson is written from the perspective of a user running Ubuntu as their computer's OS. Thankfully, Ubuntu implements a [POSIX-standard](https://en.wikipedia.org/wiki/POSIX) command-line. + +This means that commands that your write in on one POSIX-standard command-line will usually work exactly the same way in another, even if it's not running on a system with a different operating system. + +All of the topics covered in the linked tutorial should work the same, regardless of whether you're using a terminal inside the Ubuntu OS, macOS, or Windows' WSL, or any other Linux variant. + +## Things to focus on learning + +- Navigating the folder structure of your system: `ls`, `cd`. +- Creating and deleting folders: `mkdir`, `rmdir`. +- Creating files using output redirection: `echo`, `cat` +- Viewing and deleting files: `less`, `rm`. +- Moving & renaming files and folders: `mv`, `cp`. +- Piping output from one command to another. +- When it's appropriate to _become_ the root user using the `sudo` command. +- How to view hidden files and folders. +- Using *switches* to modify the actions of commands. + +To complete this lesson, go through the tutorial ["The Linux command line for beginners"](https://ubuntu.com/tutorials/command-line-for-beginners), and check your understanding using a quick quiz. \ No newline at end of file diff --git a/Welcome to the course/Welcome to WD 101!.md b/Welcome to the course/Welcome to WD 101!.md new file mode 100644 index 0000000..2ad8363 --- /dev/null +++ b/Welcome to the course/Welcome to WD 101!.md @@ -0,0 +1,32 @@ +# WD101 + +WD 101 is an Industry-led course built by Pupilfirst. + +This course is tailored for newcomers to programming and web development and those seeking to establish a sturdy foundation in computational thinking. WD101 is your starting point on the journey to mastering modern web development practices. + +## Course Objective + +This course is meant for beginners in programming & web development and those who are looking to build a robust foundation in computational thinking. + +## Course Outcomes + +**Set up your development environment:** Learn how to create an efficient development environment, ensuring you're well-prepared for web development tasks. + +**Build and style basic web pages:** Learn to develop simple web pages from scratch and apply CSS styling to make them visually appealing and user-friendly. + +**Handle data with JavaScript:** Get comfortable with JavaScript, a vital programming language for web development, and discover how to manipulate and process data effectively. + +**Utilize computational thinking:** Explore computational thinking and learn how to apply abstract problem-solving techniques to real-world challenges. + +**Work with HTML forms:** Master the art of working with HTML forms, enabling you to create interactive web applications and collect user data efficiently. + +**Implement native HTML Form Validations:** Dive into native HTML form validations to ensure user input is accurate, secure, and meets predefined criteria. + +**Master web storage techniques:** Understand web storage concepts, including local and session storage, and learn how to save and retrieve data persistently in web applications. + + +## Certificate + +Upon successful completion, you will be eligible for a course completion certificate (Web Development 101 - Getting started with JavaScript). + +The WD101 certificate will be issued after the end of the cohort, along with the WD201 course completion certificate. \ No newline at end of file diff --git a/Welcome to the course/Where should you keep your code?.md b/Welcome to the course/Where should you keep your code?.md new file mode 100644 index 0000000..0791e14 --- /dev/null +++ b/Welcome to the course/Where should you keep your code?.md @@ -0,0 +1,54 @@ +In this course, you'll be writing a lot of code manually. You'll need to _store_ this code somewhere. In this lesson, we'll list down our recommendation of where to keep this code. + +From your command line, if you type the `cd` command, it'll take you to [your home directory](https://en.wikipedia.org/wiki/Home_directory): + +```bash +# Simply writing `cd` always takes you to your home directory. +cd +``` + +At any given moment, you can check the path that you're on using the `pwd` command: + +```bash +# Let's check where we are. +pwd +/home/NAME +# The ^^^^ NAME part will be different for everyone. It should be your OS username. +``` + +The output of `pwd` should now show you the absolute path to the folder you're inside. On Ubuntu and Windows (WSL), it should look like the above example. On macOS, it'll look like `/Users/NAME`. + +## So, where should I keep my code? + +We recommend that you create a directory called `wd101` inside your home directory, and keep all of your source code in there. For example: + +```bash +# Let's make sure we're at the home directory. +cd + +# Let's create the `wd101` directory, and go into that. +mkdir wd101 +cd wd101 +``` + +So, we now have a directory where we'll keep _all_ of our source code, but we'll definitely want to keep source code for different projects separate from each other. + +In the next level, you're going to create a small website, so let's try creating a directory _inside_ the `wd101` directory to hold the source code we'll write for that project: + +```bash +# From inside the `wd101` directory, let's make another... +mkdir html-css +cd html-css + +# Let's confirm that we're at the right path... +pwd +/home/NAME/wd101/html-css +``` + +We'll use this folder in the next level. Similarly, we'll want to create new directories inside the `wd101` folder when you work on a different project. + +## Can I change where I keep my code? + +This organization scheme is just a recommendation. You may wish to keep your code in a different location or name things differently - that's totally fine. + +> **Windows users:** Make sure that you keep your code within WSL (in `/home/code`, for example), and not in your Windows drives (`C:\`, `D:\`, etc.). If you keep your code in Windows and then try to run it from interpreters installed inside WSL, you can run into difficult-to-debug errors. \ No newline at end of file diff --git a/Working with JavaScript data types/Adding comments to HTML and JS.md b/Working with JavaScript data types/Adding comments to HTML and JS.md new file mode 100644 index 0000000..81a758a --- /dev/null +++ b/Working with JavaScript data types/Adding comments to HTML and JS.md @@ -0,0 +1,41 @@ +Comments are used to add documentation to your code. Comments are always ignored when code executes. + +With HTML and JS, the browser is most often where the code executes, so while the browser may receive comments as part of website's payload, it will simply ignore all comments that it sees. + +## Comments in HTML + +You can add comments to your HTML source by using the following syntax: + +```html + + + +

This is a paragraph.

+ + + +``` + +## Comments in JavaScript + +Single line comments start with `//`. Any text between `//` and the end of the line will be ignored. + +```js +var a = 2; // Declare a, give it the value of 2 +var b = a + 2; // Declare b, give it the value of a + 2 +``` + +Multiple lines of comments can be easily written by starting with `/*` and ending with `*/`. Any text between `/*` and `*/` will be ignored by JavaScript. + +```js +/* +The code below will change +the heading with id = "heading" +in my web page: +*/ + +document.getElementById("heading").innerHTML = "My First Page"; +``` \ No newline at end of file diff --git a/Working with JavaScript data types/Boolean - comparisons and logical operations.md b/Working with JavaScript data types/Boolean - comparisons and logical operations.md new file mode 100644 index 0000000..4fd6c33 --- /dev/null +++ b/Working with JavaScript data types/Boolean - comparisons and logical operations.md @@ -0,0 +1,27 @@ +A boolean `true` or `false` value represents the result of comparing two values whether they are of the String, Number or any other type. The JavaScript language also has boolean operators. + +You can build simple predicates (expressions which return a boolean type value) and compose them with other predicates to build complex conditions. These complex conditions often represent some rules or policies in the real world which we can represent in the program. + +In this lesson you'll learn how all of this works in practice. + +**Video** + +## Special syntax: Single-line if-s + +In the above video, you've seen us write `if` followed by some code in curly braces (`{ ... }`). + +With simple statements, it's actually possible to leave out the curly braces. For example: + +```js +// Using curly braces. +if (isValidPassword) { + console.log("This password is valid!"); +} + +// Leaving out the curly braces. +if (isValidPassword) console.log("This password is valid!"); +``` + +Both the examples above do the same thing. The latter is simply shorter. + +In most cases, you'll want to use curly braces to _contain_ your code; however, it is possible to leave it out if the result or action because of an expression is simple. diff --git a/Working with JavaScript data types/Find the length of a string.md b/Working with JavaScript data types/Find the length of a string.md new file mode 100644 index 0000000..e42b2fd --- /dev/null +++ b/Working with JavaScript data types/Find the length of a string.md @@ -0,0 +1,3 @@ +Here you'll learn how to find the number of characters present in a string (including whitespace characters). + +This lesson also introduces simple conditionals, which let you check `if` the value of something matches an expectation, and then do something, or `else` do something else. \ No newline at end of file diff --git a/Working with JavaScript data types/Introduction to strings.md b/Working with JavaScript data types/Introduction to strings.md new file mode 100644 index 0000000..dae1cd5 --- /dev/null +++ b/Working with JavaScript data types/Introduction to strings.md @@ -0,0 +1,34 @@ + +# Mastering Strings in JavaScript + + +Strings are one of the fundamental type of values for representing text in the JavaScript programming language. This lesson will teach you how to create strings, store them in variables for later use and print them to the web browser console for display. + +**Video** + +## Additional reading: `let`, `const` and `var`. + +In this lesson, you've seen us define variables using the `let` keyword. For most of this course, we'll be using the `let` keyword to create variables. + +There are two other ways to create variables: `const` and `var`: + +### `const` + +The `const` keyword creates immutable values. For example: + +```js +const myString = "Hello world"; + +// The following line will cause an error. +myString = "Another string"; +``` + +Constants, once created, cannot be reassigned to a new value. Trying to do so will cause an error. + +### `var` + +In older scripts, you may also find another keyword: `var` instead of `let`. + +The `var` keyword is _almost_ the same as `let`. However, it is an _old_ way of defining variables, and can have some surprising behavior. It is almost never used in modern JavaScript code, and we will avoid using `var` as much as possible in this course. + +If you'd still like to learn more, here's an excellent resource on [the old "var"](https://javascript.info/var). \ No newline at end of file diff --git a/Working with JavaScript data types/Join strings together.md b/Working with JavaScript data types/Join strings together.md new file mode 100644 index 0000000..db250ee --- /dev/null +++ b/Working with JavaScript data types/Join strings together.md @@ -0,0 +1,3 @@ +## String Concatenation: Joining Text in JavaScript + +You'll learn how to join multiple `String` type values into a single `String` type value. This is one of the most frequently used features of strings in programming. \ No newline at end of file diff --git a/Working with JavaScript data types/Numbers.md b/Working with JavaScript data types/Numbers.md new file mode 100644 index 0000000..2595c3b --- /dev/null +++ b/Working with JavaScript data types/Numbers.md @@ -0,0 +1,6 @@ +You'll learn how to: + +1. Perform basic calculations with numbers +2. Comparing two numbers (boolean comparisons) +3. Convert a number stored in string format to the Number type +4. Take advantage of math functions already available in JavaScript \ No newline at end of file diff --git a/Working with JavaScript data types/Putting HTML and JS together.md b/Working with JavaScript data types/Putting HTML and JS together.md new file mode 100644 index 0000000..9610ce1 --- /dev/null +++ b/Working with JavaScript data types/Putting HTML and JS together.md @@ -0,0 +1,7 @@ +JavaScript with the