info/Web-Dev-For-Beginners
1
0
Fork 0
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-08-10 16:54:24 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/microsoft/Web-Dev-For-Beginners into main

Browse Source
This commit is contained in:
Sanjay
2020-12-29 18:49:02 +05:30
parent e80489f683 40806adcd2
commit 756cc8a7f6
24 changed files with 13712 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
.github/workflows/azure-static-web-apps-nice-beach-0fe9e9d0f.yml vendored Normal file
View File

@@ -0,0 +1,45 @@
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v0.0.1-preview
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_0FE9E9D0F }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/quiz-app" # App source code path
api_location: "api" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v0.0.1-preview
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_BEACH_0FE9E9D0F }}
action: "close"

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/.DS_Store

4
1-getting-started-lessons/1-intro-to-programming-languages/README.md
View File

@@ -6,7 +6,7 @@ This lesson covers the basics of programming languages. The topics covered here
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1)
## Introduction
@@ -181,7 +181,7 @@ When a developer wants to learn something new, they'll most likely turn to docum
Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go?
## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md)
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2)
## Review & Self Study

4
1-getting-started-lessons/2-github-basics/README.md
View File

@@ -6,7 +6,7 @@ This lesson covers the basics of GitHub, a platform to host and manage changes t
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3)
## Introduction
@@ -299,7 +299,7 @@ Projects might also have discussion in forums, mailing lists, or chat channels l
Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes.
## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md)
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4)
## Review & Self Study

4
1-getting-started-lessons/3-accessibility/README.md
View File

@@ -4,7 +4,7 @@
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5)
> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
>
@@ -216,7 +216,7 @@ Take this HTML and rewrite it to be as accessible as possible, given the strateg
```
## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md)
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6)
## Review & Self Study

4
2-js-basics/1-data-types/README.md
View File

@@ -4,7 +4,7 @@
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7)
This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
@@ -185,7 +185,7 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis
JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find?
## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md)
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8)
## Review & Self Study

2
README.md
View File

@@ -2,6 +2,8 @@
Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.
**Hearty thanks to our authors Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, and sketchnote artist Tomomi Imura!**
> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md)
> **Students**, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in the /solutions folders in each project-oriented lesson. Another idea would be to form a study group with friends and go through the content together. For further study, we recommend [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-4621-cxa) and by watching the videos mentioned below.

1
quiz-app/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

5
quiz-app/.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,5 @@
{
"staticWebApps.appSubpath": "/",
"staticWebApps.apiSubpath": "api",
"staticWebApps.outputSubpath": "dist"
}

21
quiz-app/LICENSE Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Arpan Adhikari
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.

33
quiz-app/README.md Normal file
View File

@@ -0,0 +1,33 @@
# Quizzes
These quizzes are the pre- and post-lecture quizzes for the web development for beginners curriculum at https://aka.ms/webdev-beginners
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
Credits: Thanks to the original version of this quiz app: https://github.com/arpan45/simple-quiz-vue

5
quiz-app/babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

11926
quiz-app/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

43
quiz-app/package.json Normal file
View File

@@ -0,0 +1,43 @@
{
"name": "quizzes",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.4.9"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
quiz-app/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

17
quiz-app/public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

8
quiz-app/public/routes.json Normal file
View File

@@ -0,0 +1,8 @@
{
"routes": [
{
"route": "/*",
"serve": "/index.html"
}
]
}

82
quiz-app/src/App.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<div>
<nav>
<router-link class="navlink" to="/">Home</router-link>
</nav>
<div id="app">
<h1>Web Development for Beginners: Quizzes</h1>
<router-view>
<Quiz />
</router-view>
</div>
</div>
</template>
<script>
import Quiz from "@/components/Quiz.vue";
export default {
name: "App",
components: {
Quiz,
},
};
</script>
<style>
html {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #252d4a;
}
nav {
background-color: #252d4a;
padding: 1em;
margin-bottom: 20px;
}
nav a {
color: white;
text-align: right;
}
.link {
display: list-item;
}
h1,
h2,
h3,
.message {
text-align: center;
}
.card {
width: 60%;
border: #252d4a solid;
border-radius: 5px;
margin: auto;
padding: 1em;
}
.btn {
min-width: 50%;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-bottom: 5px;
width: 50%;
font-size: 16px;
color: #ffffff;
background-color: #252d4a;
border-radius: 5px;
padding: 5px;
justify-content: flex-start;
align-items: center;
}
.ans-btn {
justify-content: center;
display: flex;
margin: 4px auto;
}
</style>

1334
quiz-app/src/assets/data/en/quiz.json Normal file
View File

File diff suppressed because it is too large Load Diff

61
quiz-app/src/components/Quiz.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div class="card">
<div v-for="q in questions" :key="q.id">
<div v-if="route == q.id">
<h2>
{{ q.quiz[currentQuestion].questionText }}
</h2>
<h3 class="message">{{ message }}</h3>
<div>
<button
:key="index"
v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
@click="handleAnswerClick(option.isCorrect)"
class="btn ans-btn"
>
{{ option.answerText }}
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import questions from "@/assets/data/en/quiz.json";
export default {
data() {
return {
currentQuestion: 0,
message: "",
startQuiz: false,
restart: false,
questions: questions,
route: "",
};
},
methods: {
handleAnswerClick(isCorrect) {
let nextQuestion = this.currentQuestion + 1;
console.log(nextQuestion);
if (isCorrect == "true") {
this.message = "";
//always 3 questions per quiz
if (nextQuestion < 3) {
this.currentQuestion = nextQuestion;
} else {
this.message = "Well done, you've completed the quiz";
}
} else {
this.message = "sorry, try again";
}
},
},
created() {
console.log(this.$route.params.id);
this.route = this.$route.params.id;
},
};
</script>

6
quiz-app/src/main.js Normal file
View File

@@ -0,0 +1,6 @@
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
import router from './router';
new Vue({ router, render: (h) => h(App) }).$mount('#app');

34
quiz-app/src/router/index.js Normal file
View File

@@ -0,0 +1,34 @@
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import Quiz from '@/components/Quiz.vue';
import NotFound from '@/views/NotFound.vue';
Vue.use(Router);
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/quiz/:id',
name: 'Quiz',
component: Quiz,
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound,
meta: { title: 'Not Found' },
},
],
});
router.beforeEach((to, from, next) => {
next();
});
export default router;

75
quiz-app/src/views/Home.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<div>
<router-link class="link" to="quiz/1"
>Lesson 1: Pre-Lecture Quiz</router-link
>
<router-link to="quiz/2">Lesson 1: Post-Lecture Quiz</router-link>
<router-link class="link" to="quiz/3"
>Lesson 2: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/4"
>Lesson 2: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/5"
>Lesson 3: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/6"
>Lesson 3: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/7"
>Lesson 4: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/8"
>Lesson 4: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/9"
>Lesson 5: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/10"
>Lesson 5: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/11"
>Lesson 6: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/12"
>Lesson 6: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/13"
>Lesson 7: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/14"
>Lesson 7: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/15"
>Lesson 8: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/16"
>Lesson 8: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/17"
>Lesson 9: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/18"
>Lesson 9: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/19"
>Lesson 10: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/20"
>Lesson 10: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/21"
>Lesson 11: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/22"
>Lesson 11: Post-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/23"
>Lesson 12: Pre-Lecture Quiz</router-link
>
<router-link class="link" to="quiz/24"
>Lesson 12: Post-Lecture Quiz</router-link
>
</div>
</template>

5
quiz-app/src/views/NotFound.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div>
<p>Sorry, wrong number!</p>
</div>
</template>