DEV Community

Cover image for Announcing a Free Curriculum: Web Development for Beginners
Jen Looper for Microsoft Azure

Posted on

Announcing a Free Curriculum: Web Development for Beginners

Everyone's a beginner at some time in their career, whether it's when you are in school, in a boot camp, a postdoctoral program, or as an experienced developer learning a new technology.

Learn with us!

Over the past summer, Azure Advocates and Project Managers have been hard at work creating lessons and tutorials for beginners around the world who want to become professional web developers. We launched several beginner video series, and now, in the same vein, we have created a curriculum that you can access completely free of charge to take your first steps with JavaScript, CSS, and HTML, the building blocks of the web.

Here on the Academic Team in Azure Advocacy, we have partnered with colleagues across our large department of educators, advocates, managers and content creators to create for you 24 lessons spanning 12 weeks that you can take either in full or in part, at your leisure from the safety of your own home. They are freely open to be used as you like, via GitHub. Teachers, you can use this content within GitHub Classroom!

Meet the team!

Pedagogy

What's pedagogy? It's the way you teach, what underlying values inform your teaching style and choices.

We have chosen two pedagogical tenets while building this curriculum: ensuring that it is project-based and that it includes frequent quizzes. By the end of this series, students will have built a typing game, a virtual terrarium, a 'green' browser extension, a 'space invaders' type game, and a business-type banking app, and will have learned the basics of JavaScript, HTML, and CSS along with the modern toolchain of today's web developer.

What about non-English speaking learners? We are working to translate this curriculum to several languages, so please stay tuned!

Curriculum Structure

Each of the 24 lesson includes:

  • optional sketchnote
  • optional supplemental video
  • pre-lesson warmup quiz
  • written lesson
  • for project-based lessons, step-by-step guides on how to build the project
  • knowledge checks
  • a challenge
  • supplemental reading
  • assignment
  • post-lesson quiz

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 video from the "Beginners Series to: JavaScript" 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 so as to focus 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".

Whether you're a student or a teacher, we welcome your feedback! The issues are open on the repos for you!

Special thanks to Floor Drees, Christopher Harrison, Chris Noring, Yohan Lasorsa, Jasmine Greenaway, and Tomomi Imura for their work on this curriculum!

Without further ado, please meet Web Development For Beginners: A Curriculum!

Top comments (22)

Collapse
 
shaijut profile image
Shaiju T

😄 , Nice initiative by Microsoft for Beginner Web Developers, Thanks all for the hard work. Small feedback: Text based tutorials are easy to follow than videos. But I can see the tutorials are in Github repo , it would be easy to follow if you could move the content from Github repo to Microsoft Learn page, so that the learners can track their progress and move forward. This is how freecodecamp.org and educative.io does.

Collapse
 
jenlooper profile image
Jen Looper

hi, thank you for the feedback! For the moment, you can use this repo with GitHub Classroom, and probably in the near future these tutorials will indeed end up as a learning path on Microsoft Learn :)

Collapse
 
romelmahmud profile image
romelmahmud

hello thanks a lot, how can I add that repo wit GitHub Classroom??

Thread Thread
 
jenlooper profile image
Jen Looper

hi, if you look here github.com/microsoft/Web-Dev-For-B... there are some instructions. You will need to fork the whole repo and then rearrange each lesson into its own repo on your own GitHub account. After that, you can create assignments via GitHub Classroom linked to a repo. Let me know how it goes!

Collapse
 
nickytonline profile image
Nick Taylor

This looks like a great initiative Jen. Well done to all those involved. 👏🏻

Collapse
 
jenlooper profile image
Jen Looper

Thank you!

Collapse
 
devsuite profile image
Dev-suite

Pls the Github repo link

Collapse
 
jenlooper profile image
Jen Looper

it's at the bottom of the page: github.com/microsoft/Web-Dev-For-B...

Collapse
 
devsuite profile image
Dev-suite

Ma
How re we going to start taking class because don't understand

Thread Thread
 
jenlooper profile image
Jen Looper

This is self-driven content; you can fork the repo and work through the included lessons. Take a look, see if it makes sense. The table of contents is in the base README file; lessons are linked there.

Thread Thread
 
devsuite profile image
Dev-suite

Okay ma thank u very much

Collapse
 
jenlooper profile image
Jen Looper

A few additions!

Quizzes have been moved to their own app so you can take them more easily

We now support at lest seven languages due to community translation efforts! Japanese and Korean in particular are fully complete, with Hindi and Italian coming along very well! Please stay tuned and consider supporting our translation efforts!

Collapse
 
simonholdorf profile image
Simon Holdorf

This is great Jen!

Collapse
 
unlucky profile image
UnLucky

Nöice

Collapse
 
antm23 profile image
antm23

The quizzes don't load. Am I missing something?

Collapse
 
jenlooper profile image
Jen Looper

I messed up the links when converting to docsify. Should be restored now, sorry

Collapse
 
romulobrandino profile image
Romulo Brandino da Silva

Great initiative, congratulations MSFT Dev Team!

Collapse
 
rainbowsview profile image
Dakiti📀

Thank you for this! I'm really excited to start!

Collapse
 
srikanth74659 profile image
Srikanth

By any chance can I know how to use Docsify., I can't seem to find videos or articles on how to use Docsify for this particular repo

Thank you in advance

Collapse
 
jenlooper profile image
Jen Looper

Hi, here’s the info docsify.js.org/#/