Add resources setup

components/link/badge-link.js

@@ -0,0 +1,9 @@
+export function BadgeLink({ target='_blank', variant ='primary', badgeText, href, children }) {
+  return (
+    <p className='mb-0'>
+      <a href={href} target={ target }>
+        <span style={{ position: 'relative', top: '-2px'}} className={`badge badge-${variant}`}>{badgeText}</span> { children }
+      </a>
+    </p>
+  );
+}

components/md-renderer/mdx-components/index.js

@@ -6,6 +6,7 @@ import { Table } from './table';
 import { IFrame } from './iframe';
 import { Img } from './img';
 import EnrichedLink from './a';
+import { BadgeLink } from '../../link/badge-link';
 
 const MdxComponents = {
   p: P,
@@ -16,6 +17,7 @@ const MdxComponents = {
   table: Table,
   iframe: IFrame,
   img: Img,
+  BadgeLink: BadgeLink
 };
 
-export default MdxComponents;
+export default MdxComponents;

components/roadmap-header/index.js

@@ -43,7 +43,6 @@ const RoadmapHeader = ({ roadmap, page = 'landscape' }) => (
     </BadgesList>
 
     <MenuItems className="border-bottom">
-      <div className='d-none'>
       <Link href={ `${roadmap.url}` } passHref>
         <MenuItemLink className={ classNames({ active: page === 'landscape', }) }>Landscape</MenuItemLink>
       </Link>
@@ -53,7 +52,6 @@ const RoadmapHeader = ({ roadmap, page = 'landscape' }) => (
       {/*<Link href={ `${roadmap.url}/resources` } passHref>*/}
       {/*  <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>*/}
       {/*</Link>*/}
-      </div>
     </MenuItems>
 
   </Header>

content/roadmaps/1-frontend/resources.md

@@ -5,12 +5,13 @@ Before I go ahead and list down the resources, please know that the roadmap and
 
 Get the basic understanding of internet, browsers, networks and other relevant knowledge. 
 
-* [How the internet works in 5 minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) 👀
+* <BadgeLink badgeText='Read' href='/guides/what-is-internet'>What is Internet?</BadgeLink>
-* [What is the Internet](https://www.youtube.com/watch?v=Dxcc6ycZ73M)
+* <BadgeLink variant='success' badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the internet works in 5 minutes</BadgeLink>
-* [The Internet: IP Addresses & DNS](https://www.youtube.com/watch?v=5o8CwafCxnU)
-* [The Internet: Packets, Routing & Reliability](https://www.youtube.com/watch?v=AYdF7b3nMto)
 * What is HTTP, how it evolved and where is it now?
 * How do the browsers work? Engines behind different browsers
 * What is DNS? How a website is found on the internet?
 * What's in a domain name? What is an IP Address?
 * What is Web Hosting?
+
+## Learn HTML
+HTML helps you build the pages