Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types
Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types
@ -13,9 +15,10 @@ Making decisions and controlling the order in which your code runs makes your co
> 🎥 Click the image above for a video about making decisions.
> 🎥 Click the image above for a video about making decisions.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
## A Brief Recap on Booleans
## 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:
Set your boolean to be true or false like this:
@ -44,7 +47,7 @@ Operators are used to evaluate conditions by making comparisons that will create
The if statement will run code in between its blocks if the condition is true.
The if statement will run code in between its blocks if the condition is true.
```javascript
```javascript
if (condition){
if (condition){
//Condition is true. Code in this block will run.
//Condition is true. Code in this block will run.
}
}
```
```
@ -55,7 +58,7 @@ Logical operators are often used to form the condition.
let currentMoney;
let currentMoney;
let laptopPrice;
let laptopPrice;
if (currentMoney >= laptopPrice){
if (currentMoney >= laptopPrice){
//Condition is true. Code in this block will run.
//Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
console.log("Getting a new laptop!");
}
}
@ -69,11 +72,10 @@ The `else` statement will run the code in between its blocks when the condition
let currentMoney;
let currentMoney;
let laptopPrice;
let laptopPrice;
if (currentMoney >= laptopPrice){
if (currentMoney >= laptopPrice){
//Condition is true. Code in this block will run.
//Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
console.log("Getting a new laptop!");
}
} else {
else{
//Condition is false. Code in this block will run.
//Condition is false. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
console.log("Can't afford a new laptop, yet!");
}
}
@ -81,13 +83,12 @@ else{
✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the currentMoney and laptopPrice variables 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 currentMoney and laptopPrice variables to change the returned `console.log()`.
## Switch Statement
## Switch Statement
The `switch` statement is used to perform different actions based on different conditions.Use the `switch` statement to select one of many code blocks to be executed.
The `switch` statement is used to perform different actions based on different conditions.Use the `switch` statement to select one of many code blocks to be executed.
```javascript
```javascript
switch(expression) {
switch(expression) {
case x:
case x:
// code block
// code block
break;
break;
@ -104,21 +105,20 @@ switch(expression) {
let a = 2;
let a = 2;
switch (a) {
switch (a) {
case 1:
case 1:
a = 'one';
a = "one";
break;
break;
case 2:
case 2:
a = 'two';
a = "two";
break;
break;
default:
default:
a = 'not found';
a = "not found";
break;
break;
}
}
console.log(`The value is ${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()`.
## Logical Operators and Booleans
## Logical Operators and Booleans
@ -137,13 +137,12 @@ Logical operators can be used to form conditions in if..else statements.
```javascript
```javascript
let currentMoney;
let currentMoney;
let laptopPrice;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
//Condition is true. Code in this block will run.
//Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
console.log("Getting a new laptop!");
}
} else {
else {
//Condition is true. Code in this block will run.
//Condition is true. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
console.log("Can't afford a new laptop, yet!");
}
}
@ -151,7 +150,7 @@ else {
### Negation operator
### Negation operator
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:
```javascript
```javascript
if (!condition) {
if (!condition) {
@ -173,13 +172,14 @@ Below is a more tangible example:
```javascript
```javascript
let firstNumber = 20;
let firstNumber = 20;
let secondNumber = 10
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
```
```
✅ Take a minute to read this code a few times. Do you understand how these operators are working?
✅ Take a minute to read this code a few times. Do you understand how these operators are working?
The above states that
The above states that
- if `firstNumber` is larger than `secondNumber`
- if `firstNumber` is larger than `secondNumber`
- then assign `firstNumber` to `biggestNumber`
- then assign `firstNumber` to `biggestNumber`
- else assign `secondNumber`.
- else assign `secondNumber`.
@ -202,7 +202,9 @@ if (firstNumber > secondNumber) {
Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?
Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?
@ -12,7 +12,7 @@ In this lesson, we're going to lay out the foundations to create bank web app, u
### Prerequisite
### 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.
### Preparation
### Preparation
@ -36,12 +36,12 @@ On your computer, create a folder named `bank` with a file named `index.html` in
## HTML templates
## HTML templates
If you want to create multiples screens for a web page, one solution would be to create one HTML file for every screen you want to display. However, this solution comes with some inconvenience:
If you want to create multiple screens for a web page, one solution would be to create one HTML file for every screen you want to display. However, this solution comes with some inconvenience:
- You have to reload the entire HTML when switching screen, which can be slow.
- You have to reload the entire HTML when switching screen, which can be slow.
- It's difficult to share data between the different screens.
- It's difficult to share data between the different screens.
Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
Another approach is to have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
### Task
### Task
@ -103,7 +103,7 @@ Then we'll add another HTML template for the dashboard page. This page will cont
## Displaying templates with JavaScript
## Displaying templates with JavaScript
If you try your current HTML file in a browser, you'll see that it get stuck displaying `Loading...`. That's because we need to add some JavaScript code to instantiate and display the HTML templates.
If you try your current HTML file in a browser, you'll see that it gets stuck displaying `Loading...`. That's because we need to add some JavaScript code to instantiate and display the HTML templates.
Instantiating a template is usually done in 3 steps:
Instantiating a template is usually done in 3 steps:
@ -145,7 +145,7 @@ updateRoute('login');
## Creating routes
## Creating routes
When talking about a web app, we call *Routing* the intent to map **URLs** to specific screens that should be displayed. On a website with multiple HTML files, this is done automatically as the file paths are reflected on the URL. For example, with these files in your project folder:
When talking about a web app, we call *Routing* the intent to map **URLs** to specific screens that should be displayed. On a website with multiple HTML files, this is done automatically as the file paths are reflected on the URL. For example, with these files in your project folder:
@ -16,7 +16,7 @@ You need to have completed the [HTML templates and routing](../1-template-route/
**Take note**
**Take note**
You will have two terminals running at the same time as listed below.
You will have two terminals running at the same time as listed below.
1. For the the main bank app we built in the [HTML templates and routing](../1-template-route/README.md) lesson
1. For the main bank app we built in the [HTML templates and routing](../1-template-route/README.md) lesson
2. For the [Bank APP server API](../api/README.md) we just setup above.
2. For the [Bank APP server API](../api/README.md) we just setup above.
You need two of the servers up and running to follow through with the rest of the lesson. They are listening on different ports(port `3000` and port `5000`) so everything should work just fine.
You need two of the servers up and running to follow through with the rest of the lesson. They are listening on different ports(port `3000` and port `5000`) so everything should work just fine.
@ -70,7 +70,7 @@ Let's start by adding a form to the `login` template. We'll need a *username* fi
</template>
</template>
```
```
If you take a closer look, you can notice that we also added a `<label>` element here. `<label>` elements are used to add a name to UI controls, such as our username field. Labels are important for the readability of your forms, but also comes with additional benefits:
If you take a closer look, you can notice that we also added a `<label>` element here. `<label>` elements are used to add a name to UI controls, such as our username field. Labels are important for the readability of your forms, but also come with additional benefits:
- By associating a label to a form control, it helps users using assistive technologies (like a screen reader) to understand what data they're expected to provide.
- By associating a label to a form control, it helps users using assistive technologies (like a screen reader) to understand what data they're expected to provide.
- You can click on the label to directly put focus on the associated input, making it easier to reach on touch-screen based devices.
- You can click on the label to directly put focus on the associated input, making it easier to reach on touch-screen based devices.
@ -193,7 +193,7 @@ Here's a quick video about `async/await` usage:
We use the `fetch()` API to send JSON data to the server. This method takes 2 parameters:
We use the `fetch()` API to send JSON data to the server. This method takes 2 parameters:
- The URL of the server, so we put back `//localhost:5000/api/accounts` here.
- The URL of the server, so we put back `//localhost:5000/api/accounts` here.
- The settings of the request. That's where we set the method to `POST` and provide the `body` for the request. As we're sending JSON data to the server, we also need to set the `Content-Type` header to `application/json` so the server know how to interpret the content.
- The settings of the request. That's where we set the method to `POST` and provide the `body` for the request. As we're sending JSON data to the server, we also need to set the `Content-Type` header to `application/json` so the server knows how to interpret the content.
As the server will respond to the request with JSON, we can use `await response.json()` to parse the JSON content and return the resulting object. Note that this method is asynchronous, so we use the `await` keyword here before returning to make sure any errors during parsing are also caught.
As the server will respond to the request with JSON, we can use `await response.json()` to parse the JSON content and return the resulting object. Note that this method is asynchronous, so we use the `await` keyword here before returning to make sure any errors during parsing are also caught.
@ -274,7 +274,7 @@ Now if you press the *Register* button and a field does not respect a validation
Validation like this performed *before* sending any data to the server is called **client-side** validation. But note that's it's not always possible to perform all checks without sending the data. For example, we cannot check here if an account already exists with the same username without sending a request to the server. Additional validation performed on the server is called **server-side** validation.
Validation like this performed *before* sending any data to the server is called **client-side** validation. But note that it's not always possible to perform all checks without sending the data. For example, we cannot check here if an account already exists with the same username without sending a request to the server. Additional validation performed on the server is called **server-side** validation.
Usually both need to be implemented, and while using client-side validation improves the user experience by providing instant feedback to the user, server-side validation is crucial to make sure the user data you manipulate is sound and safe.
Usually both need to be implemented, and while using client-side validation improves the user experience by providing instant feedback to the user, server-side validation is crucial to make sure the user data you manipulate is sound and safe.
@ -80,7 +80,7 @@ This refactoring by itself did not bring much improvements, but the idea was to
## Track data changes
## Track data changes
Now that we have put in place the `state` object to store our data, the next step is centralize the updates. The goal is to make it easier to keep track of any changes and when they happen.
Now that we have put in place the `state` object to store our data, the next step is to centralize the updates. The goal is to make it easier to keep track of any changes and when they happen.
To avoid having changes made to the `state` object, it's also a good practice to consider it [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), meaning that it cannot be modified at all. It also means that you have to create a new state object if you want to change anything in it. By doing this, you build a protection about potentially unwanted [side effects](https://en.wikipedia.org/wiki/Side_effect_(computer_science)), and open up possibilities for new features in your app like implementing undo/redo, while also making it easier to debug. For example, you could log every change made to the state and keep a history of the changes to understand the source of a bug.
To avoid having changes made to the `state` object, it's also a good practice to consider it [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), meaning that it cannot be modified at all. It also means that you have to create a new state object if you want to change anything in it. By doing this, you build a protection about potentially unwanted [side effects](https://en.wikipedia.org/wiki/Side_effect_(computer_science)), and open up possibilities for new features in your app like implementing undo/redo, while also making it easier to debug. For example, you could log every change made to the state and keep a history of the changes to understand the source of a bug.
@ -142,7 +142,7 @@ Try registering a new account, logging out and in again to check that everything
## Persist the state
## Persist the state
Most web apps needs to persist data to be able to work correctly. All the critical data is usually stored on a database and accessed via a server API, like as the user account data in our case. But sometimes, it's also interesting to persist some data on the client app that's running in your browser, for a better user experience or to improve loading performance.
Most web apps need to persist data to be able to work correctly. All the critical data is usually stored on a database and accessed via a server API, like as the user account data in our case. But sometimes, it's also interesting to persist some data on the client app that's running in your browser, for a better user experience or to improve loading performance.
When you want to persist data in your browser, there are a few important questions you should ask yourself:
When you want to persist data in your browser, there are a few important questions you should ask yourself:
@ -201,7 +201,7 @@ Now login in the app and try refreshing the page. You should stay on the dashboa
## Refresh the data
## Refresh the data
...But we might also have a created a new one. Oops!
...But we might also have created a new one. Oops!
Go to the dashboard using the `test` account, then run this command on a terminal to create a new transaction:
Go to the dashboard using the `test` account, then run this command on a terminal to create a new transaction:
> Solución de ejemplo para el proyecto de la aplicación bancaria, construida con HTML5 vanilla, CSS y JavaScript (sin marcos ni bibliotecas).
> Solución de ejemplo para el proyecto de la aplicación bancaria, construida con HTML5 vanilla, CSS y JavaScript (sin entorno de trabajos ni bibliotecas).
@ -99,7 +99,7 @@ To view the changes you made to your project, select the file(s) in the `Changes
If you are safisfied with the changes you made, hover on the `Changes` folder and click the `+` button to stage the changes. Staging simply means preparing your changes to commit them to GitHub.
If you are satisfied with the changes you made, hover on the `Changes` folder and click the `+` button to stage the changes. Staging simply means preparing your changes to commit them to GitHub.
If however you are not comfortable with some changes and you want to discard them, hover on the `Changes` folder and select the `undo` icon.
If however you are not comfortable with some changes and you want to discard them, hover on the `Changes` folder and select the `undo` icon.
@ -113,7 +113,7 @@ Once done working on your project, select the `hamburger menu icon` at the top l
Installing extensions on VSCode allows you to add new features and customized development environment options on your editor to improve your development workflow. These extensions also help you add support for multiple programming languages and are often either generic extensions or language-based extensions.
Installing extensions on VSCode allows you to add new features and customized development environment options on your editor to improve your development workflow. These extensions also help you add support for multiple programming languages and are often either generic extensions or language-based extensions.
To browse through the list of all available extensions, click the _`Extensions icon`_ on the activity bar and start typing the name of the extension on the text field labelled _'Search Extensions in Marketplace'_.
To browse through the list of all available extensions, click the _`Extensions icon`_ on the activity bar and start typing the name of the extension on the text field labelled _'Search Extensions in Marketplace'_.
You will see a list of extensions, each one containing **the extension name, publisher's name, a 1 sentense description, number of downloads** and **a star rating**.
You will see a list of extensions, each one containing **the extension name, publisher's name, a 1 sentence description, number of downloads** and **a star rating**.
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# Web Development for Beginners - A Curriculum
# Web Development for Beginners - A Curriculum
Learn the fundamentals of JavaScript, CSS, and HTML with our comprehensive 12-week course, brought to you by Microsoft Cloud Advocates. Each of the 24 lessons includes pre- and post-lesson quizzes, detailed written instructions, solutions, assignments, and much more. With a project-based approach to learning, our curriculum is designed to help you develop practical skills through hands-on building. Enhance your skills and optimize your knowledge retention with our effective project-based pedagogy.
Learn the fundamentals of web development with our 12-week comprehensive course by Microsoft Cloud Advocates. Each of the 24 lessons dives into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage with quizzes, discussions, and practical assignments. Enhance your skills and optimize your knowledge retention with our effective project-based pedagogy. Start your coding journey today!
### _Are you a student?_
#### 🧑🎓 _Are you a student?_
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) where you will find beginner resources, Student packs and even ways to get a free certificate voucher. This is the page you want to bookmark and check from time to time as we switch out content monthly.
Visit [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) where you will find beginner resources, Student packs and even ways to get a free certificate voucher. This is the page you want to bookmark and check from time to time as we switch out content monthly.
# Getting Started
### 📣 Announcement - _New Curriculum_ on Generative AI for JavaScript was just released
Don't miss our new Generative AI curriculum!
Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to get started!
<div>
<imgsrc="./images/background.png"width="600px"/>
</div>
- Lessons covering everything from basics to RAG.
- Interact with historical characters using GenAI and our companion app.
- Fun and engaging narrative, you'll be time traveling!
<div>
<imgsrc="./images/character.png"width="600px"/>
</div>
Each lesson includes an assignment to complete, a knowledge check and a challenge to guide you on learning topics like:
- Prompting and prompt engineering
- Text and image app generation
- Search apps
Visit [https://aka.ms/genai-js-course]([https://aka.ms/genai-js-course) to get started!
## 🌱 Getting Started
> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. We'd love your feedback [in our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. We'd love your feedback [in our discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
> **[Students](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, to fully benefit from this curriculum, we encourage you to fork the entire repository and engage in self-study. Start with a pre-lecture quiz and follow through with reading the lecture material and completing the various activities. Emphasize on comprehending the lessons rather than just copying the solution code. However, if needed, the solution code can be found in the */solutions folders* within each project-based lesson. Another great way to enhance your learning experience is to form a study group with your peers and work through the curriculum together. To further your education, we highly recommend exploring [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for additional study materials..
**[Learners](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, for each lesson, start with a pre-lecture quiz and follow through with reading the lecture material, completing the various activities and check your understanding with the post-lecture quiz.
## Pedagogy
To enhance your learning experience, connect with your peers to work on the projects together! Discussions are encouraged in our [discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) where our team of moderators will be available to answer your questions.
Our curriculum is designed with two key pedagogical principles in mind: project-based learning and frequent quizzes. The program teaches the fundamentals of JavaScript, HTML, and CSS, as well as the latest tools and techniques used by today's web developers. Students will have the opportunity to develop hands-on experience by building a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have gained a solid understanding of web development.
To further your education, we highly recommend exploring [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) for additional study materials.
> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn!
### 📋 Setting up your environment
By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with a video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum.
This curriculum has a development environment ready to go! As you get started you can choose to run the curriculum in a [Codespace](https://github.com/features/codespaces/) (_a browser-based, no installs needed environment_), or locally on your computer using a text editor such as [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12-week cycle.
#### 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
In your copy of this repository that you created, click the **Code** button and select **Open with Codespaces**. This will create a new Codespace for you to work in.
#### Running the curriculum locally on your computer
To run this curriculum locally on your computer, you will need a text editor, a browser and a command line tool. Our first lesson, [Introduction to Programming Languages and Tools of the Trade](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/1-getting-started-lessons/1-intro-to-programming-languages), will walk you through various options for each of these tools for you to select what works best for you.
Our recommendation is to use [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) as your editor, which also has a built-in [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). You can download Visual Studio Code [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
While we have purposefully avoided introducing JavaScript frameworks to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Find our [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), and [Translation](TRANSLATIONS.md) guidelines. We welcome your constructive feedback!
1. Clone your repository to your computer. You can do this by clicking the **Code** button and copying the URL:
## Each lesson includes:
<imgsrc="./images/createcodespace.png"alt="Copy your repository URL"style="width:270px;"/>
Then, open [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) within [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) and run the following command, replacing `<your-repository-url>` with the URL you just copied:
```bash
git clone <your-repository-url>
```
2. Open the folder in Visual Studio Code. You can do this by clicking **File** > **Open Folder** and selecting the folder you just cloned.
> Recommended Visual Studio Code extensions:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - to preview HTML pages within Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - to help you write code faster
## 📂 Each lesson includes:
- optional sketchnote
- optional sketchnote
- optional supplemental video
- optional supplemental video
@ -51,9 +112,9 @@ While we have purposefully avoided introducing JavaScript frameworks to concentr
- assignment
- assignment
- post-lesson quiz
- 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.
@ -82,23 +143,52 @@ While we have purposefully avoided introducing JavaScript frameworks to concentr
| 23 | [Banking App](/7-bank-project/solution/README.md) | 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 |
| 23 | [Banking App](/7-bank-project/solution/README.md) | 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/README.md) | 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 |
| 24 | [Banking App](/7-bank-project/solution/README.md) | 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
## 🏫 Pedagogy
Our curriculum is designed with two key pedagogical principles in mind:
* project-based learning
* frequent quizzes
The program teaches the fundamentals of JavaScript, HTML, and CSS, as well as the latest tools and techniques used by today's web developers. Students will have the opportunity to develop hands-on experience by building a typing game, virtual terrarium, eco-friendly browser extension, space-invader-style game, and a banking app for businesses. By the end of the series, students will have gained a solid understanding of web development.
> 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) on Microsoft Learn!
By ensuring that the content aligns with projects, the process is made more engaging for students and retention of concepts will be augmented. We also wrote several starter lessons in JavaScript basics to introduce concepts, paired with a video from the "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" collection of video tutorials, some of whose authors contributed to this curriculum.
In addition, a low-stakes quiz before a class sets the intention of the student towards learning a topic, while a second quiz after class ensures further retention. This curriculum was designed to be flexible and fun and can be taken in whole or in part. The projects start small and become increasingly complex by the end of the 12-week cycle.
While we have purposefully avoided introducing JavaScript frameworks to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visit our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines. We welcome your constructive feedback!
## 🧭 Offline access
You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`.
## PDF
## 📘 PDF
A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
A PDF of all of the lessons can be found [here](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## Other Curricula
Our team produces other curricula! Check out:
## 🎒 Other Courses
Our team produces other courses! Check out:
- [Generative AI for Beginners](https://aka.ms/genai-beginners)
- [Generative AI for Beginners .NET](https://github.com/microsoft/Generative-AI-for-beginners-dotnet)
- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)
- [AI for Beginners](https://aka.ms/ai-beginners)
- [AI for Beginners](https://aka.ms/ai-beginners)
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
- [Data Science for Beginners](https://aka.ms/datascience-beginners)
- [ML for Beginners](https://aka.ms/ml-beginners)
- [Cybersecurity for Beginners](https://github.com/microsoft/Security-101)
- [Web Dev for Beginners](https://aka.ms/webdev-beginners)
- [IoT for Beginners](https://aka.ms/iot-beginners)
- [IoT for Beginners](https://aka.ms/iot-beginners)
- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
- [XR Development for Beginners](https://github.com/microsoft/xr-development-for-beginners)
- [XR Development for Beginners](https://aka.ms/xr-dev-for-beginners)
- [Mastering GitHub Copilot for Paired Programming](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
- [Mastering GitHub Copilot for C#/.NET Developers](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers)
- [Choose Your Own Copilot Adventure](https://github.com/microsoft/CopilotAdventures)
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
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.
```
npm install
```
### 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`.
```
Edit the `index.js` file in `assets/translations` to import the new translated files.
npm run build
```
### Lints and fixes 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
<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!**
**Ευχαριστούμε θερμά τους συγγραφείς μας Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, and sketchnote artist Tomomi Imura!**
Anthony Bartolo
4 months ago
committed by
GitHub
