info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-02-24 19:42:51 +01:00
Code Issues Releases Wiki Activity

Update banner and new video link

Browse Source
This commit is contained in:
Kamran Ahmed 2020-08-02 22:10:42 +04:00
parent 90004e69a6
commit 013522148a
3 changed files with 87 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/sponsor-banner/index.js
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
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
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>