msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

tidy-up, removing licenses, relinking

Browse Source
pull/13/head
Jen Looper 4 years ago
parent a02eea3f47
commit 2cf8b1ee31
17 changed files with 87 additions and 174 deletions
Show Stats Download Patch File Download Diff File

21
6-space-game/1-introduction/LICENSE
Unescape View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

14
6-space-game/1-introduction/README.md
Unescape View File

@ -1,8 +1,10 @@
# Build a Space Game Part I: Introduction
# Build a Space Game Part 1: Introduction
![video](/6-space-game/images/pewpew.gif)
![video](../images/pewpew.gif)
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
[Pre-lecture quiz](/6-space-game/1-introduction/.github/pre-lecture-quiz.md)
### Inheritance and Composition in game development
@ -209,7 +211,9 @@ As things gets more complicated when your game grows, this pattern stays the sam
Think about how the pub-sub pattern can enhance a game. Which parts should emit events, and how should the game react to them? Now's your chance to get creative, thinking of a new game and how its parts might behave.
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/6-space-game/1-introduction/.github/post-lecture-quiz.md)
## Review & Self Study
@ -217,4 +221,4 @@ Learn more about Pub/Sub by [reading about it](https://docs.microsoft.com/en-us/
## Assignment
[Mock up a game](assignment.md)
[Mock up a game](/6-space-game/1-introduction/assignment.md)

21
6-space-game/2-drawing-to-canvas/LICENSE
Unescape View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

12
6-space-game/2-drawing-to-canvas/README.md
Unescape View File

@ -1,6 +1,8 @@
# Build a Space Game Part II: Draw Hero and Monsters to Canvas
# Build a Space Game Part 2: Draw Hero and Monsters to Canvas
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
[Pre-lecture quiz](/6-space-game/2-drawing-to-canvas/.github/pre-lecture-quiz.md)
## The Canvas
@ -201,7 +203,9 @@ Please try solving it yourself first but if you get stuck, have a look at a [sol
You've learned about drawing with the 2D-focused Canvas API; take a look at the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), and try to draw a 3D object.
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/6-space-game/2-drawing-to-canvas/.github/post-lecture-quiz.md)
## Review & Self Study
@ -209,4 +213,4 @@ Learn more about the Canvas API by [reading about it](https://developer.mozilla.
## Assignment
[Play with the Canvas API](assignment.md)
[Play with the Canvas API](/6-space-game/2-drawing-to-canvas/assignment.md)

21
6-space-game/3-moving-elements-around/LICENSE
Unescape View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

12
6-space-game/3-moving-elements-around/README.md
Unescape View File

@ -1,6 +1,8 @@
# Build a Space Game Part III: Adding Motion
# Build a Space Game Part 3: Adding Motion
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
[Pre-lecture quiz](/6-space-game/3-moving-elements-around/.github/pre-lecture-quiz.md)
Games aren't much fun until you have aliens running around on screen! In this game, we will make use of two types of movements:
@ -373,7 +375,9 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
As you can see, your code can turn into 'spaghetti code' when you start adding functions and variables and classes. How can you better organize your code so that it is more readable? Sketch out a system to organize your code, even if it still resides in one file.
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/6-space-game/3-moving-elements-around/.github/post-lecture-quiz.md)
## Review & Self Study
@ -381,4 +385,4 @@ While we're writing our game without using frameworks, there are many JavaScript
## Assignment
[Comment your code](assignment.md)
[Comment your code](/6-space-game/3-moving-elements-around/assignment.md)

21
6-space-game/4-collision-detection/LICENSE
Unescape View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

12
6-space-game/4-collision-detection/README.md
Unescape View File

@ -1,6 +1,8 @@
# Build a Space Game Part IV: Adding A Laser and Detect Collisions
# Build a Space Game Part 4: Adding A Laser and Detect Collisions
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
[Pre-lecture quiz](/6-space-game/4-collision-detection/.github/pre-lecture-quiz.md)
In this lesson you will learn how to shoot lasers with JavaScript! We will add two things to our game:
@ -282,7 +284,9 @@ At this point, your game has some functionality! You can navigate with your arro
Add an explosion! Take a look at the game assets in [the Space Art repo](../solution/spaceArt/readme.txt) and try to add an explosion when the laser hits an alien
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/6-space-game/4-collision-detection/.github/post-lecture-quiz.md)
## Review & Self Study
@ -290,4 +294,4 @@ Experiment with the intervals in your game thus far. What happens when you chang
## Assignment
[Explore collisions](assignment.md)
[Explore collisions](/6-space-game/4-collision-detection/assignment.md)

21
6-space-game/5-keeping-score/LICENSE
Unescape View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

12
6-space-game/5-keeping-score/README.md
Unescape View File

@ -1,6 +1,8 @@
# Build a Space Game Part V: Scoring and Lives
# Build a Space Game Part 5: Scoring and Lives
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
[Pre-lecture quiz](/6-space-game/5-keeping-score/.github/pre-lecture-quiz.md)
In this lesson, you'll learn how to add scoring to a game and calculate lives.
@ -174,7 +176,9 @@ By the end of this work, you should see the small 'life' ships at the bottom rig
Your code is almost complete. Can you envision your next steps?
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/6-space-game/5-keeping-score/.github/post-lecture-quiz.md)
## Review & Self Study
@ -182,4 +186,4 @@ Research some ways that you can increment and decrement game scores and lives. T
## Assignment
[Build a Scoring Game](assignment.md)
[Build a Scoring Game](/6-space-game/5-keeping-score/assignment.md)

21
6-space-game/6-end-condition/LICENSE
Unescape View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

12
6-space-game/6-end-condition/README.md
Unescape View File

