Learn web dev with these 24 lessons on GitHub

Published Jan 05 2021 10:15 AM 3,133 Views
Microsoft

It's 2021. Want to learn webdev?

Here's your chance. Microsoft created 24 lessons on Web Development. It covers HTML, CSS and JavaScript. There are also quizzed and challenges.

Web-Dev-For-Beginners

 

 

There are various projects in there so you can dive deeper on things such as:

  • Typing game, this puts your skills to the test as it teaches you how to programmatically change CSS, keep track of time and also ensure you understand how HTML, CSS and JavaScript work together
  • Space Game, it teaches you game development, using the Canvas and patternsns like pub-sub and composition
  • Banking app, it's possible to develop a SPA like application without a single framework using the template tag and more.
  • Browser extension, have you ever considered writing an extension? It's easier than it sounds.
%3CLINGO-SUB%20id%3D%22lingo-sub-2033829%22%20slang%3D%22en-US%22%3ELearn%20web%20dev%20with%20these%2024%20lessons%20on%20GitHub%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2033829%22%20slang%3D%22en-US%22%3E%3CP%3EIt's%202021.%20Want%20to%20learn%20webdev%3F%3C%2FP%3E%0A%3CP%3EHere's%20your%20chance.%20Microsoft%20created%2024%20lessons%20on%20Web%20Development.%20It%20covers%20HTML%2C%20CSS%20and%20JavaScript.%20There%20are%20also%20quizzed%20and%20challenges.%3C%2FP%3E%0A%3CBLOCKQUOTE%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FWeb-Dev-For-Beginners%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EWeb-Dev-For-Beginners%3C%2FA%3E%3C%2FP%3E%0A%3C%2FBLOCKQUOTE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThere%20are%20various%20projects%20in%20there%20so%20you%20can%20dive%20deeper%20on%20things%20such%20as%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FWeb-Dev-For-Beginners%2Ftree%2Fmain%2F4-typing-game%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ETyping%20game%3C%2FA%3E%2C%20this%20puts%20your%20skills%20to%20the%20test%20as%20it%20teaches%20you%20how%20to%20programmatically%20change%20CSS%2C%20keep%20track%20of%20time%20and%20also%20ensure%20you%20understand%20how%20HTML%2C%20CSS%20and%20JavaScript%20work%20together%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FWeb-Dev-For-Beginners%2Ftree%2Fmain%2F6-space-game%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ESpace%20Game%3C%2FA%3E%2C%20it%20teaches%20you%20game%20development%2C%20using%20the%20Canvas%20and%20patternsns%20like%20pub-sub%20and%20composition%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FWeb-Dev-For-Beginners%2Ftree%2Fmain%2F7-bank-project%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EBanking%20app%3C%2FA%3E%2C%20it's%20possible%20to%20develop%20a%20SPA%20like%20application%20without%20a%20single%20framework%20using%20the%20template%20tag%20and%20more.%3C%2FLI%3E%0A%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FWeb-Dev-For-Beginners%2Ftree%2Fmain%2F5-browser-extension%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EBrowser%20extension%3C%2FA%3E%2C%20have%20you%20ever%20considered%20writing%20an%20extension%3F%20It's%20easier%20than%20it%20sounds.%3C%2FLI%3E%0A%3C%2FUL%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2033829%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22spacegame.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F244354iAD52E36FDFA872A3%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22spacegame.png%22%20alt%3D%22spacegame.png%22%20%2F%3E%3C%2FSPAN%3EIt's%202021.%20Want%20to%20learn%20webdev%3F%3C%2FP%3E%0A%3CP%3EHere's%20your%20chance.%20Microsoft%20created%2024%20lessons%20on%20Web%20Development.%20It%20covers%20HTML%2C%20CSS%20and%20JavaScript.%20There%20are%20also%20quizzed%20and%20challenges.%3C%2FP%3E%0A%3CBLOCKQUOTE%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fmicrosoft%2FWeb-Dev-For-Beginners%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3EWeb-Dev-For-Beginners%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22spacegame.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F244353i09B10D99A046FA46%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22spacegame.png%22%20alt%3D%22spacegame.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3C%2FBLOCKQUOTE%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2033829%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EWeb%20Apps%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Version history
Last update:
‎Jan 05 2021 10:16 AM
Updated by: