Skip to content

Instantly share code, notes, and snippets.

@gokulkrishh

gokulkrishh/frontend-developer-roadmap.html

Created February 24, 2023 08:34
Show Gist options
  • Save gokulkrishh/722b7b5789fc9dbcaae3512edd7eb08c to your computer and use it in GitHub Desktop.
Save gokulkrishh/722b7b5789fc9dbcaae3512edd7eb08c to your computer and use it in GitHub Desktop.
Download ZIP
A personalised frontend developer road based on my 10 years experience as frontend developer.
Raw
frontend-developer-roadmap.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.min.js"></script><script>(r => {
setTimeout(r);
})(() => {
const {
markmap,
mm
} = window;
const toolbar = new markmap.Toolbar();
toolbar.attach(mm);
const el = toolbar.render();
el.setAttribute('style', 'position:absolute;bottom:20px;right:20px');
document.body.append(el);
})</script><script>((getMarkmap, getOptions, root, jsonOptions) => {
const markmap = getMarkmap();
window.mm = markmap.Markmap.create('svg#mindmap', (getOptions || markmap.deriveOptions)(jsonOptions), root);
})(() => window.markmap,null,{"type":"heading","depth":0,"payload":{"lines":[1,2]},"content":"Frontend Developer Roadmap","children":[{"type":"heading","depth":1,"payload":{"lines":[3,4]},"content":"Code Editor","children":[{"type":"list_item","depth":2,"payload":{"lines":[5,6]},"content":"<a href=\"https://code.visualstudio.com\">Visual Studio Code</a>"},{"type":"list_item","depth":2,"payload":{"lines":[6,7]},"content":"Recommended Extenstions","children":[{"type":"list_item","depth":3,"payload":{"lines":[7,8]},"content":"Prettier"},{"type":"list_item","depth":3,"payload":{"lines":[8,9]},"content":"Live Server"}]}]},{"type":"heading","depth":1,"payload":{"lines":[10,11]},"content":"HTML","children":[{"type":"list_item","depth":2,"payload":{"lines":[12,13]},"content":"Basic Syntax &amp; Comments"},{"type":"list_item","depth":2,"payload":{"lines":[13,14]},"content":"HTML Elements"},{"type":"list_item","depth":2,"payload":{"lines":[14,15]},"content":"HTML Attributes (Eg: id, class, data-*)"},{"type":"list_item","depth":2,"payload":{"lines":[15,16]},"content":"Semantic HTML"}]},{"type":"heading","depth":1,"payload":{"lines":[17,18]},"content":"CSS","children":[{"type":"list_item","depth":2,"payload":{"lines":[19,20]},"content":"Basic Syntax &amp; Comments"},{"type":"list_item","depth":2,"payload":{"lines":[20,21]},"content":"Type of Stylesheets"},{"type":"list_item","depth":2,"payload":{"lines":[21,22]},"content":"CSS Selectors"},{"type":"list_item","depth":2,"payload":{"lines":[22,23]},"content":"Colors &amp; Types"},{"type":"list_item","depth":2,"payload":{"lines":[23,24]},"content":"Box Model"},{"type":"list_item","depth":2,"payload":{"lines":[24,25]},"content":"CSS Specificity"},{"type":"list_item","depth":2,"payload":{"lines":[25,26]},"content":"Display Properties"},{"type":"list_item","depth":2,"payload":{"lines":[26,27]},"content":"Flexbox"},{"type":"list_item","depth":2,"payload":{"lines":[27,28]},"content":"CSS Grid"},{"type":"list_item","depth":2,"payload":{"lines":[28,29]},"content":"Position Properties"},{"type":"list_item","depth":2,"payload":{"lines":[29,30]},"content":"Float"},{"type":"list_item","depth":2,"payload":{"lines":[30,31]},"content":"Fonts"},{"type":"list_item","depth":2,"payload":{"lines":[31,32]},"content":"CSS Units (Eg: px, em, rem etc)"},{"type":"list_item","depth":2,"payload":{"lines":[32,33]},"content":"Stacking Context &amp; Z-Index"},{"type":"list_item","depth":2,"payload":{"lines":[33,34]},"content":"CSS Variables"},{"type":"list_item","depth":2,"payload":{"lines":[34,35]},"content":"Transitions"},{"type":"list_item","depth":2,"payload":{"lines":[35,36]},"content":"Animations"},{"type":"list_item","depth":2,"payload":{"lines":[36,37]},"content":"CSS Frameworks","children":[{"type":"list_item","depth":3,"payload":{"lines":[37,38]},"content":"Tailwind"},{"type":"list_item","depth":3,"payload":{"lines":[38,39]},"content":"Bootstrap"}]}]},{"type":"heading","depth":1,"payload":{"lines":[40,41]},"content":"Javascript","children":[{"type":"list_item","depth":2,"payload":{"lines":[42,43]},"content":"Basic Syntax &amp; Comments"},{"type":"list_item","depth":2,"payload":{"lines":[43,44]},"content":"Variables"},{"type":"list_item","depth":2,"payload":{"lines":[44,45]},"content":"Data Types"},{"type":"list_item","depth":2,"payload":{"lines":[45,46]},"content":"Pass by Value &amp; References"},{"type":"list_item","depth":2,"payload":{"lines":[46,47]},"content":"Falsy Values"},{"type":"list_item","depth":2,"payload":{"lines":[47,48]},"content":"Statments (Eg: If, Switch etc,)"},{"type":"list_item","depth":2,"payload":{"lines":[48,49]},"content":"Loops (Eg: For, For Each, For In, While, Do while)"},{"type":"list_item","depth":2,"payload":{"lines":[49,50]},"content":"Functions","children":[{"type":"list_item","depth":3,"payload":{"lines":[50,51]},"content":"Argument Object"},{"type":"list_item","depth":3,"payload":{"lines":[51,52]},"content":"Function Parameters &amp; Arguments"},{"type":"list_item","depth":3,"payload":{"lines":[52,53]},"content":"Immediately Involked Function Expression (IIFE)"}]},{"type":"list_item","depth":2,"payload":{"lines":[53,54]},"content":"Basic Operations &amp; Operators"},{"type":"list_item","depth":2,"payload":{"lines":[54,55]},"content":"== vs ===","children":[{"type":"list_item","depth":3,"payload":{"lines":[55,56]},"content":"<a href=\"https://dorey.github.io/JavaScript-Equality-Table/\">JavaScript Equality Table</a>"},{"type":"list_item","depth":3,"payload":{"lines":[56,57]},"content":"<a href=\"https://felix-kling.de/js-loose-comparison/\">How type conversion happens in ==</a>"}]},{"type":"list_item","depth":2,"payload":{"lines":[57,58]},"content":"Date"},{"type":"list_item","depth":2,"payload":{"lines":[58,59]},"content":"Map, Filter &amp; Reduce"},{"type":"list_item","depth":2,"payload":{"lines":[59,60]},"content":"Regular Expression"},{"type":"list_item","depth":2,"payload":{"lines":[60,61]},"content":"Internationalization (i18n)"},{"type":"list_item","depth":2,"payload":{"lines":[61,62]},"content":"ECMA Script &amp; Specifications","children":[{"type":"list_item","depth":3,"payload":{"lines":[62,63]},"content":"ES6"},{"type":"list_item","depth":3,"payload":{"lines":[63,64]},"content":"ES7 etc,"}]},{"type":"list_item","depth":2,"payload":{"lines":[64,65]},"content":"Concepts","children":[{"type":"list_item","depth":3,"payload":{"lines":[65,66]},"content":"Closure"},{"type":"list_item","depth":3,"payload":{"lines":[66,67]},"content":"Hoisting"},{"type":"list_item","depth":3,"payload":{"lines":[67,68]},"content":"Prototypes &amp; Inheritances"},{"type":"list_item","depth":3,"payload":{"lines":[68,69]},"content":"Scope"},{"type":"list_item","depth":3,"payload":{"lines":[69,70]},"content":"Callback"},{"type":"list_item","depth":3,"payload":{"lines":[70,71]},"content":"New Keyword"},{"type":"list_item","depth":3,"payload":{"lines":[71,72]},"content":"Changing Context (.call, .bind() and .apply())"},{"type":"list_item","depth":3,"payload":{"lines":[72,73]},"content":"Event Delegations"},{"type":"list_item","depth":3,"payload":{"lines":[73,74]},"content":"This"},{"type":"list_item","depth":3,"payload":{"lines":[74,75]},"content":"Event Loop"},{"type":"list_item","depth":3,"payload":{"lines":[75,76]},"content":"Chaining"},{"type":"list_item","depth":3,"payload":{"lines":[76,77]},"content":"Currying"}]},{"type":"list_item","depth":2,"payload":{"lines":[77,78]},"content":"Document Object Model (DOM)","children":[{"type":"list_item","depth":3,"payload":{"lines":[79,80]},"content":"DOM Events","children":[{"type":"list_item","depth":4,"payload":{"lines":[80,81]},"content":"DOMConentLoaded"},{"type":"list_item","depth":4,"payload":{"lines":[81,82]},"content":"OnLoad"}]},{"type":"list_item","depth":3,"payload":{"lines":[82,83]},"content":"Event Handling &amp; Listeners","children":[{"type":"list_item","depth":4,"payload":{"lines":[83,84]},"content":"Event Bubbling &amp; Capturing"},{"type":"list_item","depth":4,"payload":{"lines":[84,85]},"content":"stopPropagation vs stopImmediatePropagation"},{"type":"list_item","depth":4,"payload":{"lines":[85,86]},"content":"What is event.preventDefault ?"}]},{"type":"list_item","depth":3,"payload":{"lines":[86,87]},"content":"Query Selectors"},{"type":"list_item","depth":3,"payload":{"lines":[87,88]},"content":"Create Element"},{"type":"list_item","depth":3,"payload":{"lines":[88,89]},"content":"DocumentFrament"}]},{"type":"list_item","depth":2,"payload":{"lines":[90,91]},"content":"Links","children":[{"type":"list_item","depth":3,"payload":{"lines":[91,92]},"content":"<a href=\"https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP\">Namaste JavaScript Course</a>"}]}]},{"type":"heading","depth":1,"payload":{"lines":[93,94]},"content":"Reponsiveness","children":[{"type":"list_item","depth":2,"payload":{"lines":[95,96]},"content":"Responsive Web Page"},{"type":"list_item","depth":2,"payload":{"lines":[96,97]},"content":"Mobile First Approach"},{"type":"list_item","depth":2,"payload":{"lines":[97,98]},"content":"Responsive Images"},{"type":"list_item","depth":2,"payload":{"lines":[98,99]},"content":"Responsive Text Size"},{"type":"list_item","depth":2,"payload":{"lines":[99,100]},"content":"Media Queries"}]},{"type":"heading","depth":1,"payload":{"lines":[101,102]},"content":"Accessibility (A11Y)"},{"type":"heading","depth":1,"payload":{"lines":[103,104]},"content":"Performance","children":[{"type":"list_item","depth":2,"payload":{"lines":[105,106]},"content":"How Browser Works"},{"type":"list_item","depth":2,"payload":{"lines":[106,107]},"content":"Rendering"},{"type":"list_item","depth":2,"payload":{"lines":[107,108]},"content":"Difference between re-flow and repaint in DOM"},{"type":"list_item","depth":2,"payload":{"lines":[108,109]},"content":"Javascript Memory Management"},{"type":"list_item","depth":2,"payload":{"lines":[109,110]},"content":"Chrome Lighthouse"},{"type":"list_item","depth":2,"payload":{"lines":[110,111]},"content":"Web Vitals"}]},{"type":"heading","depth":1,"payload":{"lines":[112,113]},"content":"Chrome DevTools","children":[{"type":"list_item","depth":2,"payload":{"lines":[114,115]},"content":"Elements tab"},{"type":"list_item","depth":2,"payload":{"lines":[115,116]},"content":"Console tab"},{"type":"list_item","depth":2,"payload":{"lines":[116,117]},"content":"Network tab"},{"type":"list_item","depth":2,"payload":{"lines":[117,118]},"content":"Source tab"},{"type":"list_item","depth":2,"payload":{"lines":[118,119]},"content":"Application tab"}]},{"type":"heading","depth":1,"payload":{"lines":[120,121]},"content":"Web Security","children":[{"type":"list_item","depth":2,"payload":{"lines":[122,123]},"content":"Security in SDLC"},{"type":"list_item","depth":2,"payload":{"lines":[123,124]},"content":"CSP"},{"type":"list_item","depth":2,"payload":{"lines":[124,125]},"content":"CSRF"},{"type":"list_item","depth":2,"payload":{"lines":[125,126]},"content":"CORS"},{"type":"list_item","depth":2,"payload":{"lines":[126,127]},"content":"XSS"},{"type":"list_item","depth":2,"payload":{"lines":[127,128]},"content":"DOS"},{"type":"list_item","depth":2,"payload":{"lines":[128,129]},"content":"Phishing"},{"type":"list_item","depth":2,"payload":{"lines":[129,130]},"content":"OSWAP Web Vulnerabilities"}]},{"type":"heading","depth":1,"payload":{"lines":[131,132]},"content":"Frameworks","children":[{"type":"list_item","depth":2,"payload":{"lines":[133,134]},"content":"What is Client &amp; Server Side Rendering?"},{"type":"list_item","depth":2,"payload":{"lines":[134,135]},"content":"React"},{"type":"list_item","depth":2,"payload":{"lines":[135,136]},"content":"Angular"},{"type":"list_item","depth":2,"payload":{"lines":[136,137]},"content":"Svelte"},{"type":"list_item","depth":2,"payload":{"lines":[137,138]},"content":"Vue"},{"type":"list_item","depth":2,"payload":{"lines":[138,139]},"content":"Solid"}]}]},{"initialExpandLevel":1,"colorFreezeLevel":3})</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment