Add roadmap summary for frontend

components/detailed-roadmap/index.js

@@ -1,8 +1,21 @@
 import { useState } from 'react';
 import classNames from 'classnames';
-import { PageHeader, RoadmapMeta, ShareRoadmap, Sidebar, Summary, SummaryContainer, MobileNavHeader, SidebarButton, MobileSidebar, MobileSidebarWrap } from './style';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebookSquare, faTwitterSquare, faRedditSquare, faGithubSquare } from '@fortawesome/free-brands-svg-icons'
+import {
+  PageHeader,
+  RoadmapMeta,
+  ShareRoadmap,
+  Sidebar,
+  Summary,
+  SummaryContainer,
+  MobileNavHeader,
+  SidebarButton,
+  MobileSidebar,
+  MobileSidebarWrap,
+  PageTitle,
+  PageDetail
+} from './style';
 import { faBars } from '@fortawesome/free-solid-svg-icons'
 import { getFacebookShareUrl } from 'lib/url';
 import { ShareIcon } from 'components/share-icon';
@@ -96,11 +109,12 @@ const DetailedRoadmap = ({ roadmap }) => {
         <Sidebar className="sidebar d-none d-md-block">
           { roadmapPages }
         </Sidebar>
-        <div>
+        <PageDetail>
+          <PageTitle>{ currentPage.title }</PageTitle>
           <MdRenderer>
             <RoadmapContent />
           </MdRenderer>
-        </div>
+        </PageDetail>
       </Summary>
     </SummaryContainer>
   )

components/detailed-roadmap/style.js

@@ -70,6 +70,15 @@ export const SidebarButton = styled.button`
   }
 `;
 
+export const PageDetail = styled.div`
+  padding: 25px 0 100px;
+`;
+
+export const PageTitle = styled.h1`
+  font-size: 40px;
+  font-weight: 700;
+`;
+
 export const Sidebar = styled.div`
   border-left: 1px solid #efefef;
   padding-bottom: 150px;

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

@@ -36,7 +36,7 @@ const H1 = styled.h1`
   position: relative;
   font-size: 42px;
   font-weight: 700;
-  margin: 30px 0 8px;
+  margin: 32px 0 10px !important;
   
   &:hover ${HeaderLink} {
     display: flex;
@@ -44,7 +44,7 @@ const H1 = styled.h1`
 `;
 
 const H2 = styled(H1).attrs({ as: 'h2' })`
-  font-size: 36px;
+  font-size: 32px;
 `;
 
 const H3 = styled(H1).attrs({ as: 'h3' })`

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

@@ -4,8 +4,8 @@ const P = styled.p`
   color: inherit;
   font-size: 16px;
   font-weight: 400;
-  line-height: 27px;
+  line-height: 26px;
-  margin: 16px 0;
+  margin: 0 0 12px;
   
   img + em { 
     text-align: center;
@@ -17,4 +17,4 @@ const P = styled.p`
   } 
 `;
 
-export default P;
+export default P;

storage/roadmaps/1-frontend/landscape/0-Summary.md

@@ -1 +1,24 @@
-![](/static/roadmaps/frontend.png)
+#### What is a Frontend Developer?
+A frontend developer is someone who works on the side of the websites that the user interacts with i.e. front or the client side of the website. Whenever you visit a website, everything that you see is mainly developed by the frontend developers. 
+
+They work with designers or UX teams to convert their mockups or wireframes to the actual website that the users can interact with. Also they work with [backend developers](/backend) who work with database and servers to get the data from and to display on the website.
+
+#### Key Components of a Website
+If we talk about the frontend, all the websites are mainly built with three key technologies – **HTML**, **CSS** and **JavaScript**. If you know just these three, you can start building websites and be employable. 
+
+Before we proceed, let me give you a brief overview of how **HTML**, **CSS** and **JavaScript** are used on the website. **HTML** provides the structure to a website i.e. all the text, headings, paragraphs, images etc that you see on the website, they have been created with HTML. HTML provides you just the structure, you need to put another layer on top of it to make the website pretty - this next layer is CSS. **CSS** helps make your websites pretty - the colors, backgrounds, font size, borders, shadows etc are controlled using CSS. And finally, the third layer is **JavaScript** which helps make the website interactive e.g. controlling the actions like showing a popup, switching slider images upon click etc is all controlled by JavaScript. 
+
+To understand it better, let me provide the analogy of a human body, the skeleton provides structure to our bodies so it can be equivalent to the HTML, the skin which hides the structure of our bodies and beautifies is like CSS and the muscles which help us perform different actions can be JavaScript.
+
+#### Common Job Titles
+If you know frontend development, there are jobs with different titles that you can apply to. Here is the list of different job titles with almost same responsibilities
+
+* Frontend Developer / Engineer
+* JavaScript Developer
+* JavaScript Engineer
+* HTML / CSS Developer
+* UI Developer
+* Web Developer
+* FullStack Developer
+
+Having Web Developer or FullStack developer in the title would normally mean that you need to have some backend skills as well. Most of the small or service based companies require you to have backend and some UI designing skills as well so it is better to look at the job description also once you have shortlisted the jobs to apply to.