Add frontend resources

components/roadmap-header/index.js

@@ -43,15 +43,17 @@ const RoadmapHeader = ({ roadmap, page = 'landscape' }) => (
     </BadgesList>
 
     <MenuItems className="border-bottom">
-      <Link href={ `${roadmap.url}` } passHref>
-        <MenuItemLink className={ classNames({ active: page === 'landscape', }) }>Landscape</MenuItemLink>
-      </Link>
-      <Link href={ `${roadmap.url}/resources` } passHref>
-        <MenuItemLink className={ classNames({ active: page === 'resources', }) }>Resources</MenuItemLink>
-      </Link>
-      {/*<Link href={ `${roadmap.url}/resources` } passHref>*/}
-      {/*  <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>*/}
-      {/*</Link>*/}
+      <div className={ classNames({ 'd-none': roadmap.title.toLowerCase() !== 'frontend developer' })}>
+        <Link href={ `${roadmap.url}` } passHref>
+          <MenuItemLink className={ classNames({ active: page === 'landscape', }) }>Landscape</MenuItemLink>
+        </Link>
+        <Link href={ `${roadmap.url}/resources` } passHref>
+          <MenuItemLink className={ classNames({ active: page === 'resources', }) }>Follow the Path</MenuItemLink>
+        </Link>
+        {/*<Link href={ `${roadmap.url}/resources` } passHref>*/}
+        {/*  <MenuItemLink className={ classNames({ active: false, }) }>Project Ideas</MenuItemLink>*/}
+        {/*</Link>*/}
+      </div>
     </MenuItems>
 
   </Header>

components/roadmap-header/style.js

@@ -28,7 +28,6 @@ export const MenuItemLink = styled.a`
   color: rgb(102, 102, 102);
   font-size: 14px;
   font-weight: 400;
-  text-transform: capitalize;
   &.active, &.active:hover {
     color: #2d2d2d;
     

content/roadmaps/1-frontend/resources.md

@@ -2,7 +2,7 @@
   This page is in progress. Please check back later or <a href='/signup'>subscribe</a> to get notified. Also, feel free to contribute by suggesting the resources in <strong>the issues</strong>; we will see what we can add.
 </div>
 
-## Become a Frontend Developer
+# Become a Frontend Developer
 Before I go ahead and list down the resources, please know that the roadmap and the list below is exhaustive and you don't need to know it all from the get go. For frontend development, all you need to get started with is learn some basic HTML, CSS and JavaScript and start working on projects; everything else you will learn along the way. 
 
 ## Internet and how it works?
@@ -34,8 +34,43 @@ Please know that I have put multiple links for each resource. While you may pick
 * <BadgeLink badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element'>HTML elements reference</BadgeLink> 
 
 ## Style your pages with CSS
-With the help of HTML, you create structure for your pages.
+With the help of HTML, you create structure for your pages. CSS allows you to style your pages and make them pretty. If you take the analogy of human body, the skeleton would be the HTML, skin would be the CSS and muscles that help us move would be JavaScript - we will learn more about JavaScript in the coming sections.
 
+* <BadgeLink badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools – CSS Tutorial</BadgeLink>
+* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=Wm6CUkswsNw'>Build An HTML5 Website With A Responsive Layout</BadgeLink>
+* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/JJSoEo8JSnc?t=46'>Flexbox CSS In 20 Minutes</BadgeLink>
+
+## Basics of JavaScript
+JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. In this section, you will learn the basics of JavaScript.
+
+* <BadgeLink badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools – JavaScript Tutorial</BadgeLink>
+* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c?t=2'>JavaScript Crash Course for Beginners</BadgeLink>
+* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/P7t13SGytRk?t=22'>Build a Netflix Landing Page Clone with HTML, CSS & JS</BadgeLink>
+
+## Version Control Systems and Git
+
+Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control ssytems allow you to get rid of this issue.
+
+In this section, you will learn what version control systems are and understand how to use Git which is the de facto VCS.  
+
+* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=zbKdDsNNOhg'>Version Control System Introduction</BadgeLink>
+* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=SWYqp7iY_Tc'>Git & GitHub Crash Course For Beginners</BadgeLink>
+* <BadgeLink variant='primary' badgeText='Watch' href='https://youtu.be/Y9XZQO1n_7c?t=21'>Learn Git in 20 Minutes</BadgeLink>
+
+Now that you know what git is go ahead and create an account on [GitHub](https://github.com) and push everything that you do from now on to GitHub so that you can get the practice and get it reviewed from the other people in the community.
+
+## Modern JavaScript
+
+In this section you will learn how to use package managers and get started with the "modern JavaScript".
+
+* <BadgeLink badgeText='Read' href='https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70'>Modern JavaScript for Dinosaurs (Don't worry if you don't understand some parts of it)</BadgeLink>
+* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=8Rmj5UY5mJk'>What is NPM and how to use it</BadgeLink>
+* <BadgeLink variant='primary' badgeText='Watch' href='https://www.youtube.com/watch?v=jHDhaSSKmB0'>NPM Crash Course</BadgeLink>
+
+<br />
+<br />
+<br />
 <br />
 <br />
 <br />