genepride
4 years ago
parent
7590f86493
commit
ce161731ef
@ -0,0 +1,100 @@
|
|||||||
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||||
|
[](http://makeapullrequest.com)
|
||||||
|
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||||
|
|
||||||
|
|
||||||
|
# Web Development para sa mga Nagsisimula - Kurikulum
|
||||||
|
|
||||||
|
Ang Azure Cloud Advocates sa Microsoft ay nalulugod na mag-alok ng 12-linggo, 24-aralin na curriculum tungkol sa JavaScript, CSS, at HTML basics. Kasama sa bawat aralin ang mga pagsusulit bago at pagkatapos ng aralin, nakasulat na mga tagubilin upang makumpleto ang aralin, isang solusyon, isang takdang-aralin at higit pa. Ang aming project-based na pedagogy ay nagbibigay-daan sa iyo na matuto habang nagtatayo, isang napatunayang paraan para sa mga bagong kasanayan.
|
||||||
|
|
||||||
|
**Taos pusong pasasalamat sa aming mga may-akda Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, at sketchnote artist Tomomi Imura!**
|
||||||
|
|
||||||
|
# Simula
|
||||||
|
|
||||||
|
> **Mga Guro**, mayroon kaming [included some suggestions](for-teachers.md) kung paano gamitin ang curriculum na ito. Gusto namin ang iyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||||
|
|
||||||
|
> **Mga mag-aaral**, para magamit ang curriculum na ito nang mag-isa, i-fork ang buong repo at kumpletuhin ang mga pagsasanay nang mag-isa, simula sa pagsusulit bago ang lecture, pagkatapos ay basahin ang lecture at kumpletuhin ang iba pang aktibidad. Subukang lumikha ng mga proyekto sa pamamagitan ng pag-unawa sa mga aralin sa halip na pagkopya ng code ng solusyon; gayunpaman, ang code na iyon ay magagamit sa mga folder ng /solutions sa bawat aralin na nakatuon sa proyekto. Ang isa pang ideya ay ang bumuo ng isang grupo ng pag-aaral kasama ang mga kaibigan at sabay-sabay na suriin ang nilalaman. Para sa karagdagang pag-aaral, inirerekomenda namin ang [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) and by watching the videos mentioned below.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||||
|
|
||||||
|
> 🎥 I-click ang larawan sa itaas para sa isang video tungkol sa proyekto at sa mga taong lumikha nito!
|
||||||
|
|
||||||
|
## Pedagogy
|
||||||
|
|
||||||
|
Pumili kami ng dalawang pedagogical tenets habang binubuo ang curriculum na ito: pagtiyak na ito ay batay sa proyekto at kasama nito ang madalas na mga pagsusulit. Sa pagtatapos ng seryeng ito, makakagawa ang mga mag-aaral ng laro sa pag-type, virtual terrarium, extension ng browser na 'berde', uri ng larong 'space invaders', at banking app na uri ng negosyo, at matututunan nila ang mga pangunahing kaalaman sa JavaScript. , HTML, at CSS kasama ang modernong toolchain ng web developer ngayon.
|
||||||
|
|
||||||
|
> 🎓 Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) on Microsoft Learn!
|
||||||
|
|
||||||
|
Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ang proseso ay ginagawang mas nakakaengganyo para sa mga mag-aaral at ang pagpapanatili ng mga konsepto ay madaragdagan. Sumulat din kami ng ilang panimulang aralin sa mga pangunahing kaalaman sa JavaScript upang ipakilala ang mga konsepto, na ipinares sa video mula sa "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" collection of video tutorials, some of whose authors contributed to this curriculum.
|
||||||
|
|
||||||
|
Bilang karagdagan, ang isang mababang-stakes na pagsusulit bago ang isang klase ay nagtatakda ng intensyon ng mag-aaral sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pagpapanatili. Ang kurikulum na ito ay idinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12 linggong ikot.
|
||||||
|
|
||||||
|
Bagama't sinadya naming iwasan ang pagpapakilala ng mga balangkas ng JavaScript upang makapag-concentrate sa mga pangunahing kasanayang kailangan bilang isang web developer bago magpatibay ng isang balangkas, isang magandang susunod na hakbang sa pagkumpleto ng kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||||
|
|
||||||
|
> Hanapin ang aming [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), at [Translation](TRANSLATIONS.md) mga alituntunin. Tinatanggap namin ang iyong nakabubuo na feedback!
|
||||||
|
>
|
||||||
|
## Each lesson includes:
|
||||||
|
|
||||||
|
- optional sketchnote
|
||||||
|
- optional supplemental video
|
||||||
|
- pre-lesson warmup quiz
|
||||||
|
- written lesson
|
||||||
|
- for project-based lessons, step-by-step guides on how to build the project
|
||||||
|
- knowledge checks
|
||||||
|
- a challenge
|
||||||
|
- supplemental reading
|
||||||
|
- assignment
|
||||||
|
- post-lesson quiz
|
||||||
|
|
||||||
|
> **A note about quizzes**: All quizzes are contained [in this app](https://happy-mud-02d95f10f.azurestaticapps.net/), for 48 total quizzes of three questions each. They are linked from within the lessons but the quiz app can be run locally; follow the instruction in the `quiz-app` folder. They are gradually being localized.
|
||||||
|
|
||||||
|
## Lessons
|
||||||
|
|
||||||
|
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author |
|
||||||
|
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||||
|
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||||
|
| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub in your project, how to collaborate with others on a code base | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||||
|
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||||
|
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||||
|
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||||
|
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||||
|
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||||
|
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||||
|
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||||
|
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||||
|
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
|
||||||
|
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||||
|
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||||
|
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||||
|
| 15 | [Space Game](/6-space-game/solution) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
|
||||||
|
| 16 | [Space Game](/6-space-game/solution) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||||
|
| 17 | [Space Game](/6-space-game/solution) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||||
|
| 18 | [Space Game](/6-space-game/solution) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||||
|
| 19 | [Space Game](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||||
|
| 20 | [Space Game](/6-space-game/solution) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
|
||||||
|
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||||
|
| 22 | [Banking App](/7-bank-project/solution) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
|
||||||
|
| 23 | [Banking App](/7-bank-project/solution) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](/7-bank-project/3-data/README.md) | Yohan |
|
||||||
|
| 24 | [Banking App](/7-bank-project/solution) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||||
|
|
||||||
|
## Offline access
|
||||||
|
|
||||||
|
Maaari mong patakbuhin ang dokumentasyong ito offline sa pamamagitan ng paggamit [Docsify](https://docsify.js.org/#/). i-Fork itong repo, [install Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos ay sa root folder ng repo na ito, i-type ang `docsify serve`. Ihahatid ang website sa port 3000 sa iyong localhost: `localhost:3000`.
|
||||||
|
|
||||||
|
## PDF
|
||||||
|
|
||||||
|
Ang isang PDF ng lahat ng mga aralin ay matatagpuan [dito](pdf/readme.pdf)
|
||||||
|
|
||||||
|
## Iba pang Kurikulum
|
||||||
|
|
||||||
|
Ang aming team ay gumagawa ng iba pang kurikulum! Tignan:
|
||||||
|
|
||||||
|
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
|
||||||
|
- [IoT for Beginners](https://aka.ms/iot-beginners)
|
||||||
|
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
|
||||||
Loading…
Reference in new issue