mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-12 01:34:15 +02:00
video callouts with emoji, addition of Learn path links
This commit is contained in:
Jen Looper
@@ -92,6 +92,8 @@ There's a chance that some statements will not be executed by a device. This is
|
|||||||
|
|
||||||
[](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
[](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
||||||
|
|
||||||
|
> 🎥 Click the image above for a video about tooling
|
||||||
|
|
||||||
In this section, you'll learn about some software that you might find very useful as you start your professional development journey.
|
In this section, you'll learn about some software that you might find very useful as you start your professional development journey.
|
||||||
|
|
||||||
A **development environment** is a unique set of tools and features that a developer will use often when writing software. Some of these tools have been customized for a developer specific needs, and may change over time if a developer changes priorities in work or personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them.
|
A **development environment** is a unique set of tools and features that a developer will use often when writing software. Some of these tools have been customized for a developer specific needs, and may change over time if a developer changes priorities in work or personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them.
|
||||||
|
|||||||
@@ -8,11 +8,13 @@
|
|||||||
|
|
||||||
This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
|
This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
|
||||||
|
|
||||||
|
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
|
||||||
|
|
||||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
|
||||||
|
|
||||||
|
> 🎥 Click the image above for a video about data types
|
||||||
|
|
||||||
Let's start with variables and the data types that populate them!
|
Let's start with variables and the data types that populate them!
|
||||||
|
|
||||||
## Variables
|
## Variables
|
||||||
|
|
||||||
Variables store values that can be used and changed throughout your code.
|
Variables store values that can be used and changed throughout your code.
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ When we think about writing code, we always want to ensure our code is readable.
|
|||||||
|
|
||||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||||
|
|
||||||
> Click the image above for a video about methods and functions.
|
> 🎥 Click the image above for a video about methods and functions.
|
||||||
|
|
||||||
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)!
|
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)!
|
||||||
|
|
||||||
|
|||||||
@@ -10,7 +10,9 @@ Making decisions and controlling the order in which your code runs makes your co
|
|||||||
|
|
||||||
[](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
|
[](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
|
||||||
|
|
||||||
> 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/en-us/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
|
||||||
## 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 be only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met.
|
||||||
|
|||||||
@@ -10,7 +10,9 @@ This lesson covers the basics of JavaScript, the language that provides interact
|
|||||||
|
|
||||||
[](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
|
[](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
|
||||||
|
|
||||||
> Click the image above for a video about arrays and loops.
|
> 🎥 Click the image above for a video about arrays and loops.
|
||||||
|
|
||||||
|
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
|
||||||
## Arrays
|
## Arrays
|
||||||
|
|
||||||
Working with data is a common task for any language, and it's a much easier task when data is organized in a structural format, such as arrays. With arrays, data is stored in a structure similar to a list. One major benefit of arrays is that you can store different types of data in one array.
|
Working with data is a common task for any language, and it's a much easier task when data is organized in a structural format, such as arrays. With arrays, data is stored in a structure similar to a list. One major benefit of arrays is that you can store different types of data in one array.
|
||||||
|
|||||||
@@ -191,7 +191,7 @@ Take a minute to watch a video on using `const`, `let` and `var`
|
|||||||
|
|
||||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
|
||||||
|
|
||||||
> Click the image above for a video about variables.
|
> 🎥 Click the image above for a video about variables.
|
||||||
|
|
||||||
### Add start logic
|
### Add start logic
|
||||||
|
|
||||||
|
|||||||
@@ -151,7 +151,7 @@ Here's a quick video about `async`:
|
|||||||
|
|
||||||
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
|
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
|
||||||
|
|
||||||
> Click the image above for a video about async/await.
|
> 🎥 Click the image above for a video about async/await.
|
||||||
|
|
||||||
Create a new function to query the C02Signal API:
|
Create a new function to query the C02Signal API:
|
||||||
|
|
||||||
|
|||||||
@@ -283,7 +283,7 @@ Here's a refresher video on arrow functions:
|
|||||||
|
|
||||||
[](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
|
[](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
|
||||||
|
|
||||||
> Click the image above for a video about arrow functions.
|
> 🎥 Click the image above for a video about arrow functions.
|
||||||
|
|
||||||
Now try to use the back and forward buttons of your browsers, and check that the displayed route is correctly updated this time.
|
Now try to use the back and forward buttons of your browsers, and check that the displayed route is correctly updated this time.
|
||||||
|
|
||||||
|
|||||||
@@ -181,7 +181,7 @@ Here's a quick video about `async/await` usage:
|
|||||||
|
|
||||||
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
|
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
|
||||||
|
|
||||||
> Click the image above for a video about async/await.
|
> 🎥 Click the image above for a video about async/await.
|
||||||
|
|
||||||
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:
|
||||||
|
|
||||||
|
|||||||
40
README.md
40
README.md
@@ -23,7 +23,7 @@ Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson cur
|
|||||||
|
|
||||||
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||||
|
|
||||||
> Click the image above for a video about the project and the folks who created it!
|
> 🎥 Click the image above for a video about the project and the folks who created it!
|
||||||
|
|
||||||
## Pedagogy
|
## Pedagogy
|
||||||
|
|
||||||
@@ -56,32 +56,32 @@ While we have purposefully avoided introducing JavaScript frameworks so as to co
|
|||||||
|
|
||||||
## Lessons
|
## Lessons
|
||||||
|
|
||||||
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author |
|
| | 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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 |
|
| 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
|
## Offline access
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user