Web Development for Beginners: A new Learning Path on Microsoft Learn

Published Jun 30 2021 06:46 AM 2,837 Views
Microsoft

webdev.png

> This is based on the Git Hub curriculum https://github.com/microsoft/Web-Dev-For-Beginners

 

There are 16 million developers in the world today. Roughly half of those, 8 million are web developers. Web development is therefore a good skill to have as you are looking to land that first job and build a career in tech. But where do you begin to learn all that? With this path 

Web dev for beginners path.

It covers everything from HTML, CSS, JavaScript to Accessibility. 

 

Intro to programming

What even is programming? Well, it's a way to instruct your machine to do things for you. By running statements, you can things like creating a web a page, a simple script or why not a computer game. The possibilities are endless. You do need some kind of text editor to type it all in, we provide that to in this first module.

Intro to programming

 

Accessibility on the Web

Not everyone has perfect eyesight or see the colors you do or can even see at all. As a developer you need to realize that when you build programs, you should include everyone. There are specific tags and approaches you can use to make your app usable by anyone, regardless of disability. Be inclusive and build better apps.

Web accessibility

 

JavaScript variables and data types

One of the most popular programming languages right now is JavaScript. JavaScript can be used in the browser to create an interactive experience, but it can also be used on the backend to create APIs, application that can talk to other services and even databases. Learn how to think in programming by being introduced to the concept of variables and data types.

JavaScript variables and data types

 

Functions

When you start out, you might have all your code statements in one file. But there is a way to organize your code so it can be made more readable but also reusable. What you can do is to create named areas, functions, which can be called whenever you need them to carry out a task for you.

Functions in JavaScript

 

Decisions with IF/ELSE

Your code can execute differently depending on the values of different variables or some other condition. Having that flexibility makes your application useful in many different scenarios. Learn about IF, ELSE and much more.

Decisions with IF/ELSE

 

Arrays and loops

Sometimes your data takes on the form of a list. Imagining a recipe, or an ice cream menu or why not a receipt of things. Lists make it possible to store more than one thing and there are constructs that make it possible to operate on lists and get what you need from them such as their sum, or maybe the highest value and so on. 

Arrays and loops

 

 

