github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update banner and new video link

Browse Source
pull/1657/head
Kamran Ahmed 4 years ago
parent 90004e69a6
commit 013522148a
3 changed files with 87 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      components/sponsor-banner/index.js
  2. 16
      components/sponsor-banner/style.js
  3. 120
      pages/watch.js

30
components/sponsor-banner/index.js
Unescape View File

@ -1,26 +1,24 @@
import React from 'react'; import React from 'react';
import { BannerWrap, CloseSponsor, EmojiWrap, SponsorLogo } from './style'; import { BannerWrap, CloseSponsor, SponsorLogo } from './style';
export function SponsorBanner({ onCloseBanner = () => null }){ export function SponsorBanner({ onCloseBanner = () => null }) {
return ( return (
<div className='row'> <div className='row'>
<div className='col p-0'> <div className='col p-0'>
<BannerWrap <BannerWrap
href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`} href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`}
target='_blank' target='_blank'
className='alert alert-info' className='alert alert-info'
> >
<SponsorLogo src='/sponsors/youtube.svg' /> <SponsorLogo src='/sponsors/youtube.svg' />
We now have a youtube channel We now have a youtube channel. <span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
<EmojiWrap src={'/sponsors/heart-eyes.svg'} />
<span className='d-none d-sm-inline-block'>Subscribe for the video content.</span> <CloseSponsor
onClick={(e) => {
<CloseSponsor e.preventDefault();
onClick={(e) => { onCloseBanner();
e.preventDefault(); }}
onCloseBanner(); className='close'>&times;</CloseSponsor>
}}
className='close'>&times;</CloseSponsor>
</BannerWrap> </BannerWrap>
</div> </div>
</div> </div>

16
components/sponsor-banner/style.js
Unescape View File

@ -2,8 +2,11 @@ import styled from 'styled-components';
export const BannerWrap = styled.a` export const BannerWrap = styled.a`
margin-bottom: 0; margin-bottom: 0;
background: #101010; //background: #101010;
color: white; //color: white;
background: #ffe0b2;
color: #d8362a;
font-weight: 600;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
padding: 10px 15px; padding: 10px 15px;
@ -12,7 +15,8 @@ export const BannerWrap = styled.a`
transition: all 200ms; transition: all 200ms;
&:hover { &:hover {
color: white; background: #ffd698;
color: #bd2015;
text-decoration: none; text-decoration: none;
} }
`; `;
@ -32,14 +36,14 @@ export const EmojiWrap = styled.img`
`; `;
export const CloseSponsor = styled.span` export const CloseSponsor = styled.span`
color: white;
text-shadow: none; text-shadow: none;
margin-right: 15px; margin-right: 15px;
position: relative; position: relative;
top: -2px; top: -2px;
color: #101010;
&:hover { &:hover {
opacity: 1; opacity: 1;
color: white; color: #101010;
} }
`; `;

120
pages/watch.js
Unescape View File

@ -14,77 +14,83 @@ const WatchList = () => (
<DefaultLayout> <DefaultLayout>
<Helmet title='Watch' desciption='List of videos published on our youtube channel so far' /> <Helmet title='Watch' desciption='List of videos published on our youtube channel so far' />
<SiteNav /> <SiteNav />
<div className="container"> <div className='container'>
<PageHeader <PageHeader
title={'Watch'} title={'Watch'}
subtitle={'List of videos published on our youtube channel so far'}> subtitle={'List of videos published on our youtube channel so far'}>
<BadgesList className="mt-4"> <BadgesList className='mt-4'>
<BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target="_blank"> <BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target='_blank'>
<SecondaryBadge> <SecondaryBadge>
<FontAwesomeIcon icon={faYoutube}/> <FontAwesomeIcon icon={faYoutube} />
YouTube Channel YouTube Channel
</SecondaryBadge> </SecondaryBadge>
</BadgeLink> </BadgeLink>
<BadgeLink href="/signup"> <BadgeLink href='/signup'>
<PrimaryBadge> <PrimaryBadge>
<FontAwesomeIcon icon={faEnvelope}/> <FontAwesomeIcon icon={faEnvelope} />
Send me Updates Send me Updates
</PrimaryBadge> </PrimaryBadge>
</BadgeLink> </BadgeLink>
</BadgesList> </BadgesList>
</PageHeader> </PageHeader>
</div> </div>
<div className="pt-5 pb-5 bg-light border-top"> <div className='pt-5 pb-5 bg-light border-top'>
<div className="container"> <div className='container'>
<div className="row"> <div className='row'>
<RowBlock <RowBlock
openExternal openExternal
title={ 'Scaling an Application' } title={'JavaScript Fetch API'}
subtitle='Learn how to scale an unscalable application and how to tackle the issues in production.' subtitle="Learn how to make API calls with vanilla JavaScript using browser's builtin Fetch API."
url='https://www.youtube.com/watch?v=a2rcgzludDU' url='https://www.youtube.com/watch?v=a2rcgzludDU'
/> />
<RowBlock <RowBlock
openExternal openExternal
title={ 'All about Promises in JavaScript' } title={'Scaling an Application'}
subtitle='Everything you need to know to about writing asynchronous code with Promises.' subtitle='Learn how to scale an unscalable application and how to tackle the issues in production.'
url='https://www.youtube.com/watch?v=BvrkobaCVVE' url='https://www.youtube.com/watch?v=a2rcgzludDU'
/> />
<RowBlock <RowBlock
openExternal openExternal
title={ 'GitHub Actions' } title={'All about Promises in JavaScript'}
subtitle='Learn what is CI/CD and how to automate your workflows with GitHub actions.' subtitle='Everything you need to know to about writing asynchronous code with Promises.'
url='https://www.youtube.com/watch?v=nyKZTKQS_EQ' url='https://www.youtube.com/watch?v=BvrkobaCVVE'
/> />
<RowBlock <RowBlock
openExternal openExternal
title={ 'Dependency Injection' } title={'GitHub Actions'}
subtitle='Learn how to write testable and maintainable code with Dependency Injection.' subtitle='Learn what is CI/CD and how to automate your workflows with GitHub actions.'
url='https://www.youtube.com/watch?v=0yc2UANSDiw' url='https://www.youtube.com/watch?v=nyKZTKQS_EQ'
/> />
<RowBlock <RowBlock
openExternal openExternal
title={ 'CSS Variables' } title={'Dependency Injection'}
subtitle='Learn how to write maintainable CSS using CSS Variables with a simple project based lesson.' subtitle='Learn how to write testable and maintainable code with Dependency Injection.'
url='https://www.youtube.com/watch?v=lgaxU7CRmxU' url='https://www.youtube.com/watch?v=0yc2UANSDiw'
/> />
<RowBlock <RowBlock
openExternal openExternal
title={ 'All about DOM' } title={'CSS Variables'}
subtitle='Learn and understand the differences between the DOM, Shadow DOM and the Virtual DOM.' subtitle='Learn how to write maintainable CSS using CSS Variables with a simple project based lesson.'
url='https://www.youtube.com/watch?v=7Tok22qxPzQ' url='https://www.youtube.com/watch?v=lgaxU7CRmxU'
/> />
<RowBlock <RowBlock
openExternal openExternal
title={ 'Creating a React App' } title={'All about DOM'}
subtitle='Learn how to build a react application with this project based video series.' subtitle='Learn and understand the differences between the DOM, Shadow DOM and the Virtual DOM.'
url='https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu' url='https://www.youtube.com/watch?v=7Tok22qxPzQ'
/> />
<RowBlock <RowBlock
openExternal openExternal
title={ 'Arrays and Objects in JavaScript' } title={'Creating a React App'}
subtitle='Learn how to manipulate arrays and objects in JavaScript with built-in JavaScript methods.' subtitle='Learn how to build a react application with this project based video series.'
url='https://www.youtube.com/watch?v=n3NKGsM3iEw' url='https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu'
/> />
<RowBlock
openExternal
title={'Arrays and Objects in JavaScript'}
subtitle='Learn how to manipulate arrays and objects in JavaScript with built-in JavaScript methods.'
url='https://www.youtube.com/watch?v=n3NKGsM3iEw'
/>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save