mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-02-24 11:33:09 +01:00
Update banner and new video link
This commit is contained in:
Kamran Ahmed
parent
90004e69a6
commit
013522148a
@ -1,26 +1,24 @@
|
||||
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 (
|
||||
<div className='row'>
|
||||
<div className='col p-0'>
|
||||
<BannerWrap
|
||||
href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`}
|
||||
target='_blank'
|
||||
className='alert alert-info'
|
||||
href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`}
|
||||
target='_blank'
|
||||
className='alert alert-info'
|
||||
>
|
||||
<SponsorLogo src='/sponsors/youtube.svg' />
|
||||
We now have a youtube channel
|
||||
<EmojiWrap src={'/sponsors/heart-eyes.svg'} />
|
||||
<span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
|
||||
|
||||
<CloseSponsor
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onCloseBanner();
|
||||
}}
|
||||
className='close'>×</CloseSponsor>
|
||||
<SponsorLogo src='/sponsors/youtube.svg' />
|
||||
We now have a youtube channel. <span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
|
||||
|
||||
<CloseSponsor
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onCloseBanner();
|
||||
}}
|
||||
className='close'>×</CloseSponsor>
|
||||
</BannerWrap>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,8 +2,11 @@ import styled from 'styled-components';
|
||||
|
||||
export const BannerWrap = styled.a`
|
||||
margin-bottom: 0;
|
||||
background: #101010;
|
||||
color: white;
|
||||
//background: #101010;
|
||||
//color: white;
|
||||
background: #ffe0b2;
|
||||
color: #d8362a;
|
||||
font-weight: 600;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 10px 15px;
|
||||
@ -12,7 +15,8 @@ export const BannerWrap = styled.a`
|
||||
transition: all 200ms;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background: #ffd698;
|
||||
color: #bd2015;
|
||||
text-decoration: none;
|
||||
}
|
||||
`;
|
||||
@ -32,14 +36,14 @@ export const EmojiWrap = styled.img`
|
||||
`;
|
||||
|
||||
export const CloseSponsor = styled.span`
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
color: #101010;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: white;
|
||||
color: #101010;
|
||||
}
|
||||
`;
|
||||
`;
|
||||
|
||||
120
pages/watch.js
120
pages/watch.js
@ -14,77 +14,83 @@ const WatchList = () => (
|
||||
<DefaultLayout>
|
||||
<Helmet title='Watch' desciption='List of videos published on our youtube channel so far' />
|
||||
<SiteNav />
|
||||
<div className="container">
|
||||
<div className='container'>
|
||||
<PageHeader
|
||||
title={'Watch'}
|
||||
subtitle={'List of videos published on our youtube channel so far'}>
|
||||
<BadgesList className="mt-4">
|
||||
<BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target="_blank">
|
||||
<BadgesList className='mt-4'>
|
||||
<BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target='_blank'>
|
||||
<SecondaryBadge>
|
||||
<FontAwesomeIcon icon={faYoutube}/>
|
||||
<FontAwesomeIcon icon={faYoutube} />
|
||||
YouTube Channel
|
||||
</SecondaryBadge>
|
||||
</BadgeLink>
|
||||
<BadgeLink href="/signup">
|
||||
<BadgeLink href='/signup'>
|
||||
<PrimaryBadge>
|
||||
<FontAwesomeIcon icon={faEnvelope}/>
|
||||
<FontAwesomeIcon icon={faEnvelope} />
|
||||
Send me Updates
|
||||
</PrimaryBadge>
|
||||
</BadgeLink>
|
||||
</BadgesList>
|
||||
</PageHeader>
|
||||
</div>
|
||||
<div className="pt-5 pb-5 bg-light border-top">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={ 'Scaling an Application' }
|
||||
subtitle='Learn how to scale an unscalable application and how to tackle the issues in production.'
|
||||
url='https://www.youtube.com/watch?v=a2rcgzludDU'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={ 'All about Promises in JavaScript' }
|
||||
subtitle='Everything you need to know to about writing asynchronous code with Promises.'
|
||||
url='https://www.youtube.com/watch?v=BvrkobaCVVE'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={ 'GitHub Actions' }
|
||||
subtitle='Learn what is CI/CD and how to automate your workflows with GitHub actions.'
|
||||
url='https://www.youtube.com/watch?v=nyKZTKQS_EQ'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={ 'Dependency Injection' }
|
||||
subtitle='Learn how to write testable and maintainable code with Dependency Injection.'
|
||||
url='https://www.youtube.com/watch?v=0yc2UANSDiw'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={ 'CSS Variables' }
|
||||
subtitle='Learn how to write maintainable CSS using CSS Variables with a simple project based lesson.'
|
||||
url='https://www.youtube.com/watch?v=lgaxU7CRmxU'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={ 'All about DOM' }
|
||||
subtitle='Learn and understand the differences between the DOM, Shadow DOM and the Virtual DOM.'
|
||||
url='https://www.youtube.com/watch?v=7Tok22qxPzQ'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={ 'Creating a React App' }
|
||||
subtitle='Learn how to build a react application with this project based video series.'
|
||||
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 className='pt-5 pb-5 bg-light border-top'>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={'JavaScript Fetch API'}
|
||||
subtitle="Learn how to make API calls with vanilla JavaScript using browser's builtin Fetch API."
|
||||
url='https://www.youtube.com/watch?v=a2rcgzludDU'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={'Scaling an Application'}
|
||||
subtitle='Learn how to scale an unscalable application and how to tackle the issues in production.'
|
||||
url='https://www.youtube.com/watch?v=a2rcgzludDU'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={'All about Promises in JavaScript'}
|
||||
subtitle='Everything you need to know to about writing asynchronous code with Promises.'
|
||||
url='https://www.youtube.com/watch?v=BvrkobaCVVE'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={'GitHub Actions'}
|
||||
subtitle='Learn what is CI/CD and how to automate your workflows with GitHub actions.'
|
||||
url='https://www.youtube.com/watch?v=nyKZTKQS_EQ'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={'Dependency Injection'}
|
||||
subtitle='Learn how to write testable and maintainable code with Dependency Injection.'
|
||||
url='https://www.youtube.com/watch?v=0yc2UANSDiw'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={'CSS Variables'}
|
||||
subtitle='Learn how to write maintainable CSS using CSS Variables with a simple project based lesson.'
|
||||
url='https://www.youtube.com/watch?v=lgaxU7CRmxU'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={'All about DOM'}
|
||||
subtitle='Learn and understand the differences between the DOM, Shadow DOM and the Virtual DOM.'
|
||||
url='https://www.youtube.com/watch?v=7Tok22qxPzQ'
|
||||
/>
|
||||
<RowBlock
|
||||
openExternal
|
||||
title={'Creating a React App'}
|
||||
subtitle='Learn how to build a react application with this project based video series.'
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user