From a35c7ffaf04f5c4a47eebddd502cf5181cdf0318 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 11 Dec 2021 02:49:22 +0100
Subject: [PATCH] Add package managers content

---
 .../content/107-package-managers/100-npm.md        | 11 ++++++++++-
 .../content/107-package-managers/101-yarn.md       |  9 ++++++++-
 .../content/107-package-managers/readme.md         | 14 +++++++++++++-
 content/roadmaps/100-frontend/meta.json            |  1 +
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/content/roadmaps/100-frontend/content/107-package-managers/100-npm.md b/content/roadmaps/100-frontend/content/107-package-managers/100-npm.md
index aa882e995..285673a9e 100644
--- a/content/roadmaps/100-frontend/content/107-package-managers/100-npm.md
+++ b/content/roadmaps/100-frontend/content/107-package-managers/100-npm.md
@@ -1 +1,10 @@
-# Npm
\ No newline at end of file
+# npm
+
+npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/'>An Absolute Beginner's Guide to Using npm</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2V1UUhBJ62Y'>NPM tutorial for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
+
diff --git a/content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md b/content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md
index b7f86e786..dba71b91a 100644
--- a/content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md
+++ b/content/roadmaps/100-frontend/content/107-package-managers/101-yarn.md
@@ -1 +1,8 @@
-# Yarn
\ No newline at end of file
+# Yarn
+
+Yarn is a software packaging system developed in 2016 by Facebook for Node.js JavaScript runtime environment that provides speed, consistency, stability, and security as an alternative to npm (package manager).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://yarnpkg.com/en/docs/getting-started'>Yarn - Getting Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=g9_6KmiBISk'>Yarn Crash Course</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/107-package-managers/readme.md b/content/roadmaps/100-frontend/content/107-package-managers/readme.md
index 72768f6f4..cf7dcf8a7 100644
--- a/content/roadmaps/100-frontend/content/107-package-managers/readme.md
+++ b/content/roadmaps/100-frontend/content/107-package-managers/readme.md
@@ -1 +1,13 @@
-# Package managers
\ No newline at end of file
+# Package Managers
+
+Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html'>Modern JavaScript for Dinosaurs</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/'>An Absolute Beginner's Guide to Using npm</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=2V1UUhBJ62Y'>NPM tutorial for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://yarnpkg.com/en/docs/getting-started'>Yarn - Getting Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=g9_6KmiBISk'>Yarn Crash Course</BadgeLink>
+
+
diff --git a/content/roadmaps/100-frontend/meta.json b/content/roadmaps/100-frontend/meta.json
index 7d3632579..e885a65db 100644
--- a/content/roadmaps/100-frontend/meta.json
+++ b/content/roadmaps/100-frontend/meta.json
@@ -3,6 +3,7 @@
     "title": "Frontend Developer Roadmap: Learn to become a modern frontend developer",
     "description": "Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.",
     "keywords": [
+      "javascript roadmap 2021",
       "frontend roadmap 2021",
       "frontend developer roadmap 2021",
       "guide to becoming a developer",