@ -18,7 +18,7 @@ Making decisions and controlling the order in which your code runs makes your co
## A Brief Recap on Booleans
Booleans can be only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met.
Booleans can have only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met.
Set your boolean to be true or false like this:
@ -118,7 +118,7 @@ switch (a) {
console.log(`The value is ${a}`);
```
✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the varaiable a to change the returned `console.log()`.
✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the variable a to change the returned `console.log()`.
You've seen so far how if you can use an `if...else` statement to create conditional logic. Anything that goes into an `if` needs to evaluate to true/false. By using the `!` operator you can _negate_ the expression. It would look like so:
You've seen so far how you can use an `if...else` statement to create conditional logic. Anything that goes into an `if` needs to evaluate to true/false. By using the `!` operator you can _negate_ the expression. It would look like so:
@ -12,7 +12,7 @@ In this lesson, we're going to lay out the foundations to create bank web app, u
### Prerequisite
You need a local web server to test the web app we'll build in this lesson. If don't have one, you can install [Node.js](https://nodejs.org) and use the command `npx lite-server` from your project folder. It will create a local web server and open your app in a browser.
You need a local web server to test the web app we'll build in this lesson. If you don't have one, you can install [Node.js](https://nodejs.org) and use the command `npx lite-server` from your project folder. It will create a local web server and open your app in a browser.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# Web Development for Beginners - A Curriculum
@ -47,6 +49,9 @@ This curriculum has a development environment ready to go! As you get started yo
#### Create your repository
For you to easily save your work, it is recommended that you create your own copy of this repository. You can do this by clicking the **Use this template** button at the top of the page. This will create a new repository in your GitHub account with a copy of the curriculum.
Follow these steps:
1. **Fork the Repository**: Click on the "Fork" button at the top-right corner of this page.
2. **Clone the Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Running the curriculum in a Codespace
@ -92,7 +97,7 @@ Our recommendation is to use [Visual Studio Code](https://code.visualstudio.com/
- assignment
- post-lesson quiz
> **A note about quizzes**: All quizzes are contained [in this app](https://ashy-river-0debb7803.1.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.
> **A note about quizzes**: All quizzes are contained in the Quiz-app folder, 48 total quizzes of three questions each. They are linked from within the lessons the quiz app can be run locally or deployed to Azure; follow the instruction in the `quiz-app` folder. They are gradually being localized.
These quizzes are the pre- and post-lecture quizzes for the web development for beginners curriculum at https://aka.ms/webdev-beginners
These quizzes are the pre- and post-lecture quizzes for the data science curriculum at https://aka.ms/webdev-beginners
## Project setup
## Adding a translated quiz set
```
npm install
```
Add a quiz translation by creating matching quiz structures in the `assets/translations` folders. The canonical quizzes are in `assets/translations/en`. The quizzes are broken into several groupings. Make sure to align the numbering with the proper quiz section. There are 40 quizzes total in this curriculum, with the count starting at 0.
### Compiles and hot-reloads for development
<details>
<summary>Here's the shape of a translation file:</summary>
```
npm run serve
[
{
"title": "A title",
"complete": "A complete button title",
"error": "An error message upon selecting the wrong answer",
"quizzes": [
{
"id": 1,
"title": "Title",
"quiz": [
{
"questionText": "The question asked",
"answerOptions": [
{
"answerText": "Option 1 title",
"isCorrect": true
},
{
"answerText": "Option 2 title",
"isCorrect": false
}
]
}
]
}
]
}
]
```
</details>
### Compiles and minifies for production
After editing the translations, edit the index.js file in the translation folder to import all the files following the conventions in `en`.
```
npm run build
```
Edit the `index.js` file in `assets/translations` to import the new translated files.
For example, if your translation JSON is in `ex.json`, make 'ex' the localization key, then enter it as shown below to import it
### Lints and fixes files
<details>
<summary>index.js</summary>
```
npm run lint
import ex from "./ex.json";
// if 'ex' is localization key then enter it like so in `messages` to expose it
const messages = {
ex: ex[0],
};
export default messages;
```
### Customize configuration
</details>
## Run the Quiz App locally
### Prerequisites
- A GitHub account
- [Node.js and Git](https://nodejs.org/)
### Install & Setup
1. Create a repository from this [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft)
1. Clone your new repository, and navigate to the quiz-app
- An Azure Subscription. Sign up for one for free [here](https://aka.ms/azure-free).
_Cost Estimate to deploy this quiz-app: FREE_
[](https://portal.azure.com/#create/Microsoft.StaticApp)
Once you are signed in on Azure through the link above, select a subscription and resource group then:
- Static Web App details: Provide a name and select a hosting plan
- GitHub Login: Set your deployment source as GitHub then log in and fill in the required fields on the form:
- *Organization*– Choose your organization.
- *Repository*– Select the Web Dev for Beginners curriculum repository.
- *Branch* - Select a branch (main)
- Build Presets: Azure Static Web Apps uses a detection algorithm to detect the framework used in your application.
- *App location* - ./quiz-app
- *Api location* -
- *Output location* - dist
- Deployment: Click 'Review + Create', then 'Create'
Once deployed, a workflow file will be created in the *.github* directory of your repo. This workflow file contains instructions of events that will trigger a re-deployment of the app to Azure, for example, _a **push** on branch **main**_ etc.
<details>
<summary>Example Workflow File</summary>
Here’s an example of what the GitHub Actions workflow file might look like:
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
# Ανάπτυξη Ιστού για Αρχάριους - Πρόγραμμα Μαθημάτων
Οι Azure Could Advocates της Microsoft, είναι στην ευχάριστη θέση να σας προσφέρουν ένα πρόγραμμα μαθημάτων διάρκειας 12 εβδομάδων, 24 μαθήματα στο σύνολο, για τα βασικά της JavaScript, CSS και HTML. Κάθε μάθημα περιλαμβάνει ένα κουίζ στην αρχή και στο τέλος του, γραπτές οδηγίες για την ολοκλήρωση του μαθήματος, μια λύση, εργασία και άλλα. Η παιδαγωγική μας αρχή που στηρίζεται στις εργασίες, επιτρέπει να μαθαίνετε ενώ χτίζετε, ενας αποδεδειγμένος τρόπος να «κολλήσουν» νέες δεξιότητες.
Οι Azure Cloud Advocates της Microsoft, είναι στην ευχάριστη θέση να σας προσφέρουν ένα πρόγραμμα μαθημάτων διάρκειας 12 εβδομάδων, 24 μαθήματα στο σύνολο, για τα βασικά της JavaScript, CSS και HTML. Κάθε μάθημα περιλαμβάνει ένα κουίζ στην αρχή και στο τέλος του, γραπτές οδηγίες για την ολοκλήρωση του μαθήματος, μια λύση, εργασία και άλλα. Η παιδαγωγική μας αρχή που στηρίζεται στις εργασίες, επιτρέπει να μαθαίνετε ενώ χτίζετε, ενας αποδεδειγμένος τρόπος να «κολλήσουν» νέες δεξιότητες.
**Ευχαριστούμε θερμά τους συγγραφείς μας Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, and sketchnote artist Tomomi Imura!**
Aditya Srivastava
7 months ago
committed by
GitHub
