Add resources setup

pull/1331/head
Kamran Ahmed 5 years ago
parent cf648924cf
commit d73e08f8f6
  1. 9
      components/link/badge-link.js
  2. 2
      components/md-renderer/mdx-components/index.js
  3. 2
      components/roadmap-header/index.js
  4. 9
      content/roadmaps/1-frontend/resources.md

@ -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>
);
}

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

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

@ -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. 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? * What is HTTP, how it evolved and where is it now?
* How do the browsers work? Engines behind different browsers * How do the browsers work? Engines behind different browsers
* What is DNS? How a website is found on the internet? * What is DNS? How a website is found on the internet?
* What's in a domain name? What is an IP Address? * What's in a domain name? What is an IP Address?
* What is Web Hosting? * What is Web Hosting?
## Learn HTML
HTML helps you build the pages

Loading…
Cancel
Save