@ -1,6 +1,8 @@
# Build a Space Game Part VI: End and Restart
# Build a Space Game Part 6: End and Restart
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
[Pre-lecture quiz](/6-space-game/6-end-condition/.github/pre-lecture-quiz.md)
There are different ways to express and *end condition* in a game. It's up to you as the creator of the game to say why the game has ended. Here are some reasons, if we assume we are talking about the space game you have been building so far:
@ -207,7 +209,9 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a
Add a sound! Can you add a sound to enhance your game play, maybe when there's a laser hit, or the hero dies or wins? Have a look at this [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) to learn how to play sound using JavaScript
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/6-space-game/6-end-condition/.github/post-lecture-quiz.md)
## Review & Self Study
@ -215,4 +219,4 @@ Your assignment is to create a fresh sample game, so explore some of the interes
## Assignment
[Build a Sample Game](assignment.md)
[Build a Sample Game](/6-space-game/6-end-condition/assignment.md)

12
7-bank-project/1-template-route/README.md
Unescape View File

@ -1,8 +1,8 @@
# HTML Templates and Routes in a Web App
# Build a Banking App Part 1: HTML Templates and Routes in a Web App
<!-- ![video](video-url) -->
## Pre-Lecture Quiz
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
[Pre-lecture quiz](/7-bank-project/1-template-route/.github/pre-lecture-quiz.md)
### Introduction
@ -282,7 +282,9 @@ Now try to use the back and forward buttons of your browsers, and check that the
Add a new template and route for a third page that shows the credits for this app.
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/7-bank-project/1-template-route/.github/post-lecture-quiz.md)
## Review & Self Study
@ -290,4 +292,4 @@ Routing is one of the surprisingly tricky parts of web development, especially a
## Assignment
[Improve the routing](assignment.md)
[Improve the routing](/7-bank-project/1-template-route/assignment.md)

12
7-bank-project/2-forms/README.md
Unescape View File

@ -1,6 +1,8 @@
# Build a Login and Registration Form
# Build a Banking App Part 2: Build a Login and Registration Form
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
[Pre-lecture quiz](/7-bank-project/2-forms/.github/pre-lecture-quiz.md)
### Introduction
@ -275,7 +277,9 @@ Here's an example of what the final login page can look like after a bit of styl
![Screenshot of the login page after adding CSS styles](./images/result.png)
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/7-bank-project/2-forms/.github/post-lecture-quiz.md)
## Review & Self Study
@ -283,4 +287,4 @@ Developers have gotten very creative about their form building efforts, especial
## Assignment
[Style your bank app](assignment.md)
[Style your bank app](/7-bank-project/2-forms/assignment.md)

14
7-bank-project/3-data/README.md
Unescape View File

@ -1,10 +1,12 @@
# Methods of Fetching and Using Data
# Build a Banking App Part 3: Methods of Fetching and Using Data
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
[Pre-lecture quiz](/7-bank-project/3-data/.github/pre-lecture-quiz.md)
### Introduction
At the core of every web application there's *data*. Data can take many forms, but the end goal here is always to display information to the user. With web apps becoming increasingly interactive and complex, how the user access and interact with information is now a key part of web development.
At the core of every web application there's *data*. Data can take many forms, but its main purpose is always to display information to the user. With web apps becoming increasingly interactive and complex, how the user accesses and interacts with information is now a key part of web development.
In this lesson, we'll see how to fetch data from a server asynchronously, and use this data to display information on a web page without reloading the HTML.
@ -315,8 +317,10 @@ Here's an example of a styled dashboard page:
![Screenshot of an example result of the dashboard after styling](../images/screen2.png)
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/7-bank-project/3-data/.github/post-lecture-quiz.md)
## Assignment
[Refactor and comment your code](assignment.md)
[Refactor and comment your code](/7-bank-project/3-data/assignment.md)

14
7-bank-project/4-state-management/README.md
Unescape View File

@ -1,10 +1,12 @@
# Concepts of State Management
# Build a Banking App Part 4: Concepts of State Management
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
[Pre-lecture quiz](/7-bank-project/4-state-management/.github/pre-lecture-quiz.md)
### Introduction
As a web application grows, it becomes a challenge to keep track of all data flows. Which code gets the data, what page consumes it, where and when does it need to be updated...it's easy to end up with messy code, difficult to maintain. This is especially true when you need to share data among different pages of your app, for example user data. The concept of *state management* has always existed in all kinds of programs, but as web apps keep growing in complexity it's now a key point to think about during development.
As a web application grows, it becomes a challenge to keep track of all data flows. Which code gets the data, what page consumes it, where and when does it need to be updated...it's easy to end up with messy code that's difficult to maintain. This is especially true when you need to share data among different pages of your app, for example user data. The concept of *state management* has always existed in all kinds of programs, but as web apps keep growing in complexity it's now a key point to think about during development.
In this final part, we'll look over the app we built to rethink how the state is managed, allowing support for browser refresh at any point, and persisting data across user sessions.
@ -266,11 +268,13 @@ Now that we reload the account data every time the dashboard is loaded, do you t
Try working together to change what is saved and loaded from `localStorage` to only include what is absolutely required for the app to work.
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](/7-bank-project/4-state-management/.github/post-lecture-quiz.md)
## Assignment
[Implement "Add transaction" dialog](assignment.md)
[Implement "Add transaction" dialog](/7-bank-project/4-state-management/assignment.md)
Here's an example result after completing the assignment:

9
index.html
Unescape View File

@ -6,14 +6,15 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"></head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: '',
repo: ''
name: 'Web Development for Beginners: A Curriculum',
repo: 'https://github.com/microsoft/Web-Dev-For-Beginners'
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

Write Preview
Loading…
Cancel
Save