Web Development for Beginners - A Curriculum

Azure Cloud Advocates at Microsoft are created a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre-and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment, and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.

Link: https://github.com/microsoft/Web-Dev-For-Beginners

Three JS - JavaScript 3D library

The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current build only includes a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.

Link: https://github.com/mrdoob/three.js

D3 JS - Bring data to life with SVG, Canvas, and HTML

D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas, and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

Link: https://github.com/d3/d3

Mammoth JS - Docx to HTML

Mammoth is designed to convert .docx documents, such as those created by Microsoft Word, Google Docs, and LibreOffice, and convert them to HTML. Mammoth aims to produce simple and clean HTML by using semantic information in the document and ignoring other details. For instance, Mammoth converts any paragraph with the style Heading 1 to h1 elements, rather than attempting to exactly copy the styling (font, text size, color, etc.) of the heading.

Link: https://github.com/mwilliamson/mammoth.js

Grapes JS - Open source Web Builder Framework

GrapesJS is a free and open-source Web Builder Framework that helps to build HTML templates, faster and easier, to be delivered in sites, newsletters, or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates. To better understand this concept check the image below

Link: https://github.com/artf/grapesjs

Plyr - A simple HTML5, YouTube, and Vimeo player

Plyr is a simple, lightweight, accessible, and customizable HTML5, YouTube, and Vimeo media player that supports modern browsers.

Link: https://github.com/sampotts/plyr

Size Limit - Calculate the real cost to run your JS app

Size Limit is a performance budget tool for JavaScript. It checks every commit on CI, calculates the real cost of your JS for end-users, and throws an error if the cost exceeds the limit.
Link: https://github.com/ai/size-limit

Conclusion

I hope you found this article helpful. If you need any help please let me know in the comment section.

Let's connect on Twitter and LinkedIn

👋 Thanks for reading, See you next time