Web Components detail page and resources (#1587)

* Web Components detail page and resources

Web Components detail page and resources

* Update content/roadmaps/100-frontend/content/113-web-components/readme.md

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

content/roadmaps/100-frontend/content/113-web-components/readme.md

@@ -1 +1,7 @@
-# Web components
+# Web Components
+
+Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Web_Components'>Web Components | MDN</BadgeLink>
+<BadgeLink badgeText='Video' colorScheme='purple' href='https://www.youtube.com/watch?v=PCWaFLy3VUo'>Web Components Crash Course</BadgeLink>