Files
developer-roadmap/frontend.html
Kamran Ahmed 279893bfb2 Updates
2022-06-28 11:05:04 +00:00

6 lines
76 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html><head><meta charSet="UTF-8"/><title>Frontend Developer Roadmap: Learn to become a modern frontend developer</title><meta name="description" content="Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development."/><meta name="author" content="Kamran Ahmed"/><meta name="keywords" content="javascript roadmap 2022,frontend roadmap 2022,frontend developer roadmap 2022,guide to becoming a developer,guide to becoming a frontend developer,frontend developer,frontend engineer,frontend skills,frontend development,javascript developer,frontend development skills,frontend development skills test,frontend roadmap,frontend engineer roadmap,frontend developer roadmap,become a frontend developer,frontend developer career path,javascript developer,modern javascript developer,node developer,skills for frontend development,learn frontend development,what is frontend development,frontend developer quiz,frontend developer interview questions"/><meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0"/><meta http-equiv="Content-Language" content="en"/><meta property="og:title" content="Frontend Developer Roadmap: Learn to become a modern frontend developer"/><meta property="og:description" content="Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development."/><meta property="og:image" content="https://roadmap.sh/brand-square.png"/><meta property="og:url" content="https://roadmap.sh"/><meta property="og:type" content="website"/><meta property="article:publisher" content="https://facebook.com/kamranahmedse"/><meta property="og:site_name" content="roadmap.sh"/><meta property="article:author" content="Kamran Ahmed"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@kamranahmedse"/><meta name="twitter:title" content="Frontend Developer Roadmap: Learn to become a modern frontend developer"/><meta name="twitter:description" content="Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development."/><meta name="twitter:image" content="https://roadmap.sh/brand-square.png"/><meta name="twitter:image:alt" content="roadmap.sh"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><link rel="apple-touch-icon" sizes="180x180" href="/manifest/apple-touch-icon.png"/><meta name="msapplication-TileColor" content="#101010"/><meta name="theme-color" content="#848a9a"/><link rel="manifest" href="/manifest/manifest.json"/><link rel="icon" type="image/png" sizes="32x32" href="/manifest/icon32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/manifest/icon16.png"/><link rel="shortcut icon" href="/manifest/favicon.ico" type="image/x-icon"/><link rel="icon" href="/manifest/favicon.ico" type="image/x-icon"/><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://roadmap.sh/frontend"},"headline":"Frontend Developer Roadmap: Learn to become a modern frontend developer","description":"Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.","image":"https://roadmap.sh/roadmaps/frontend.png","author":{"@type":"Person","name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"publisher":{"@type":"Organization","name":"roadmap.sh","logo":{"@type":"ImageObject","url":"https://roadmap.sh/brand-square.png"}}}</script><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-139582634-1"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-139582634-1');
</script><meta name="next-head-count" content="35"/><link rel="preload" href="/_next/static/css/9630938f8579f20e.css" as="style"/><link rel="stylesheet" href="/_next/static/css/9630938f8579f20e.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-378e68e29c265886.js" defer=""></script><script src="/_next/static/chunks/framework-dc33c0b5493501f0.js" defer=""></script><script src="/_next/static/chunks/main-056d531d8af152ad.js" defer=""></script><script src="/_next/static/chunks/pages/_app-981db2c906b1d6be.js" defer=""></script><script src="/_next/static/chunks/680-f2ef73bf59f135ea.js" defer=""></script><script src="/_next/static/chunks/22-14757297dd54265a.js" defer=""></script><script src="/_next/static/chunks/26-eac7646c5923a8cb.js" defer=""></script><script src="/_next/static/chunks/515-79757bf997a2c9cf.js" defer=""></script><script src="/_next/static/chunks/13-b259223214a65539.js" defer=""></script><script src="/_next/static/chunks/994-f74f0e156db145d4.js" defer=""></script><script src="/_next/static/chunks/547-e77cdbe9dac50250.js" defer=""></script><script src="/_next/static/chunks/280-538c9ba362b06141.js" defer=""></script><script src="/_next/static/chunks/714-cfca685af6f03f83.js" defer=""></script><script src="/_next/static/chunks/pages/%5Broadmap%5D-246fd33721cd7b85.js" defer=""></script><script src="/_next/static/ooSnr_WJpF8nzY9n_DSAx/_buildManifest.js" defer=""></script><script src="/_next/static/ooSnr_WJpF8nzY9n_DSAx/_ssgManifest.js" defer=""></script><script src="/_next/static/ooSnr_WJpF8nzY9n_DSAx/_middlewareManifest.js" defer=""></script><style data-styled="" data-styled-version="5.3.3"></style></head><body><div id="__next" data-reactroot=""><style data-emotion="css-global brzcv3">:host,:root{--chakra-ring-inset:var(--chakra-empty,/*!*/ /*!*/);--chakra-ring-offset-width:0px;--chakra-ring-offset-color:#fff;--chakra-ring-color:rgba(66, 153, 225, 0.6);--chakra-ring-offset-shadow:0 0 #0000;--chakra-ring-shadow:0 0 #0000;--chakra-space-x-reverse:0;--chakra-space-y-reverse:0;--chakra-colors-transparent:transparent;--chakra-colors-current:currentColor;--chakra-colors-black:#000000;--chakra-colors-white:#FFFFFF;--chakra-colors-whiteAlpha-50:rgba(255, 255, 255, 0.04);--chakra-colors-whiteAlpha-100:rgba(255, 255, 255, 0.06);--chakra-colors-whiteAlpha-200:rgba(255, 255, 255, 0.08);--chakra-colors-whiteAlpha-300:rgba(255, 255, 255, 0.16);--chakra-colors-whiteAlpha-400:rgba(255, 255, 255, 0.24);--chakra-colors-whiteAlpha-500:rgba(255, 255, 255, 0.36);--chakra-colors-whiteAlpha-600:rgba(255, 255, 255, 0.48);--chakra-colors-whiteAlpha-700:rgba(255, 255, 255, 0.64);--chakra-colors-whiteAlpha-800:rgba(255, 255, 255, 0.80);--chakra-colors-whiteAlpha-900:rgba(255, 255, 255, 0.92);--chakra-colors-blackAlpha-50:rgba(0, 0, 0, 0.04);--chakra-colors-blackAlpha-100:rgba(0, 0, 0, 0.06);--chakra-colors-blackAlpha-200:rgba(0, 0, 0, 0.08);--chakra-colors-blackAlpha-300:rgba(0, 0, 0, 0.16);--chakra-colors-blackAlpha-400:rgba(0, 0, 0, 0.24);--chakra-colors-blackAlpha-500:rgba(0, 0, 0, 0.36);--chakra-colors-blackAlpha-600:rgba(0, 0, 0, 0.48);--chakra-colors-blackAlpha-700:rgba(0, 0, 0, 0.64);--chakra-colors-blackAlpha-800:rgba(0, 0, 0, 0.80);--chakra-colors-blackAlpha-900:rgba(0, 0, 0, 0.92);--chakra-colors-gray-50:#F7FAFC;--chakra-colors-gray-100:#EDF2F7;--chakra-colors-gray-200:#E2E8F0;--chakra-colors-gray-300:#CBD5E0;--chakra-colors-gray-400:#A0AEC0;--chakra-colors-gray-500:#718096;--chakra-colors-gray-600:#4A5568;--chakra-colors-gray-700:#2D3748;--chakra-colors-gray-800:#1A202C;--chakra-colors-gray-900:#171923;--chakra-colors-red-50:#FFF5F5;--chakra-colors-red-100:#FED7D7;--chakra-colors-red-200:#FEB2B2;--chakra-colors-red-300:#FC8181;--chakra-colors-red-400:#F56565;--chakra-colors-red-500:#E53E3E;--chakra-colors-red-600:#C53030;--chakra-colors-red-700:#9B2C2C;--chakra-colors-red-800:#822727;--chakra-colors-red-900:#63171B;--chakra-colors-orange-50:#FFFAF0;--chakra-colors-orange-100:#FEEBC8;--chakra-colors-orange-200:#FBD38D;--chakra-colors-orange-300:#F6AD55;--chakra-colors-orange-400:#ED8936;--chakra-colors-orange-500:#DD6B20;--chakra-colors-orange-600:#C05621;--chakra-colors-orange-700:#9C4221;--chakra-colors-orange-800:#7B341E;--chakra-colors-orange-900:#652B19;--chakra-colors-yellow-50:#FFFFF0;--chakra-colors-yellow-100:#FEFCBF;--chakra-colors-yellow-200:#FAF089;--chakra-colors-yellow-300:#F6E05E;--chakra-colors-yellow-400:#ECC94B;--chakra-colors-yellow-500:#D69E2E;--chakra-colors-yellow-600:#B7791F;--chakra-colors-yellow-700:#975A16;--chakra-colors-yellow-800:#744210;--chakra-colors-yellow-900:#5F370E;--chakra-colors-green-50:#F0FFF4;--chakra-colors-green-100:#C6F6D5;--chakra-colors-green-200:#9AE6B4;--chakra-colors-green-300:#68D391;--chakra-colors-green-400:#48BB78;--chakra-colors-green-500:#38A169;--chakra-colors-green-600:#2F855A;--chakra-colors-green-700:#276749;--chakra-colors-green-800:#22543D;--chakra-colors-green-900:#1C4532;--chakra-colors-teal-50:#E6FFFA;--chakra-colors-teal-100:#B2F5EA;--chakra-colors-teal-200:#81E6D9;--chakra-colors-teal-300:#4FD1C5;--chakra-colors-teal-400:#38B2AC;--chakra-colors-teal-500:#319795;--chakra-colors-teal-600:#2C7A7B;--chakra-colors-teal-700:#285E61;--chakra-colors-teal-800:#234E52;--chakra-colors-teal-900:#1D4044;--chakra-colors-blue-50:#ebf8ff;--chakra-colors-blue-100:#bee3f8;--chakra-colors-blue-200:#90cdf4;--chakra-colors-blue-300:#63b3ed;--chakra-colors-blue-400:#4299e1;--chakra-colors-blue-500:#3182ce;--chakra-colors-blue-600:#2b6cb0;--chakra-colors-blue-700:#2c5282;--chakra-colors-blue-800:#2a4365;--chakra-colors-blue-900:#1A365D;--chakra-colors-cyan-50:#EDFDFD;--chakra-colors-cyan-100:#C4F1F9;--chakra-colors-cyan-200:#9DECF9;--chakra-colors-cyan-300:#76E4F7;--chakra-colors-cyan-400:#0BC5EA;--chakra-colors-cyan-500:#00B5D8;--chakra-colors-cyan-600:#00A3C4;--chakra-colors-cyan-700:#0987A0;--chakra-colors-cyan-800:#086F83;--chakra-colors-cyan-900:#065666;--chakra-colors-purple-50:#FAF5FF;--chakra-colors-purple-100:#E9D8FD;--chakra-colors-purple-200:#D6BCFA;--chakra-colors-purple-300:#B794F4;--chakra-colors-purple-400:#9F7AEA;--chakra-colors-purple-500:#805AD5;--chakra-colors-purple-600:#6B46C1;--chakra-colors-purple-700:#553C9A;--chakra-colors-purple-800:#44337A;--chakra-colors-purple-900:#322659;--chakra-colors-pink-50:#FFF5F7;--chakra-colors-pink-100:#FED7E2;--chakra-colors-pink-200:#FBB6CE;--chakra-colors-pink-300:#F687B3;--chakra-colors-pink-400:#ED64A6;--chakra-colors-pink-500:#D53F8C;--chakra-colors-pink-600:#B83280;--chakra-colors-pink-700:#97266D;--chakra-colors-pink-800:#702459;--chakra-colors-pink-900:#521B41;--chakra-colors-linkedin-50:#E8F4F9;--chakra-colors-linkedin-100:#CFEDFB;--chakra-colors-linkedin-200:#9BDAF3;--chakra-colors-linkedin-300:#68C7EC;--chakra-colors-linkedin-400:#34B3E4;--chakra-colors-linkedin-500:#00A0DC;--chakra-colors-linkedin-600:#008CC9;--chakra-colors-linkedin-700:#0077B5;--chakra-colors-linkedin-800:#005E93;--chakra-colors-linkedin-900:#004471;--chakra-colors-facebook-50:#E8F4F9;--chakra-colors-facebook-100:#D9DEE9;--chakra-colors-facebook-200:#B7C2DA;--chakra-colors-facebook-300:#6482C0;--chakra-colors-facebook-400:#4267B2;--chakra-colors-facebook-500:#385898;--chakra-colors-facebook-600:#314E89;--chakra-colors-facebook-700:#29487D;--chakra-colors-facebook-800:#223B67;--chakra-colors-facebook-900:#1E355B;--chakra-colors-messenger-50:#D0E6FF;--chakra-colors-messenger-100:#B9DAFF;--chakra-colors-messenger-200:#A2CDFF;--chakra-colors-messenger-300:#7AB8FF;--chakra-colors-messenger-400:#2E90FF;--chakra-colors-messenger-500:#0078FF;--chakra-colors-messenger-600:#0063D1;--chakra-colors-messenger-700:#0052AC;--chakra-colors-messenger-800:#003C7E;--chakra-colors-messenger-900:#002C5C;--chakra-colors-whatsapp-50:#dffeec;--chakra-colors-whatsapp-100:#b9f5d0;--chakra-colors-whatsapp-200:#90edb3;--chakra-colors-whatsapp-300:#65e495;--chakra-colors-whatsapp-400:#3cdd78;--chakra-colors-whatsapp-500:#22c35e;--chakra-colors-whatsapp-600:#179848;--chakra-colors-whatsapp-700:#0c6c33;--chakra-colors-whatsapp-800:#01421c;--chakra-colors-whatsapp-900:#001803;--chakra-colors-twitter-50:#E5F4FD;--chakra-colors-twitter-100:#C8E9FB;--chakra-colors-twitter-200:#A8DCFA;--chakra-colors-twitter-300:#83CDF7;--chakra-colors-twitter-400:#57BBF5;--chakra-colors-twitter-500:#1DA1F2;--chakra-colors-twitter-600:#1A94DA;--chakra-colors-twitter-700:#1681BF;--chakra-colors-twitter-800:#136B9E;--chakra-colors-twitter-900:#0D4D71;--chakra-colors-telegram-50:#E3F2F9;--chakra-colors-telegram-100:#C5E4F3;--chakra-colors-telegram-200:#A2D4EC;--chakra-colors-telegram-300:#7AC1E4;--chakra-colors-telegram-400:#47A9DA;--chakra-colors-telegram-500:#0088CC;--chakra-colors-telegram-600:#007AB8;--chakra-colors-telegram-700:#006BA1;--chakra-colors-telegram-800:#005885;--chakra-colors-telegram-900:#003F5E;--chakra-colors-brand-bg:#06020d;--chakra-colors-brand-hero:#06020d;--chakra-colors-brand-footer:#0d041e;--chakra-borders-none:0;--chakra-borders-1px:1px solid;--chakra-borders-2px:2px solid;--chakra-borders-4px:4px solid;--chakra-borders-8px:8px solid;--chakra-fonts-heading:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--chakra-fonts-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--chakra-fonts-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--chakra-fontSizes-xs:0.75rem;--chakra-fontSizes-sm:0.875rem;--chakra-fontSizes-md:1rem;--chakra-fontSizes-lg:1.125rem;--chakra-fontSizes-xl:1.25rem;--chakra-fontSizes-2xl:1.5rem;--chakra-fontSizes-3xl:1.875rem;--chakra-fontSizes-4xl:2.25rem;--chakra-fontSizes-5xl:3rem;--chakra-fontSizes-6xl:3.75rem;--chakra-fontSizes-7xl:4.5rem;--chakra-fontSizes-8xl:6rem;--chakra-fontSizes-9xl:8rem;--chakra-fontWeights-hairline:100;--chakra-fontWeights-thin:200;--chakra-fontWeights-light:300;--chakra-fontWeights-normal:400;--chakra-fontWeights-medium:500;--chakra-fontWeights-semibold:600;--chakra-fontWeights-bold:700;--chakra-fontWeights-extrabold:800;--chakra-fontWeights-black:900;--chakra-letterSpacings-tighter:-0.05em;--chakra-letterSpacings-tight:-0.025em;--chakra-letterSpacings-normal:0;--chakra-letterSpacings-wide:0.025em;--chakra-letterSpacings-wider:0.05em;--chakra-letterSpacings-widest:0.1em;--chakra-lineHeights-3:.75rem;--chakra-lineHeights-4:1rem;--chakra-lineHeights-5:1.25rem;--chakra-lineHeights-6:1.5rem;--chakra-lineHeights-7:1.75rem;--chakra-lineHeights-8:2rem;--chakra-lineHeights-9:2.25rem;--chakra-lineHeights-10:2.5rem;--chakra-lineHeights-normal:normal;--chakra-lineHeights-none:1;--chakra-lineHeights-shorter:1.25;--chakra-lineHeights-short:1.375;--chakra-lineHeights-base:1.5;--chakra-lineHeights-tall:1.625;--chakra-lineHeights-taller:2;--chakra-radii-none:0;--chakra-radii-sm:0.125rem;--chakra-radii-base:0.25rem;--chakra-radii-md:0.375rem;--chakra-radii-lg:0.5rem;--chakra-radii-xl:0.75rem;--chakra-radii-2xl:1rem;--chakra-radii-3xl:1.5rem;--chakra-radii-full:9999px;--chakra-space-1:0.25rem;--chakra-space-2:0.5rem;--chakra-space-3:0.75rem;--chakra-space-4:1rem;--chakra-space-5:1.25rem;--chakra-space-6:1.5rem;--chakra-space-7:1.75rem;--chakra-space-8:2rem;--chakra-space-9:2.25rem;--chakra-space-10:2.5rem;--chakra-space-12:3rem;--chakra-space-14:3.5rem;--chakra-space-16:4rem;--chakra-space-20:5rem;--chakra-space-24:6rem;--chakra-space-28:7rem;--chakra-space-32:8rem;--chakra-space-36:9rem;--chakra-space-40:10rem;--chakra-space-44:11rem;--chakra-space-48:12rem;--chakra-space-52:13rem;--chakra-space-56:14rem;--chakra-space-60:15rem;--chakra-space-64:16rem;--chakra-space-72:18rem;--chakra-space-80:20rem;--chakra-space-96:24rem;--chakra-space-px:1px;--chakra-space-0\.5:0.125rem;--chakra-space-1\.5:0.375rem;--chakra-space-2\.5:0.625rem;--chakra-space-3\.5:0.875rem;--chakra-shadows-xs:0 0 0 1px rgba(0, 0, 0, 0.05);--chakra-shadows-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--chakra-shadows-base:0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);--chakra-shadows-md:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--chakra-shadows-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);--chakra-shadows-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);--chakra-shadows-2xl:0 25px 50px -12px rgba(0, 0, 0, 0.25);--chakra-shadows-outline:0 0 0 3px rgba(66, 153, 225, 0.6);--chakra-shadows-inner:inset 0 2px 4px 0 rgba(0,0,0,0.06);--chakra-shadows-none:none;--chakra-shadows-dark-lg:rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,rgba(0, 0, 0, 0.2) 0px 5px 10px,rgba(0, 0, 0, 0.4) 0px 15px 40px;--chakra-sizes-1:0.25rem;--chakra-sizes-2:0.5rem;--chakra-sizes-3:0.75rem;--chakra-sizes-4:1rem;--chakra-sizes-5:1.25rem;--chakra-sizes-6:1.5rem;--chakra-sizes-7:1.75rem;--chakra-sizes-8:2rem;--chakra-sizes-9:2.25rem;--chakra-sizes-10:2.5rem;--chakra-sizes-12:3rem;--chakra-sizes-14:3.5rem;--chakra-sizes-16:4rem;--chakra-sizes-20:5rem;--chakra-sizes-24:6rem;--chakra-sizes-28:7rem;--chakra-sizes-32:8rem;--chakra-sizes-36:9rem;--chakra-sizes-40:10rem;--chakra-sizes-44:11rem;--chakra-sizes-48:12rem;--chakra-sizes-52:13rem;--chakra-sizes-56:14rem;--chakra-sizes-60:15rem;--chakra-sizes-64:16rem;--chakra-sizes-72:18rem;--chakra-sizes-80:20rem;--chakra-sizes-96:24rem;--chakra-sizes-px:1px;--chakra-sizes-0\.5:0.125rem;--chakra-sizes-1\.5:0.375rem;--chakra-sizes-2\.5:0.625rem;--chakra-sizes-3\.5:0.875rem;--chakra-sizes-max:max-content;--chakra-sizes-min:min-content;--chakra-sizes-full:100%;--chakra-sizes-3xs:14rem;--chakra-sizes-2xs:16rem;--chakra-sizes-xs:20rem;--chakra-sizes-sm:24rem;--chakra-sizes-md:28rem;--chakra-sizes-lg:32rem;--chakra-sizes-xl:36rem;--chakra-sizes-2xl:42rem;--chakra-sizes-3xl:48rem;--chakra-sizes-4xl:56rem;--chakra-sizes-5xl:64rem;--chakra-sizes-6xl:72rem;--chakra-sizes-7xl:80rem;--chakra-sizes-8xl:90rem;--chakra-sizes-container-sm:640px;--chakra-sizes-container-md:768px;--chakra-sizes-container-lg:1024px;--chakra-sizes-container-xl:1280px;--chakra-zIndices-hide:-1;--chakra-zIndices-auto:auto;--chakra-zIndices-base:0;--chakra-zIndices-docked:10;--chakra-zIndices-dropdown:1000;--chakra-zIndices-sticky:1100;--chakra-zIndices-banner:1200;--chakra-zIndices-overlay:1300;--chakra-zIndices-modal:1400;--chakra-zIndices-popover:1500;--chakra-zIndices-skipLink:1600;--chakra-zIndices-toast:1700;--chakra-zIndices-tooltip:1800;--chakra-transition-property-common:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;--chakra-transition-property-colors:background-color,border-color,color,fill,stroke;--chakra-transition-property-dimensions:width,height;--chakra-transition-property-position:left,right,top,bottom;--chakra-transition-property-background:background-color,background-image,background-position;--chakra-transition-easing-ease-in:cubic-bezier(0.4, 0, 1, 1);--chakra-transition-easing-ease-out:cubic-bezier(0, 0, 0.2, 1);--chakra-transition-easing-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--chakra-transition-duration-ultra-fast:50ms;--chakra-transition-duration-faster:100ms;--chakra-transition-duration-fast:150ms;--chakra-transition-duration-normal:200ms;--chakra-transition-duration-slow:300ms;--chakra-transition-duration-slower:400ms;--chakra-transition-duration-ultra-slow:500ms;--chakra-blur-none:0;--chakra-blur-sm:4px;--chakra-blur-base:8px;--chakra-blur-md:12px;--chakra-blur-lg:16px;--chakra-blur-xl:24px;--chakra-blur-2xl:40px;--chakra-blur-3xl:64px;}</style><style data-emotion="css-global 1jqlf9g">html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;}body{position:relative;min-height:100%;font-feature-settings:'kern';}*,*::before,*::after{border-width:0;border-style:solid;box-sizing:border-box;}main{display:block;}hr{border-top-width:1px;box-sizing:content-box;height:0;overflow:visible;}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1em;}a{background-color:transparent;color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;}abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bold;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none!important;}input[type="number"]{-moz-appearance:textfield;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none!important;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:-webkit-box;display:-webkit-list-item;display:-ms-list-itembox;display:list-item;}template{display:none;}[hidden]{display:none!important;}body,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}button{background:transparent;padding:0;}fieldset{margin:0;padding:0;}ol,ul{margin:0;padding:0;}textarea{resize:vertical;}button,[role="button"]{cursor:pointer;}button::-moz-focus-inner{border:0!important;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit;}img,svg,video,canvas,audio,iframe,embed,object{display:block;}img,video{max-width:100%;height:auto;}[data-js-focus-visible] :focus:not([data-focus-visible-added]){outline:none;box-shadow:none;}select::-ms-expand{display:none;}</style><style data-emotion="css-global 1baqkrf">body{font-family:var(--chakra-fonts-body);color:var(--chakra-colors-gray-800);background:var(--chakra-colors-white);transition-property:background-color;transition-duration:var(--chakra-transition-duration-normal);line-height:var(--chakra-lineHeights-base);}*::-webkit-input-placeholder{color:var(--chakra-colors-gray-400);}*::-moz-placeholder{color:var(--chakra-colors-gray-400);}*:-ms-input-placeholder{color:var(--chakra-colors-gray-400);}*::placeholder{color:var(--chakra-colors-gray-400);}*,*::before,::after{border-color:var(--chakra-colors-gray-200);word-wrap:break-word;}</style><style data-emotion="css-global 1v09d1a">.js-focus-visible :focus:not([data-focus-visible-added]){outline:none;box-shadow:none;}svg text tspan{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeSpeed;}code{background:#1e1e3f;color:#9efeff;padding:3px 5px;font-size:14px;border-radius:3px;}svg .clickable-group{cursor:pointer;}svg .clickable-group:hover>[fill="rgb(65,53,214)"]{fill:#232381;stroke:#232381;}svg .clickable-group:hover>[fill="rgb(255,255,0)"]{fill:#d6d700;}svg .clickable-group:hover>[fill="rgb(255,229,153)"]{fill:#f3c950;}svg .clickable-group:hover>[fill="rgb(153,153,153)"]{fill:#646464;}svg .clickable-group:hover>[fill="rgb(255,255,255)"]{fill:#d7d7d7;}svg .done rect{fill:#cbcbcb!important;}svg .done text{-webkit-text-decoration:line-through;text-decoration:line-through;}</style><style data-emotion="css gk6shj">.css-gk6shj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;background:var(--chakra-colors-yellow-200);color:var(--chakra-colors-gray-900);position:-webkit-sticky;position:sticky;top:0px;z-index:999;padding-top:8px;padding-bottom:8px;}.css-gk6shj:hover,.css-gk6shj[data-hover]{-webkit-text-decoration:none;text-decoration:none;background:var(--chakra-colors-yellow-400);}</style><style data-emotion="css n1ed3e">.css-n1ed3e{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;background:var(--chakra-colors-yellow-200);color:var(--chakra-colors-gray-900);position:-webkit-sticky;position:sticky;top:0px;z-index:999;padding-top:8px;padding-bottom:8px;}.css-n1ed3e:hover,.css-n1ed3e[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-n1ed3e:focus,.css-n1ed3e[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-n1ed3e:hover,.css-n1ed3e[data-hover]{-webkit-text-decoration:none;text-decoration:none;background:var(--chakra-colors-yellow-400);}</style><a target="_blank" class="chakra-link css-n1ed3e" href="https://youtube.com/theroadmap?sub_confirmation=1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="height:20px;display:inline-block;margin-right:7px"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0C.488 3.45.029 5.804 0 12c.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0C23.512 20.55 23.971 18.196 24 12c-.029-6.185-.484-8.549-4.385-8.816zM9 16V8l8 3.993L9 16z"></path></svg><style data-emotion="css 17vuvug">.css-17vuvug{font-weight:500;font-size:14px;}</style><span class="chakra-text css-17vuvug"><span class="chakra-text css-0">We now have a YouTube Channel. <style data-emotion="css 13wfqy8">.css-13wfqy8{display:none;}@media screen and (min-width: 30em){.css-13wfqy8{display:inline;}}</style><span class="chakra-text css-13wfqy8">Subscribe for the video content.</span></span></span></a><style data-emotion="css 123acky">.css-123acky{background:var(--chakra-colors-white);min-height:100vh;}</style><div class="css-123acky"><style data-emotion="css sttgv9">.css-sttgv9{background:var(--chakra-colors-gray-900);padding:20px 0;}</style><div class="css-sttgv9"><style data-emotion="css nm5t63">.css-nm5t63{width:100%;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;max-width:var(--chakra-sizes-container-md);-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem;}</style><div class="chakra-container css-nm5t63"><style data-emotion="css 1lekzkb">.css-1lekzkb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}</style><div class="css-1lekzkb"><div class="css-0"><style data-emotion="css 140fodl">.css-140fodl{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:var(--chakra-colors-white);width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;font-size:18px;}.css-140fodl:hover,.css-140fodl[data-hover]{-webkit-text-decoration:none;text-decoration:none;}.css-140fodl:focus,.css-140fodl[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-140fodl" href="/"><svg width="30" height="30" viewBox="0 0 283 283" fill="none" xmlns="http://www.w3.org/2000/svg" style="height:30px;width:30px;margin-right:10px"><path d="M0 39C0 17.46 17.46 0 39 0h205c21.539 0 39 17.46 39 39v205c0 21.539-17.461 39-39 39H39c-21.54 0-39-17.461-39-39V39Z" fill="#000"></path><path d="M121.215 210.72c-1.867.56-4.854 1.12-8.96 1.68-3.92.56-8.027.84-12.32.84-4.107 0-7.84-.28-11.2-.84-3.174-.56-5.88-1.68-8.12-3.36-2.24-1.68-4.014-3.92-5.32-6.72-1.12-2.987-1.68-6.813-1.68-11.48v-84c0-4.293.746-7.933 2.24-10.92 1.68-3.173 4.013-5.973 7-8.4 2.986-2.427 6.626-4.573 10.92-6.44 4.48-2.053 9.24-3.827 14.28-5.32a106.176 106.176 0 0 1 15.68-3.36 95.412 95.412 0 0 1 16.24-1.4c8.96 0 16.053 1.773 21.28 5.32 5.226 3.36 7.84 8.96 7.84 16.8 0 2.613-.374 5.227-1.12 7.84-.747 2.427-1.68 4.667-2.8 6.72-3.92 0-7.934.187-12.04.56-4.107.373-8.12.933-12.04 1.68-3.92.747-7.654 1.587-11.2 2.52-3.36.747-6.254 1.68-8.68 2.8v95.48Zm45.172-22.4c0-7.84 2.426-14.373 7.28-19.6 4.853-5.227 11.48-7.84 19.88-7.84 8.4 0 15.026 2.613 19.88 7.84 4.853 5.227 7.28 11.76 7.28 19.6 0 7.84-2.427 14.373-7.28 19.6-4.854 5.227-11.48 7.84-19.88 7.84-8.4 0-15.027-2.613-19.88-7.84-4.854-5.227-7.28-11.76-7.28-19.6Z" fill="#fff"></path></svg><style data-emotion="css 1youuz0">.css-1youuz0{display:block;}@media screen and (min-width: 30em){.css-1youuz0{display:none;}}@media screen and (min-width: 48em){.css-1youuz0{display:block;}}</style><span class="chakra-text css-1youuz0">roadmap.sh</span></a></div><style data-emotion="css 1w38872">.css-1w38872{display:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;color:var(--chakra-colors-gray-50);font-size:15px;}.css-1w38872>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:15px;margin-inline-start:15px;}@media screen and (min-width: 30em){.css-1w38872{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}@media screen and (min-width: 48em){.css-1w38872{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="chakra-stack css-1w38872"><style data-emotion="css 1qy82gu">.css-1qy82gu{display:inline-block;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;min-width:0px;}</style><div class="chakra-stack__item css-1qy82gu"><style data-emotion="css lstwx6">.css-lstwx6{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;border-bottom-width:0;border-bottom-color:var(--chakra-colors-gray-500);font-weight:500;}.css-lstwx6:hover,.css-lstwx6[data-hover]{-webkit-text-decoration:none;text-decoration:none;border-bottom-color:var(--chakra-colors-white);}.css-lstwx6:focus,.css-lstwx6[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-lstwx6" href="/roadmaps">Roadmaps</a></div><div class="chakra-stack__item css-1qy82gu"><a class="chakra-link css-lstwx6" href="/guides">Guides</a></div><div class="chakra-stack__item css-1qy82gu"><a class="chakra-link css-lstwx6" href="/watch">Videos</a></div><div class="chakra-stack__item css-1qy82gu"><a class="chakra-link css-lstwx6" href="/thanks">Thanks</a></div><div class="chakra-stack__item css-1qy82gu"><style data-emotion="css t88ydv">.css-t88ydv{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;margin-left:10px;background-image:linear-gradient(to left, var(--chakra-colors-yellow-700), var(--chakra-colors-red-600));padding:7px 10px;border-radius:4px;font-weight:500;}.css-t88ydv:hover,.css-t88ydv[data-hover]{-webkit-text-decoration:none;text-decoration:none;background-image:linear-gradient(to left, var(--chakra-colors-red-800), var(--chakra-colors-yellow-700));}.css-t88ydv:focus,.css-t88ydv[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-t88ydv" href="/signup">Subscribe</a></div></div><style data-emotion="css lpr56g">.css-lpr56g{display:block;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:auto;line-height:1.2;border-radius:5px;font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:auto;min-width:var(--chakra-sizes-10);font-size:var(--chakra-fontSizes-md);-webkit-padding-start:var(--chakra-space-4);padding-inline-start:var(--chakra-space-4);-webkit-padding-end:var(--chakra-space-4);padding-inline-end:var(--chakra-space-4);background:var(--chakra-colors-transparent);padding:0px;color:var(--chakra-colors-white);cursor:pointer;}.css-lpr56g:focus,.css-lpr56g[data-focus]{background:var(--chakra-colors-transparent);}.css-lpr56g[disabled],.css-lpr56g[aria-disabled=true],.css-lpr56g[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-lpr56g:hover,.css-lpr56g[data-hover]{background:var(--chakra-colors-transparent);}.css-lpr56g:active,.css-lpr56g[data-active]{background:var(--chakra-colors-transparent);}@media screen and (min-width: 30em){.css-lpr56g{display:none;}}@media screen and (min-width: 48em){.css-lpr56g{display:none;}}</style><button type="button" class="chakra-button css-lpr56g" aria-label="Menu"><style data-emotion="css 17elikm">.css-17elikm{width:25px;height:25px;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--chakra-colors-white);vertical-align:middle;}</style><svg viewBox="0 0 24 24" focusable="false" class="chakra-icon css-17elikm" aria-hidden="true"><path fill="currentColor" d="M 3 5 A 1.0001 1.0001 0 1 0 3 7 L 21 7 A 1.0001 1.0001 0 1 0 21 5 L 3 5 z M 3 11 A 1.0001 1.0001 0 1 0 3 13 L 21 13 A 1.0001 1.0001 0 1 0 21 11 L 3 11 z M 3 17 A 1.0001 1.0001 0 1 0 3 19 L 21 19 A 1.0001 1.0001 0 1 0 21 17 L 3 17 z"></path></svg></button></div></div></div><style data-emotion="css flpniz">.css-flpniz{margin-bottom:60px;}</style><div class="css-flpniz"><style data-emotion="css gs1c7k">.css-gs1c7k{padding-top:25px;padding-bottom:20px;border-bottom-width:1px;margin-bottom:30px;}@media screen and (min-width: 30em){.css-gs1c7k{padding-top:20px;padding-bottom:15px;}}@media screen and (min-width: 48em){.css-gs1c7k{padding-top:45px;padding-bottom:30px;}}</style><div class="css-gs1c7k"><style data-emotion="css ms16h5">.css-ms16h5{width:100%;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;max-width:var(--chakra-sizes-container-md);-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem;position:relative;}</style><div class="chakra-container css-ms16h5"><style data-emotion="css rbknhh">.css-rbknhh{display:block;color:var(--chakra-colors-red-700);font-size:var(--chakra-fontSizes-sm);margin-bottom:10px;font-weight:500;}.css-rbknhh:hover,.css-rbknhh[data-hover]{-webkit-text-decoration:none;text-decoration:none;color:var(--chakra-colors-blue-700);}.css-rbknhh:hover .new-badge,.css-rbknhh[data-hover] .new-badge{background:var(--chakra-colors-blue-700);}</style><style data-emotion="css 8rku7f">.css-8rku7f{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;display:block;color:var(--chakra-colors-red-700);font-size:var(--chakra-fontSizes-sm);margin-bottom:10px;font-weight:500;}.css-8rku7f:hover,.css-8rku7f[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-8rku7f:focus,.css-8rku7f[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-8rku7f:hover,.css-8rku7f[data-hover]{-webkit-text-decoration:none;text-decoration:none;color:var(--chakra-colors-blue-700);}.css-8rku7f:hover .new-badge,.css-8rku7f[data-hover] .new-badge{background:var(--chakra-colors-blue-700);}</style><a target="_blank" class="chakra-link chakra-text css-8rku7f" href="https://youtube.com/theroadmap?sub_confirmation=1"><style data-emotion="css tte0u6">.css-tte0u6{display:inline-block;white-space:nowrap;vertical-align:middle;-webkit-padding-start:var(--chakra-space-1);padding-inline-start:var(--chakra-space-1);-webkit-padding-end:var(--chakra-space-1);padding-inline-end:var(--chakra-space-1);text-transform:uppercase;font-size:var(--chakra-fontSizes-xs);border-radius:var(--chakra-radii-sm);font-weight:var(--chakra-fontWeights-bold);background:var(--chakra-colors-red-500);color:var(--chakra-colors-white);-webkit-transition:all 300ms;transition:all 300ms;margin-right:7px;}</style><span class="chakra-badge new-badge css-tte0u6">New</span><style data-emotion="css fl3k9t">.css-fl3k9t{-webkit-text-decoration:underline;text-decoration:underline;display:none;}@media screen and (min-width: 30em){.css-fl3k9t{display:inline;}}</style><span class="chakra-text css-fl3k9t">Roadmap topics to be covered on our YouTube Channel</span><style data-emotion="css 22e5fy">.css-22e5fy{-webkit-text-decoration:underline;text-decoration:underline;display:inline;}@media screen and (min-width: 30em){.css-22e5fy{display:none;}}</style><span class="chakra-text css-22e5fy">Topic videos being made on YouTube</span><style data-emotion="css o5uqvq">.css-o5uqvq{margin-left:5px;}</style><span class="chakra-text css-o5uqvq">»</span></a><style data-emotion="css icqtwo">.css-icqtwo{font-family:var(--chakra-fonts-heading);font-weight:700;font-size:28px;line-height:1.33;color:var(--chakra-colors-black);margin-bottom:2px;}@media screen and (min-width: 30em){.css-icqtwo{font-size:33px;margin-bottom:2px;}}@media screen and (min-width: 48em){.css-icqtwo{font-size:40px;line-height:1.2;margin-bottom:5px;}}</style><h1 class="chakra-heading css-icqtwo">Frontend Developer</h1><style data-emotion="css 7zsnf3">.css-7zsnf3{font-size:13px;}@media screen and (min-width: 30em){.css-7zsnf3{font-size:14px;}}@media screen and (min-width: 48em){.css-7zsnf3{font-size:15px;}}</style><p class="chakra-text css-7zsnf3">Step by step guide to becoming a modern frontend developer in 2022</p><style data-emotion="css 16rgc74">.css-16rgc74{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-top:20px;}</style><div class="css-16rgc74"><style data-emotion="css x9juev">.css-x9juev{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}.css-x9juev>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;}</style><div class="chakra-stack css-x9juev"><style data-emotion="css d3hcrr">.css-d3hcrr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:auto;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-6);min-width:var(--chakra-sizes-6);font-size:var(--chakra-fontSizes-xs);-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;background:var(--chakra-colors-teal-500);color:var(--chakra-colors-white);padding-top:14px;padding-bottom:14px;}.css-d3hcrr:focus,.css-d3hcrr[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-d3hcrr[disabled],.css-d3hcrr[aria-disabled=true],.css-d3hcrr[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-d3hcrr:hover,.css-d3hcrr[data-hover]{-webkit-text-decoration:none;text-decoration:none;}.css-d3hcrr:active,.css-d3hcrr[data-active]{background:var(--chakra-colors-teal-700);}@media screen and (min-width: 30em){.css-d3hcrr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><style data-emotion="css 1rjxa1y">.css-1rjxa1y{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:auto;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-6);min-width:var(--chakra-sizes-6);font-size:var(--chakra-fontSizes-xs);-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;background:var(--chakra-colors-teal-500);color:var(--chakra-colors-white);padding-top:14px;padding-bottom:14px;}.css-1rjxa1y:hover,.css-1rjxa1y[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-1rjxa1y:focus,.css-1rjxa1y[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-1rjxa1y:focus,.css-1rjxa1y[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-1rjxa1y[disabled],.css-1rjxa1y[aria-disabled=true],.css-1rjxa1y[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-1rjxa1y:hover,.css-1rjxa1y[data-hover]{-webkit-text-decoration:none;text-decoration:none;}.css-1rjxa1y:active,.css-1rjxa1y[data-active]{background:var(--chakra-colors-teal-700);}@media screen and (min-width: 30em){.css-1rjxa1y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><a class="chakra-link chakra-button css-1rjxa1y" href="/roadmaps"><style data-emotion="css y2a47q">.css-y2a47q{display:none;margin-left:5px;}@media screen and (min-width: 30em){.css-y2a47q{display:inline;}}</style><span class="chakra-text css-y2a47q">All Roadmaps</span></a><style data-emotion="css 1chpn3">.css-1chpn3{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:auto;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-6);min-width:var(--chakra-sizes-6);font-size:var(--chakra-fontSizes-xs);-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;background:var(--chakra-colors-yellow-400);color:var(--chakra-colors-black);padding-top:14px;padding-bottom:14px;}.css-1chpn3:focus,.css-1chpn3[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-1chpn3[disabled],.css-1chpn3[aria-disabled=true],.css-1chpn3[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-1chpn3:hover,.css-1chpn3[data-hover]{-webkit-text-decoration:none;text-decoration:none;}.css-1chpn3:active,.css-1chpn3[data-active]{background:var(--chakra-colors-yellow-600);}</style><style data-emotion="css f8pa1y">.css-f8pa1y{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:auto;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-6);min-width:var(--chakra-sizes-6);font-size:var(--chakra-fontSizes-xs);-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;background:var(--chakra-colors-yellow-400);color:var(--chakra-colors-black);padding-top:14px;padding-bottom:14px;}.css-f8pa1y:hover,.css-f8pa1y[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-f8pa1y:focus,.css-f8pa1y[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-f8pa1y:focus,.css-f8pa1y[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-f8pa1y[disabled],.css-f8pa1y[aria-disabled=true],.css-f8pa1y[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-f8pa1y:hover,.css-f8pa1y[data-hover]{-webkit-text-decoration:none;text-decoration:none;}.css-f8pa1y:active,.css-f8pa1y[data-active]{background:var(--chakra-colors-yellow-600);}</style><a target="_blank" class="chakra-link chakra-button css-f8pa1y" href="/pdfs/frontend.pdf"><style data-emotion="css 1wh2kri">.css-1wh2kri{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;}</style><span class="chakra-button__icon css-1wh2kri"><style data-emotion="css onkibi">.css-onkibi{width:1em;height:1em;display:inline-block;line-height:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:currentColor;vertical-align:middle;}</style><svg viewBox="0 0 14 14" focusable="false" class="chakra-icon css-onkibi" aria-hidden="true"><path fill="currentColor" d="M11.2857,6.05714 L10.08571,4.85714 L7.85714,7.14786 L7.85714,1 L6.14286,1 L6.14286,7.14786 L3.91429,4.85714 L2.71429,6.05714 L7,10.42857 L11.2857,6.05714 Z M1,11.2857 L1,13 L13,13 L13,11.2857 L1,11.2857 Z"></path></svg></span>Download</a><a class="chakra-link chakra-button css-f8pa1y" href="/signup"><span class="chakra-button__icon css-1wh2kri"><svg viewBox="0 0 24 24" focusable="false" class="chakra-icon css-onkibi" aria-hidden="true"><path fill="currentColor" d="M12,.5A11.634,11.634,0,0,0,.262,12,11.634,11.634,0,0,0,12,23.5a11.836,11.836,0,0,0,6.624-2,1.25,1.25,0,1,0-1.393-2.076A9.34,9.34,0,0,1,12,21a9.132,9.132,0,0,1-9.238-9A9.132,9.132,0,0,1,12,3a9.132,9.132,0,0,1,9.238,9v.891a1.943,1.943,0,0,1-3.884,0V12A5.355,5.355,0,1,0,12,17.261a5.376,5.376,0,0,0,3.861-1.634,4.438,4.438,0,0,0,7.877-2.736V12A11.634,11.634,0,0,0,12,.5Zm0,14.261A2.763,2.763,0,1,1,14.854,12,2.812,2.812,0,0,1,12,14.761Z"></path></svg></span>Subscribe</a></div></div><style data-emotion="css 7i5vdo">.css-7i5vdo{margin-top:30px;margin-bottom:-37px;font-weight:500;font-size:14px;background:var(--chakra-colors-white);border-width:1px;padding:5px 7px;border-radius:3px;}@media screen and (min-width: 30em){.css-7i5vdo{margin-bottom:-32px;}}@media screen and (min-width: 48em){.css-7i5vdo{margin-bottom:-47px;}}</style><p class="chakra-text css-7i5vdo"><style data-emotion="css 1a9x8xi">.css-1a9x8xi{display:inline-block;white-space:nowrap;vertical-align:middle;-webkit-padding-start:var(--chakra-space-1);padding-inline-start:var(--chakra-space-1);-webkit-padding-end:var(--chakra-space-1);padding-inline-end:var(--chakra-space-1);text-transform:uppercase;font-size:var(--chakra-fontSizes-xs);border-radius:var(--chakra-radii-sm);font-weight:var(--chakra-fontWeights-bold);background:var(--chakra-colors-yellow-100);color:var(--chakra-colors-yellow-800);position:relative;top:-1px;margin-right:6px;}</style><span class="chakra-badge css-1a9x8xi">New</span>Resources are here, try clicking any nodes.</p></div></div><style data-emotion="css hg2x4">.css-hg2x4{width:100%;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;max-width:var(--chakra-sizes-container-lg);-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem;position:relative;min-height:970px;}@media screen and (min-width: 30em){.css-hg2x4{min-height:970px;}}@media screen and (min-width: 48em){.css-hg2x4{min-height:2100px;}}@media screen and (min-width: 62em){.css-hg2x4{min-height:2800px;}}@media screen and (min-width: 80em){.css-hg2x4{min-height:2800px;}}</style><div class="chakra-container css-hg2x4"><style data-emotion="css 1cvhlmh">.css-1cvhlmh{width:100%;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;max-width:var(--chakra-sizes-container-md);-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem;position:relative;margin-top:60px;text-align:center;}</style><div class="chakra-container css-1cvhlmh"><style data-emotion="css 1x8tpk6 animation-b7n1on">.css-1x8tpk6{display:inline-block;border-color:currentColor;border-style:solid;border-radius:99999px;border-width:7px;border-bottom-color:var(--chakra-colors-gray-200);border-left-color:var(--chakra-colors-gray-200);-webkit-animation:animation-b7n1on 0.65s linear infinite;animation:animation-b7n1on 0.65s linear infinite;width:var(--spinner-size);height:var(--spinner-size);--spinner-size:3rem;color:var(--chakra-colors-gray-500);}@-webkit-keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes animation-b7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}</style><div class="chakra-spinner css-1x8tpk6"><style data-emotion="css f8n5zr">.css-f8n5zr{border:0px;clip:rect(0px, 0px, 0px, 0px);height:1px;width:1px;margin:-1px;padding:0px;overflow:hidden;white-space:nowrap;position:absolute;}</style><span class="css-f8n5zr">Loading...</span></div></div><div></div></div></div><style data-emotion="css zeuzl6">.css-zeuzl6{background:var(--chakra-colors-white);border-top-width:1px;padding-top:45px;padding-bottom:60px;text-align:center;}@media screen and (min-width: 30em){.css-zeuzl6{padding-top:45px;padding-bottom:60px;}}@media screen and (min-width: 48em){.css-zeuzl6{padding-top:70px;padding-bottom:90px;}}</style><div class="css-zeuzl6"><div class="chakra-container css-nm5t63"><style data-emotion="css 482acf">.css-482acf{font-family:var(--chakra-fonts-heading);font-weight:var(--chakra-fontWeights-bold);font-size:25px;line-height:1.33;margin-bottom:10px;}@media screen and (min-width: 30em){.css-482acf{font-size:25px;margin-bottom:10px;}}@media screen and (min-width: 48em){.css-482acf{font-size:35px;line-height:1.2;margin-bottom:20px;}}</style><h2 class="chakra-heading css-482acf">Open Source</h2><style data-emotion="css tmji1h">.css-tmji1h{line-height:26px;font-size:15px;margin-bottom:20px;}@media screen and (min-width: 30em){.css-tmji1h{font-size:15px;}}@media screen and (min-width: 48em){.css-tmji1h{font-size:16px;}}</style><p class="chakra-text css-tmji1h">The project is OpenSource, <style data-emotion="css 1om4i6h">.css-1om4i6h{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;border-bottom-width:1px;font-weight:600;}.css-1om4i6h:hover,.css-1om4i6h[data-hover]{-webkit-text-decoration:none;text-decoration:none;}.css-1om4i6h:focus,.css-1om4i6h[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a target="_blank" class="chakra-link css-1om4i6h" href="https://github.com/search?o=desc&amp;q=stars%3A%3E100000&amp;s=stars&amp;type=Repositories">7th most starred project on GitHub</a> and is visited by hundreds of thousands of developers every month.</p><iframe src="https://ghbtns.com/github-btn.html?user=kamranahmedse&amp;repo=developer-roadmap&amp;type=star&amp;count=true&amp;size=large" frameBorder="0" scrolling="0" width="170" height="30" style="margin:auto;margin-bottom:30px" title="GitHub"></iframe><style data-emotion="css mz2q9v">.css-mz2q9v{line-height:25px;font-size:15px;margin-bottom:15px;}@media screen and (min-width: 30em){.css-mz2q9v{line-height:25px;font-size:15px;}}@media screen and (min-width: 48em){.css-mz2q9v{line-height:26px;font-size:16px;}}</style><p class="chakra-text css-mz2q9v">A considerable amount of my time is spent doing unpaid community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to produce more open-source and free educational material consumed by hundreds of thousands of developers every month.</p><div class="css-0"><iframe src="https://ghbtns.com/github-btn.html?user=kamranahmedse&amp;type=sponsor&amp;size=large" frameBorder="0" scrolling="0" width="260" height="30" title="GitHub" style="margin:auto"></iframe></div></div></div><style data-emotion="css llwly4">.css-llwly4{border-top-width:1px;padding-top:40px;padding-bottom:40px;text-align:left;background:var(--chakra-colors-brand-footer);}@media screen and (min-width: 30em){.css-llwly4{padding-top:40px;padding-bottom:45px;}}@media screen and (min-width: 48em){.css-llwly4{padding-top:70px;padding-bottom:80px;}}</style><div class="css-llwly4"><div class="chakra-container css-nm5t63"><style data-emotion="css 1bjthgu">.css-1bjthgu{font-family:var(--chakra-fonts-heading);font-weight:var(--chakra-fontWeights-bold);font-size:25px;line-height:1.33;color:var(--chakra-colors-gray-100);margin-bottom:5px;}@media screen and (min-width: 30em){.css-1bjthgu{font-size:25px;margin-bottom:5px;}}@media screen and (min-width: 48em){.css-1bjthgu{font-size:35px;line-height:1.2;margin-bottom:15px;}}</style><h2 class="chakra-heading css-1bjthgu">Stay Informed</h2><style data-emotion="css 1ne3i1y">.css-1ne3i1y{color:var(--chakra-colors-gray-400);line-height:26px;font-size:15px;margin-bottom:20px;}@media screen and (min-width: 30em){.css-1ne3i1y{font-size:15px;}}@media screen and (min-width: 48em){.css-1ne3i1y{font-size:16px;}}</style><p class="chakra-text css-1ne3i1y">Subscribe yourself to get updates, new guides, videos and roadmaps in your inbox.</p><style data-emotion="css u91i2o">.css-u91i2o{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}@media screen and (min-width: 30em){.css-u91i2o{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}@media screen and (min-width: 48em){.css-u91i2o{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}</style><div class="css-u91i2o"><style data-emotion="css bjg6se">.css-bjg6se{margin-right:0px;margin-bottom:15px;}@media screen and (min-width: 30em){.css-bjg6se{margin-right:0px;margin-bottom:15px;}}@media screen and (min-width: 48em){.css-bjg6se{margin-right:20px;margin-bottom:0px;}}</style><div class="css-bjg6se"><style data-emotion="css 6cpjh7">.css-6cpjh7{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:var(--chakra-sizes-full);line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-10);min-width:var(--chakra-sizes-10);font-size:14px;-webkit-padding-start:var(--chakra-space-4);padding-inline-start:var(--chakra-space-4);-webkit-padding-end:var(--chakra-space-4);padding-inline-end:var(--chakra-space-4);border:1px solid;border-color:currentColor;color:var(--chakra-colors-green-600);background:var(--chakra-colors-transparent);border-width:2px;}@media screen and (min-width: 30em){.css-6cpjh7{width:auto;font-size:14px;}}.css-6cpjh7:focus,.css-6cpjh7[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-6cpjh7[disabled],.css-6cpjh7[aria-disabled=true],.css-6cpjh7[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-6cpjh7:hover,.css-6cpjh7[data-hover]{color:var(--chakra-colors-green-200);-webkit-text-decoration:none;text-decoration:none;}@media screen and (min-width: 48em){.css-6cpjh7{font-size:16px;}}.css-6cpjh7:active,.css-6cpjh7[data-active]{background:var(--chakra-colors-green-100);}</style><style data-emotion="css 198h90r">.css-198h90r{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:var(--chakra-sizes-full);line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-10);min-width:var(--chakra-sizes-10);font-size:14px;-webkit-padding-start:var(--chakra-space-4);padding-inline-start:var(--chakra-space-4);-webkit-padding-end:var(--chakra-space-4);padding-inline-end:var(--chakra-space-4);border:1px solid;border-color:currentColor;color:var(--chakra-colors-green-600);background:var(--chakra-colors-transparent);border-width:2px;}.css-198h90r:hover,.css-198h90r[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-198h90r:focus,.css-198h90r[data-focus]{box-shadow:var(--chakra-shadows-outline);}@media screen and (min-width: 30em){.css-198h90r{width:auto;font-size:14px;}}.css-198h90r:focus,.css-198h90r[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-198h90r[disabled],.css-198h90r[aria-disabled=true],.css-198h90r[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-198h90r:hover,.css-198h90r[data-hover]{color:var(--chakra-colors-green-200);-webkit-text-decoration:none;text-decoration:none;}@media screen and (min-width: 48em){.css-198h90r{font-size:16px;}}.css-198h90r:active,.css-198h90r[data-active]{background:var(--chakra-colors-green-100);}</style><a class="chakra-link chakra-button css-198h90r" href="/signup">Subscribe to Updates</a><style data-emotion="css ilygfh">.css-ilygfh{color:var(--chakra-colors-gray-500);font-size:13px;margin-top:5px;}</style><p class="chakra-text css-ilygfh">Free subscription for updates</p></div><div class="css-0"><style data-emotion="css 1o5lodd">.css-1o5lodd{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:var(--chakra-sizes-full);line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-10);min-width:var(--chakra-sizes-10);font-size:14px;-webkit-padding-start:var(--chakra-space-4);padding-inline-start:var(--chakra-space-4);-webkit-padding-end:var(--chakra-space-4);padding-inline-end:var(--chakra-space-4);background:var(--chakra-colors-yellow-400);color:var(--chakra-colors-black);}@media screen and (min-width: 30em){.css-1o5lodd{width:auto;font-size:14px;}}.css-1o5lodd:focus,.css-1o5lodd[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-1o5lodd[disabled],.css-1o5lodd[aria-disabled=true],.css-1o5lodd[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-1o5lodd:hover,.css-1o5lodd[data-hover]{-webkit-text-decoration:none;text-decoration:none;background:var(--chakra-colors-yellow-500);}@media screen and (min-width: 48em){.css-1o5lodd{font-size:16px;}}.css-1o5lodd:active,.css-1o5lodd[data-active]{background:var(--chakra-colors-yellow-600);}</style><style data-emotion="css 1matfw4">.css-1matfw4{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;width:var(--chakra-sizes-full);line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-10);min-width:var(--chakra-sizes-10);font-size:14px;-webkit-padding-start:var(--chakra-space-4);padding-inline-start:var(--chakra-space-4);-webkit-padding-end:var(--chakra-space-4);padding-inline-end:var(--chakra-space-4);background:var(--chakra-colors-yellow-400);color:var(--chakra-colors-black);}.css-1matfw4:hover,.css-1matfw4[data-hover]{-webkit-text-decoration:underline;text-decoration:underline;}.css-1matfw4:focus,.css-1matfw4[data-focus]{box-shadow:var(--chakra-shadows-outline);}@media screen and (min-width: 30em){.css-1matfw4{width:auto;font-size:14px;}}.css-1matfw4:focus,.css-1matfw4[data-focus]{box-shadow:var(--chakra-shadows-outline);}.css-1matfw4[disabled],.css-1matfw4[aria-disabled=true],.css-1matfw4[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-1matfw4:hover,.css-1matfw4[data-hover]{-webkit-text-decoration:none;text-decoration:none;background:var(--chakra-colors-yellow-500);}@media screen and (min-width: 48em){.css-1matfw4{font-size:16px;}}.css-1matfw4:active,.css-1matfw4[data-active]{background:var(--chakra-colors-yellow-600);}</style><a target="_blank" class="chakra-link chakra-button css-1matfw4" href="https://github.com/sponsors/kamranahmedse">Updates &amp; Paid Content</a><p class="chakra-text css-ilygfh">Support the project by paying as little as<!-- --> <style data-emotion="css 35ezg3">.css-35ezg3{font-weight:600;}</style><span class="chakra-text css-35ezg3">5$ per month</span></p></div></div></div></div><style data-emotion="css t1u31f">.css-t1u31f{background:var(--chakra-colors-brand-hero);padding:25px 0;}@media screen and (min-width: 30em){.css-t1u31f{padding:25px 0;}}@media screen and (min-width: 48em){.css-t1u31f{padding:40px 0;}}</style><div class="css-t1u31f"><div class="chakra-container css-nm5t63"><style data-emotion="css 1cvpnh4">.css-1cvpnh4{display:none;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;color:var(--chakra-colors-gray-400);font-weight:600;}.css-1cvpnh4>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:30px;margin-inline-start:30px;}@media screen and (min-width: 30em){.css-1cvpnh4{display:none;}}@media screen and (min-width: 48em){.css-1cvpnh4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="chakra-stack css-1cvpnh4"><style data-emotion="css 1807wg8">.css-1807wg8{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;}.css-1807wg8:hover,.css-1807wg8[data-hover]{color:var(--chakra-colors-white);}.css-1807wg8:focus,.css-1807wg8[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-1807wg8" href="/roadmaps">Roadmaps</a><a class="chakra-link css-1807wg8" href="/guides">Guides</a><a class="chakra-link css-1807wg8" href="/watch">Videos</a><a class="chakra-link css-1807wg8" href="/about">About</a><a target="_blank" class="chakra-link css-1807wg8" href="https://youtube.com/theroadmap?sub_confirmation=1">YouTube</a></div><style data-emotion="css 1ehdw1x">.css-1ehdw1x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;color:var(--chakra-colors-gray-400);font-weight:600;}.css-1ehdw1x>*:not(style)~*:not(style){margin-top:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;}@media screen and (min-width: 30em){.css-1ehdw1x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}@media screen and (min-width: 48em){.css-1ehdw1x{display:none;}}</style><div class="chakra-stack css-1ehdw1x"><style data-emotion="css vsan9l">.css-vsan9l{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;padding-top:7px;padding-bottom:7px;border-bottom-width:1px;border-bottom-color:var(--chakra-colors-gray-800);}.css-vsan9l:hover,.css-vsan9l[data-hover]{color:var(--chakra-colors-white);}.css-vsan9l:focus,.css-vsan9l[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-vsan9l" href="/roadmaps">Roadmaps</a><a class="chakra-link css-vsan9l" href="/guides">Guides</a><a class="chakra-link css-vsan9l" href="/watch">Videos</a><a class="chakra-link css-vsan9l" href="/thanks">Thanks</a><a class="chakra-link css-vsan9l" href="/about">About</a><style data-emotion="css ex4by1">.css-ex4by1{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;padding-top:7px;padding-bottom:7px;}.css-ex4by1:hover,.css-ex4by1[data-hover]{color:var(--chakra-colors-white);}.css-ex4by1:focus,.css-ex4by1[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a target="_blank" class="chakra-link css-ex4by1" href="https://youtube.com/theroadmap?sub_confirmation=1">YouTube</a></div><style data-emotion="css opw3zq">.css-opw3zq{margin-top:40px;margin-bottom:40px;max-width:500px;}@media screen and (min-width: 30em){.css-opw3zq{margin-top:40px;}}@media screen and (min-width: 48em){.css-opw3zq{margin-top:50px;}}</style><div class="css-opw3zq"><style data-emotion="css 1r78w6">.css-1r78w6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--chakra-colors-gray-400);}</style><div spacing="0" class="css-1r78w6"><style data-emotion="css 1cdtrts">.css-1cdtrts{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:inherit;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;}.css-1cdtrts:hover,.css-1cdtrts[data-hover]{-webkit-text-decoration:none;text-decoration:none;color:var(--chakra-colors-white);}.css-1cdtrts:focus,.css-1cdtrts[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-1cdtrts" href="/"><style data-emotion="css 1l24g6b">.css-1l24g6b{height:25px;width:25px;margin-right:6px;}</style><img alt="" src="/logo.svg" class="chakra-image css-1l24g6b"/>roadmap.sh</a><style data-emotion="css qh3ecy">.css-qh3ecy{-webkit-margin-start:7px;margin-inline-start:7px;-webkit-margin-end:7px;margin-inline-end:7px;}</style><span class="chakra-text css-qh3ecy">by</span><style data-emotion="css 1svda2y">.css-1svda2y{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:var(--chakra-colors-white);background:var(--chakra-colors-blue-500);-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px;padding-top:2px;padding-bottom:2px;border-radius:4px;font-weight:600;font-size:13px;}.css-1svda2y:hover,.css-1svda2y[data-hover]{-webkit-text-decoration:none;text-decoration:none;background:var(--chakra-colors-blue-600);}.css-1svda2y:focus,.css-1svda2y[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a target="_blank" class="chakra-link css-1svda2y" href="https://twitter.com/kamranahmedse">@kamranahmedse</a></div><style data-emotion="css gp4krv">.css-gp4krv{margin-top:15px;margin-bottom:15px;font-size:14px;color:var(--chakra-colors-gray-500);}</style><p class="chakra-text css-gp4krv">Community created roadmaps, articles, resources and journeys to help you choose your path and grow in your career.</p><style data-emotion="css 1vf9ext">.css-1vf9ext{font-size:14px;color:var(--chakra-colors-gray-500);}</style><p class="chakra-text css-1vf9ext"><style data-emotion="css lvyu5j">.css-lvyu5j{margin-right:10px;}</style><span class="chakra-text css-lvyu5j">© roadmap.sh</span>·<style data-emotion="css q9uhdd">.css-q9uhdd{transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-fast);transition-timing-function:var(--chakra-transition-easing-ease-out);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;outline:2px solid transparent;outline-offset:2px;color:var(--chakra-colors-gray-400);-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;}.css-q9uhdd:hover,.css-q9uhdd[data-hover]{-webkit-text-decoration:none;text-decoration:none;color:var(--chakra-colors-white);}.css-q9uhdd:focus,.css-q9uhdd[data-focus]{box-shadow:var(--chakra-shadows-outline);}</style><a class="chakra-link css-q9uhdd" href="/about">FAQs</a>·<a class="chakra-link css-q9uhdd" href="/terms">Terms</a>·<a class="chakra-link css-q9uhdd" href="/privacy">Privacy</a></p></div></div></div></div><span></span></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"roadmap":{"seo":{"title":"Frontend Developer Roadmap: Learn to become a modern frontend developer","description":"Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.","keywords":["javascript roadmap 2022","frontend roadmap 2022","frontend developer roadmap 2022","guide to becoming a developer","guide to becoming a frontend developer","frontend developer","frontend engineer","frontend skills","frontend development","javascript developer","frontend development skills","frontend development skills test","frontend roadmap","frontend engineer roadmap","frontend developer roadmap","become a frontend developer","frontend developer career path","javascript developer","modern javascript developer","node developer","skills for frontend development","learn frontend development","what is frontend development","frontend developer quiz","frontend developer interview questions"]},"title":"Frontend Developer","description":"Step by step guide to becoming a modern frontend developer in 2022","featuredTitle":"Frontend","featuredDescription":"Step by step guide to becoming a frontend developer in 2022","author":{"name":"Kamran Ahmed","url":"https://twitter.com/kamranahmedse"},"featured":true,"imageUrl":"/roadmaps/frontend.png","jsonUrl":"/project/frontend.json","resourcesPath":"/roadmaps/100-frontend/resources.md","pdfUrl":"/pdfs/frontend.pdf","contentPathsFilePath":"/roadmaps/100-frontend/content-paths.json","id":"frontend","metaPath":"/roadmaps/100-frontend/meta.json","isUpcoming":false}},"__N_SSG":true},"page":"/[roadmap]","query":{"roadmap":"frontend"},"buildId":"ooSnr_WJpF8nzY9n_DSAx","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>