%3CLINGO-SUB%20id%3D%22lingo-sub-2502044%22%20slang%3D%22en-US%22%3EWeb%20Development%20for%20Beginners%3A%20A%20new%20Learning%20Path%20on%20Microsoft%20Learn%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2502044%22%20slang%3D%22en-US%22%3E%3CP%3E%3C%2FP%3E%3CP%3E%26gt%3B%20This%20is%20based%20on%20the%20Git%20Hub%20curriculum%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FWeb-Dev-For-Beginners%2F%3FWT.mc_ID%3Dacademic-33004-leestott%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Fgithub.com%2Fmicrosoft%2FWeb-Dev-For-Beginners%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThere%20are%2016%20million%20developers%20in%20the%20world%20today.%20Roughly%20half%20of%20those%2C%208%20million%20are%20web%20developers.%20Web%20development%20is%20therefore%20a%20good%20skill%20to%20have%20as%20you%20are%20looking%20to%20land%20that%20first%20job%20and%20build%20a%20career%20in%20tech.%20But%20where%20do%20you%20begin%20to%20learn%20all%20that%3F%20With%20this%20path%26nbsp%3B%3C%2FP%3E%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fpaths%2Fweb-development-101%2F%3FWT.mc_ID%3Dacademic-33004-leestott%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3EWeb%20dev%20for%20beginners%20path%3C%2FA%3E.%3C%2FP%3E%3CP%3EIt%20covers%20everything%20from%20HTML%2C%20CSS%2C%20JavaScript%20to%20Accessibility.%26nbsp%3B%3C%2FP%3E%20%26nbsp%3B%20%3CA%20href%3D%22https%3A%2F%2Fdev.to%2Fsoftchris%2Fweb-dev-for-beginners-on-learn-4j48-temp-slug-4222989%3Fpreview%3D75a0f612dc3a5e5d8048270079990c140ffcb18e23d4521c4463fe6b41d50b9cfe002e00d2ccd731d9af88204e037d60b9aab82c60824744ba2abe30%23intro-to-programming%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3C%2FA%3EIntro%20to%20programming%3CP%3EWhat%20even%20is%20programming%3F%20Well%2C%20it's%20a%20way%20to%20instruct%20your%20machine%20to%20do%20things%20for%20you.%20By%20running%20statements%2C%20you%20can%20things%20like%20creating%20a%20web%20a%20page%2C%20a%20simple%20script%20or%20why%20not%20a%20computer%20game.%20The%20possibilities%20are%20endless.%20You%20do%20need%20some%20kind%20of%20text%20editor%20to%20type%20it%20all%20in%2C%20we%20provide%20that%20to%20in%20this%20first%20module.%3C%2FP%3E%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fmodules%2Fweb-development-101-introduction-programming%2F%3FWT.mc_ID%3Dacademic-33004-leestott%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3EIntro%20to%20programming%3C%2FA%3E%3C%2FP%3E%20%26nbsp%3B%20%3CA%20href%3D%22https%3A%2F%2Fdev.to%2Fsoftchris%2Fweb-dev-for-beginners-on-learn-4j48-temp-slug-4222989%3Fpreview%3D75a0f612dc3a5e5d8048270079990c140ffcb18e23d4521c4463fe6b41d50b9cfe002e00d2ccd731d9af88204e037d60b9aab82c60824744ba2abe30%23accessibility-on-the-web%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3C%2FA%3EAccessibility%20on%20the%20Web%3CP%3ENot%20everyone%20has%20perfect%20eyesight%20or%20see%20the%20colors%20you%20do%20or%20can%20even%20see%20at%20all.%20As%20a%20developer%20you%20need%20to%20realize%20that%20when%20you%20build%20programs%2C%20you%20should%20include%20everyone.%20There%20are%20specific%20tags%20and%20approaches%20you%20can%20use%20to%20make%20your%20app%20usable%20by%20anyone%2C%20regardless%20of%20disability.%20Be%20inclusive%20and%20build%20better%20apps.%3C%2FP%3E%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fmodules%2Fweb-development-101-accessibility%2F%3FWT.mc_ID%3Dacademic-33004-leestott%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3EWeb%20accessibility%3C%2FA%3E%3C%2FP%3E%20%26nbsp%3B%20%3CA%20href%3D%22https%3A%2F%2Fdev.to%2Fsoftchris%2Fweb-dev-for-beginners-on-learn-4j48-temp-slug-4222989%3Fpreview%3D75a0f612dc3a5e5d8048270079990c140ffcb18e23d4521c4463fe6b41d50b9cfe002e00d2ccd731d9af88204e037d60b9aab82c60824744ba2abe30%23javascript-variables-and-data-types%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3C%2FA%3EJavaScript%20variables%20and%20data%20types%3CP%3EOne%20of%20the%20most%20popular%20programming%20languages%20right%20now%20is%20JavaScript.%20JavaScript%20can%20be%20used%20in%20the%20browser%20to%20create%20an%20interactive%20experience%2C%20but%20it%20can%20also%20be%20used%20on%20the%20backend%20to%20create%20APIs%2C%20application%20that%20can%20talk%20to%20other%20services%20and%20even%20databases.%20Learn%20how%20to%20think%20in%20programming%20by%20being%20introduced%20to%20the%20concept%20of%20variables%20and%20data%20types.%3C%2FP%3E%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fmodules%2Fweb-development-101-variables%2F%3FWT.mc_ID%3Dacademic-33004-leestott%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3EJavaScript%20variables%20and%20data%20types%3C%2FA%3E%3C%2FP%3E%20%26nbsp%3B%20%3CA%20href%3D%22https%3A%2F%2Fdev.to%2Fsoftchris%2Fweb-dev-for-beginners-on-learn-4j48-temp-slug-4222989%3Fpreview%3D75a0f612dc3a5e5d8048270079990c140ffcb18e23d4521c4463fe6b41d50b9cfe002e00d2ccd731d9af88204e037d60b9aab82c60824744ba2abe30%23functions%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3C%2FA%3EFunctions%3CP%3EWhen%20you%20start%20out%2C%20you%20might%20have%20all%20your%20code%20statements%20in%20one%20file.%20But%20there%20is%20a%20way%20to%20organize%20your%20code%20so%20it%20can%20be%20made%20more%20readable%20but%20also%20reusable.%20What%20you%20can%20do%20is%20to%20create%20named%20areas%2C%20functions%2C%20which%20can%20be%20called%20whenever%20you%20need%20them%20to%20carry%20out%20a%20task%20for%20you.%3C%2FP%3E%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fmodules%2Fweb-development-101-functions%2F%3FWT.mc_ID%3Dacademic-33004-leestott%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3EFunctions%20in%20JavaScript%3C%2FA%3E%3C%2FP%3E%20%26nbsp%3B%20%3CA%20href%3D%22https%3A%2F%2Fdev.to%2Fsoftchris%2Fweb-dev-for-beginners-on-learn-4j48-temp-slug-4222989%3Fpreview%3D75a0f612dc3a5e5d8048270079990c140ffcb18e23d4521c4463fe6b41d50b9cfe002e00d2ccd731d9af88204e037d60b9aab82c60824744ba2abe30%23decisions-with-ifelse%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3C%2FA%3EDecisions%20with%20IF%2FELSE%3CP%3EYour%20code%20can%20execute%20differently%20depending%20on%20the%20values%20of%20different%20variables%20or%20some%20other%20condition.%20Having%20that%20flexibility%20makes%20your%20application%20useful%20in%20many%20different%20scenarios.%20Learn%20about%20IF%2C%20ELSE%20and%20much%20more.%3C%2FP%3E%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fmodules%2Fweb-development-101-if-else%2F%3FWT.mc_ID%3Dacademic-33004-leestott%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3EDecisions%20with%20IF%2FELSE%3C%2FA%3E%3C%2FP%3E%20%26nbsp%3B%20%3CA%20href%3D%22https%3A%2F%2Fdev.to%2Fsoftchris%2Fweb-dev-for-beginners-on-learn-4j48-temp-slug-4222989%3Fpreview%3D75a0f612dc3a5e5d8048270079990c140ffcb18e23d4521c4463fe6b41d50b9cfe002e00d2ccd731d9af88204e037d60b9aab82c60824744ba2abe30%23arrays-and-loops%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3C%2FA%3EArrays%20and%20loops%3CP%3ESometimes%20your%20data%20takes%20on%20the%20form%20of%20a%20list.%20Imagining%20a%20recipe%2C%20or%20an%20ice%20cream%20menu%20or%20why%20not%20a%20receipt%20of%20things.%20Lists%20make%20it%20possible%20to%20store%20more%20than%20one%20thing%20and%20there%20are%20constructs%20that%20make%20it%20possible%20to%20operate%20on%20lists%20and%20get%20what%20you%20need%20from%20them%20such%20as%20their%20sum%2C%20or%20maybe%20the%20highest%20value%20and%20so%20on.%26nbsp%3B%3C%2FP%3E%20%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fmodules%2Fweb-development-101-arrays%2F%3FWT.mc_ID%3Dacademic-33004-leestott%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3EArrays%20and%20loops%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2502044%22%20slang%3D%22en-US%22%3E%3CP%3EThere%20are%20roughly%2016%20million%20developers%20in%20the%20world%20today.%20Roughly%20half%20of%20those%2C%208%20million%20are%20web%20developers.%20Web%20development%20is%20therefore%20a%20good%20skill%20to%20have%20as%20you%20are%20looking%20to%20land%20that%20first%20job%20and%20build%20a%20career%20in%20tech.%20But%20where%20do%20you%20begin%20to%20learn%20all%20that%3F%20With%20this%20path%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fpaths%2Fweb-development-101%2F%3FWT.mc_ID%3Dacademic-33004-leestott%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fpaths%2Fweb-development-101%2F%3C%2FA%3E.%20It%20covers%20everything%20from%20HTML%2C%20CSS%2C%20JavaScript%20to%20Accessibility.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2502044%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EWeb%20Apps%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Co-Authors
Version history
Last update:
‎Jun 30 2021 06:46 AM
Updated by: