├── .github └── FUNDING.yml ├── LICENSE ├── README.md └── public ├── 2022_FE_roadmap.pdf ├── 2023_FE_roadmap.pdf ├── 2024_FE_roadmap.pdf ├── faq.md ├── frontend.svg ├── frontend_projects.pdf ├── interview-guide.md └── role-guide.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: sadanandpai 4 | custom: https://www.buymeacoffee.com/sadanandpai 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Sadanand Pai 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Frontend Learning Kit

2 |

Frontend tech guide and curated collection of frontend materials

3 |
4 | 5 |
6 | Show your support by giving a ⭐  to this repo 7 |

8 |

9 | 10 | 11 | 12 | 13 |

14 |
15 | 16 |
17 |

2024 Frontend Dev Roadmap & checklist

18 |

Frontend Role Guide to know about different frontend roles and their criterion

19 |

Frontend Interview Guide to know about different frontend interview rounds

20 |

Frontend projects for Practice & interviews (beginners to intermediates)

21 |

FAQs to clarify common doubts

22 |
23 | 24 | --- 25 | 26 |
27 | 28 | > Become a better software engineer by working on projects that actually challenge you at [CodeCrafters](https://app.codecrafters.io/join?via=sadanandpai) 29 | 30 |
31 | 32 | ## Frontend resources/materials 33 | 34 | Roadmaps 35 | 36 | - 📍  [Road Map (Beginner Version)](https://roadmap.sh/frontend?r=frontend-beginner) 37 | - 📍  [Road Map (Advanced Version)](https://roadmap.sh/frontend) 38 | 39 |
40 | 41 | HTML 42 | 43 | - 📗  [MDN HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 44 | - 📗  [W3 Schools](https://www.w3schools.com/html/) 45 | - 📗  [HTML Tutorial](https://www.scaler.com/topics/html/) 46 | - 🎥  [Complete Guide to HTML](https://www.udemy.com/course/the-complete-guide-to-html/) 47 | 48 |
49 | 50 | CSS 51 | 52 | - 📗  [MDN CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 53 | - 📗  [Web Dev](https://web.dev/learn/css/) 54 | - 🎥  [CSS Complete Guide - Udemy](https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/) 55 | - 📘  [CSS for JS developers](https://css-for-js.dev/) 56 | 57 |
58 | 59 | Advanced CSS 60 | 61 | - 📘  [Debugging CSS](https://debuggingcss.com/) 62 | - 🎥  [CSS Demystified](https://cssdemystified.com/) 63 | - 🎥  [Advanced CSS](https://www.udemy.com/course/advanced-css-and-sass/) 64 | 65 |
66 | 67 | JavaScript 68 | 69 | - 📗  [Eloquent JavaScript](https://eloquentjavascript.net/) 70 | - 📗  [JavaScript Info](https://javascript.info/) 71 | - 📗  [MDN JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 72 | - 📗  [JavaScript Tutorial](https://www.javascripttutorial.net/) 73 | - 📘  [JavaScript for Impatient Programmers](https://exploringjs.com/impatient-js/toc.html) 74 | - 📘  [Just Javascript](https://justjavascript.com/) 75 | - 🎥  [Complete JavaScript](https://www.udemy.com/course/the-complete-javascript-course/) 76 | - 🎥  [Javascript Complete Guide](https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/) 77 | 78 |
79 | 80 | Advanced JavaScript 81 | 82 | - 📗  [You don't know JS](https://github.com/getify/You-Dont-Know-JS) 83 | - 📗  [Secrets of the JavaScript Ninja](https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition) 84 | - 📘  [Deep JavaScript](https://exploringjs.com/deep-js/toc.html) 85 | - 📘  [Professional JavaScript for Web developers](https://www.oreilly.com/library/view/professional-javascript-for/9781119366447/) 86 | - 🎥  [Deep JavaScript Foundations](https://frontendmasters.com/courses/deep-javascript-v3/) 87 | - 🎥  [JavaScript Hard Parts](https://frontendmasters.com/courses/javascript-hard-parts-v2/) 88 | - 🎥  [JavaScript: Understanding the Weird Parts](https://www.udemy.com/course/understand-javascript/) 89 | 90 |
91 | 92 | TypeScript 93 | 94 | - 📗  [TypeScript Deepdive](https://basarat.gitbook.io/typescript/) 95 | - 📗  [Tackling TypeScript](https://exploringjs.com/tackling-ts/index.html) 96 | - 📗  [TypeScript Tutorial](https://www.typescripttutorial.net/) 97 | - 📗  [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) 98 | - 📘  [Programming TypeScript](https://www.oreilly.com/library/view/programming-typescript/9781492037644/) 99 | - 🎥  [Understanding typescript](https://www.udemy.com/course/understanding-typescript/) 100 | - 🎥  [TypeScript Course by ui.dev](https://ui.dev/typescript/) 101 | 102 |
103 | 104 | React 105 | 106 | - 📗  [React Dev](https://react.dev/) 107 | - 🎥  [React - The Complete Guide](https://www.udemy.com/course/react-the-complete-guide-incl-redux/) 108 | - 🎥  [Ultimate React](https://www.udemy.com/course/the-ultimate-react-course/) 109 | - 🎥  [Joy of React](https://www.joyofreact.com/) 110 | - 🎥  [Scrimba - Learn React for free interactively](https://scrimba.com/learn/learnreact) 111 | 112 |
113 | 114 | React Repos 115 | 116 | - 📁  [React TypeScript Cheatsheet](https://github.com/typescript-cheatsheets/react) 117 | - 📁  [Entire React code base explanation by visual block](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS) 118 | - 📁  [Bulletproof React](https://github.com/alan2207/bulletproof-react) 119 | 120 |
121 | 122 | Other frameworks 123 | 124 | - 🎥  [NextJS](https://www.udemy.com/course/nextjs-react-the-complete-guide/) 125 | - 🎥  [Angular](https://www.udemy.com/course/the-complete-guide-to-angular-2/) 126 | - 🎥  [Vue:Complete guide](https://www.udemy.com/course/vuejs-2-the-complete-guide/) 127 | - 🎥  [Sveltejs: Complete Guide](https://www.udemy.com/course/sveltejs-the-complete-guide/) 128 | 129 |
130 | 131 | GraphQL 132 | 133 | - 🎥  [Apollo GraphQL](https://www.apollographql.com/tutorials/browse?certifications=apollo-graph-associate) 134 | - 🎥  [GraphQL Course for Beginners](https://www.youtube.com/watch?v=5199E50O7SI) 135 | 136 |
137 | 138 | HTTP 139 | 140 | - 📗  [MDN HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) 141 | - 📘  [HTTP2 in Action](https://livebook.manning.com/book/http2-in-action/about-this-book/) 142 | 143 |
144 | 145 | Git 146 | 147 | - 📗  [Become a git guru](https://www.atlassian.com/git/tutorials) 148 | - 📗  [Pro Git](https://git-scm.com/book/en/v2) 149 | - 📗  [Git Explorer](https://gitexplorer.com/) 150 | - 📁  [Practical Git Guide](https://github.com/sadanandpai/git-guide) 151 | 152 |
153 | 154 | Web Performance 155 | 156 | - 📗  [MDN Performance](https://developer.mozilla.org/en-US/docs/Learn/Performance) 157 | - 📗  [Core Web Vitals](https://web.dev/vitals/) 158 | - 📗  [Web Dev Performance](https://web.dev/learn/#performance) 159 | - 📗  [Google Dev - Performance](https://developers.google.com/web/fundamentals/performance/get-started) 160 | - 📗  [Smashing Magezine - Performance](https://www.smashingmagazine.com/guides/performance/) 161 | - 🎥  [Web Performance Fundamentals](https://frontendmasters.com/courses/web-perf/) 162 | 163 |
164 | 165 | Web Security 166 | 167 | - 🎥  [Web Security](https://frontendmasters.com/courses/web-security/) 168 | - 📗  [Google Web Fundamentals: Security](https://web.dev/security/) 169 | - 📗  [MDN Web Docs: Security](https://developer.mozilla.org/en-US/docs/Web/Security) 170 | 171 |
172 | 173 | Accessibility 174 | 175 | - 🎥  [Accessibility in JavaScript Applications](https://frontendmasters.com/courses/javascript-accessibility/) 176 | - 🎥  [Develop Accessible Web Apps with React](https://egghead.io/courses/develop-accessible-web-apps-with-react) 177 | - 📗  [Web Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) 178 | 179 |
180 | 181 | Frontend Testing 182 | 183 | - 📗  [Vitest](https://vitest.dev/) 184 | - 📗  [Jest Docs](https://jestjs.io/) 185 | - 📗  [Cypress](https://www.cypress.io/) 186 | - 🎥  [JavaScript unit testing](https://www.udemy.com/course/javascript-unit-testing-the-practical-guide/) 187 | - 📘  [The art of unit testing](https://www.manning.com/books/the-art-of-unit-testing-third-edition) 188 | 189 |
190 | 191 | Progressive Web Apps (PWAs) 192 | 193 | - 📗  [MDN Guide to PWAs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) 194 | - 📗  [Google Developers: PWAs](https://web.dev/progressive-web-apps/) 195 | - 🎥  [PWA - The Complete Guide](https://www.udemy.com/course/progressive-web-app-pwa-the-complete-guide/?couponCode=24T2MT111824) 196 | 197 |
198 | 199 | JS Design Patterns 200 | 201 | - 📗  [Modern Web App Design Patterns](https://www.patterns.dev/) 202 | - 📘  [JS Design Patterns](https://patterns.addy.ie/) 203 | - 📁  [Design Patterns for Humans](https://github.com/kamranahmedse/design-patterns-for-humans) 204 | 205 |
206 | 207 | JS Best practices 208 | 209 | - 📘  [Refactoring JavaScript](https://refactoringjs.com/files/refactoring-javascript.pdf) 210 | - 🎥  [Writing Clean Code](https://www.udemy.com/course/writing-clean-code/) 211 | - 🎥  [MicroFrontends](https://www.udemy.com/course/microfrontend-course) 212 | 213 |
214 | 215 | Functional JavaScript 216 | 217 | - 📗  [Mostly adequate Guide](https://mostly-adequate.gitbook.io/mostly-adequate-guide/) 218 | - 📗  [Functional Light JavaScript](https://aguru.gitbooks.io/functional-light-javascript/content/) 219 | - 🎥  [Functional JavaScript](https://frontendmasters.com/courses/functional-javascript-v3/) 220 | 221 |
222 | 223 | Frontend youtube channels 224 | 225 | - 🎥  [Traversy Media](https://www.youtube.com/c/TraversyMedia) 226 | - 🎥  [Clever Programmer](https://www.youtube.com/c/CleverProgrammer) 227 | - 🎥  [Net Ninja](https://www.youtube.com/c/TheNetNinja) 228 | - 🎥  [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified) 229 | - 🎥  [Academind](https://www.youtube.com/c/Academind) 230 | - 🎥  [Dev Ed](https://www.youtube.com/c/DevEd) 231 | - 🎥  [Kevin Powell](https://www.youtube.com/kepowob) 232 | - 🎥  [Codevolution](https://www.youtube.com/c/Codevolution) 233 | - 🎥  [JavaScript Mastery](https://www.youtube.com/@javascriptmastery) 234 | - 🎥  [Code With Antonio](https://www.youtube.com/@codewithantonio) 235 | 236 |
237 | 238 | Frontend System Design 239 | 240 | - 📁  [Awesome Frontend System Design](https://github.com/greatfrontend/awesome-front-end-system-design) 241 | - 📁  [Frontend System Design](https://github.com/devkodeio/frontend-system-design) 242 | - 🎥  [Front-End Engineer](https://www.youtube.com/c/FrontEndEngineer) 243 | - 🎥  [Designing Scalable Frontend Systems](https://www.udemy.com/course/designing-scalable-frontend-systems/) 244 | - 🎥  [Namaste System Design](https://namastedev.com/learn/namaste-frontend-system-design) 245 | - 🎥  [Chakde System Design](https://www.youtube.com/watch?v=sV_4pOGosnU&list=PL4CFloQ4GGWICE0Tz6iXKfN3XWkXRlboU) 246 | - 🎥  [Frontend System Design Course](https://alpha.learnersbucket.com/) 247 | - 📗  [Frontend Geek](https://www.frontendgeek.com/frontend-interview/system-design) 248 | 249 |
250 | 251 | Interview Prep Resources 252 | 253 | - 📁  [Front End Interview Handbook](https://github.com/yangshun/front-end-interview-handbook) 254 | - 📁  [JavaScript Interview Questions](https://github.com/sudheerj/javascript-interview-questions) 255 | - 📁  [JavaScript Code Challenges](https://github.com/sadanandpai/javascript-code-challenges) 256 | - 📁  [React Interview Questions](https://github.com/sudheerj/reactjs-interview-questions) 257 | - 📁  [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) 258 | - 📁  [JavaScript Questions MCQ](https://github.com/lydiahallie/javascript-questions) 259 | - 📁  [Frontend Mini Challenges](https://github.com/sadanandpai/frontend-mini-challenges) 260 | - 📁  [FreeCodeCamp Interview Prep](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/curriculum/challenges/english/10-coding-interview-prep) 261 | - 📗  [Interview Ant](https://www.interviewant.com/) 262 | - 📁  [The DOM Challenge](https://github.com/devkodeio/the-dom-challenge) 263 | 264 |
265 | 266 | Interview Prep channels 267 | 268 | - 🎥  [Namaste JavaScript](https://www.youtube.com/watch?v=pN6jk0uUrD8&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP) 269 | - 🎥  [Devtools Tech Frontend Interview Series](https://www.youtube.com/watch?v=qMkUziVZvzs&list=PL4ruoTJ8LTT96O258zzjRwdiNxzDoas-G&index=2) 270 | - 🎥  [RoadsideCoder](https://www.youtube.com/@RoadsideCoder) 271 | - 🎥  [JS Cafe](https://www.youtube.com/@js_cafe) 272 | - 🎥  [Uncommon Geeks](https://www.youtube.com/watch?v=qcixpy3HQ9s&list=PLmcRO0ZwQv4QMslGJQg7N8AzaHkC5pJ4t) 273 | 274 |
275 | 276 | Coding challenges 277 | 278 | - 🚉  [Big Frontend Dev](https://bigfrontend.dev/) 279 | - 🚉  [Great Frontend Dev](https://www.greatfrontend.com?fpr=sadanand83) 280 | - 🚉  [Leetcode](https://leetcode.com/problemset/javascript/) 281 | - 🚉  [Frontend Expert](https://algoexpert.io/frontend/coding-questions) 282 | - 🚉  [JS Challenger](https://www.jschallenger.com/) 283 | - 🚉  [Codedamn](https://codedamn.com/problems) 284 | - 🚉  [Devtools Tech](https://www.devtools.tech/?ref=frontend-learning-kit) 285 | - 🚉  [Frontend Mentor](https://www.frontendmentor.io/) 286 | - 🚉  [Exercism](https://exercism.org/tracks/javascript) 287 | - 🚉  [Learners Bucket](https://practice.learnersbucket.com/) 288 | - 🚉  [FrontendPro](https://www.frontendpro.dev/) 289 | - 🚉  [Frontend Lead](https://frontendlead.com/) 290 | - 🚉  [CSS Battle](https://cssbattle.dev/) 291 | - 🚉  [Frontend Hire](https://www.frontendhire.com/) 292 | - 🚉  [Kode Karma](https://www.kodekarma.dev/) 293 | - 🚉  [Clientside Dev](https://www.clientside.dev/) 294 | - 🚉  [Frontend Churn](https://www.algochurn.com/frontend) 295 | - 🚉  [Reacterry](https://www.reacterry.com/) 296 | - 🚉  [Edabit](https://edabit.com/challenges) 297 | - 🚉  [Dev Challenges](https://devchallenges.io/) 298 | - 🚉  [Codewell](https://www.codewell.cc/) 299 | - 🚉  [ICodeThis](https://icodethis.com/) 300 | - 🚉  [Mister DA](https://www.misterda.com/javascript-exercises) 301 | - 🚉  [React Challenges](https://reactchallenges.live/) 302 | - 🚉  [Daily React Problems](https://dailyreactproblem.vercel.app/) 303 | - 🚉  [Prepare Frontend](https://preparefrontend.com/) 304 | 305 |
306 | 307 | Frontend Deployment Platforms 308 | 309 | - 📗  [Netlify](https://www.netlify.com/) 310 | - 📗  [Vercel](https://vercel.com/) 311 | - 📗  [Firebase Hosting](https://firebase.google.com/docs/hosting) 312 | - 📗  [AWS Amplify](https://aws.amazon.com/amplify/) 313 | - 📗  [GitHub Pages](https://pages.github.com/) 314 | 315 |
316 | 317 | Browser DevTools 318 | 319 | - 📗  [Chrome DevTools](https://developer.chrome.com/docs/devtools/) 320 | - 📗  [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) 321 | - 🎥  [DevTools Crash Course](https://www.youtube.com/watch?v=e1gAyQuIFQo) 322 | 323 | --- 324 | 325 | DSA resources 326 | 327 | - 📘  [Grokking Algorithms](https://www.manning.com/books/grokking-algorithms) 328 | - 📘  [The Algorithm Design Manual](https://www.amazon.com/gp/product/3030542556/) 329 | - 📘  [Cracking Coding Interview](https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850) 330 | - 📁  [Javascript Algo](https://github.com/trekhleb/javascript-algorithms) 331 | - 📗  [DSA Interview Challenges](https://dsa-interview-challenges.vercel.app/) 332 | - 🎥  [Practical Algorithms](https://frontendmasters.com/courses/practical-algorithms/) 333 | - 🎥  [JavaScript Algorithms fundamentals](https://pro.academind.com/p/javascript-algorithms-the-fundamentals) 334 | - 🎥  [JS algorithms and data structures masterclass](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/) 335 | 336 |
337 | 338 | DSA youtube 339 | 340 | - 🎥  [Adbul Bari](https://www.youtube.com/watch?v=0IAPZzGSbME&list=PLDN4rrl48XKpZkf03iYFl-O29szjTrs_O) 341 | - 🎥  [Take U Forward](https://www.youtube.com/@takeUforward/) 342 | - 🎥  [JavaScript Algorithms and Data Structures](https://www.youtube.com/playlist?list=PLC3y8-rFHvwjPxNAKvZpdnsr41E0fCMMP) 343 | - 🎥  [Jenny's Lectures](https://www.youtube.com/watch?v=AT14lCXuMKI&list=PLdo5W4Nhv31bbKJzrsKfMpo_grxuLl8LU) 344 | - 🎥  [Gaurav Sen](https://www.youtube.com/channel/UCRPMAqdtSgd0Ipeef7iFsKw) 345 | - 🎥  [Tushar Roy - Coding Made Simple](https://www.youtube.com/channel/UCZLJf_R2sWyUtXSKiKlyvAw) 346 | 347 |
348 | 349 | Coding platforms 350 | 351 | - 🚉  [Leetcode](https://leetcode.com/) 352 | - 🚉  [Hackerrank](https://www.hackerrank.com/) 353 | - 🚉  [Interviewbit](https://www.interviewbit.com/practice/) 354 | 355 |
356 | 357 | Additional Resources 358 | 359 | - 🎙  [JS Party podcast](https://jsparty.fm/) 360 | - 📗  [JavaScript 30](https://javascript30.com/) 361 | - 📗  [React Basics](https://learning-zone.github.io/react-basics/) 362 | - 📗  [FreeCodeCamp React Challange](https://www.freecodecamp.org/learn/front-end-development-libraries/react/) 363 | - 📗  [React Coding Challange](https://github.com/alexgurr/react-coding-challenges/) 364 | - 📗  [React by Example](https://reactbyexample.github.io/) 365 | - 📗  [React Cheatsheet](https://devhints.io/react) 366 | - 📗  [React Patterns](https://reactpatterns.com/) 367 | - 📗  [Tao Of React](https://alexkondov.com/tao-of-react/) 368 | - 📗  [MDN - Front-end Web Dev pathway](https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer) 369 | - 📗  [Web-Dev-For-Beginners - by Microsoft](https://github.com/microsoft/Web-Dev-For-Beginners) 370 | - 📗  [The React Handbook](https://reacthandbook.com/) 371 | - 📗  [Vue CheatSheet](https://vue-cheatsheet.themeselection.com/) 372 | 373 |
374 | 375 | --- 376 | 377 | ### License 378 | 379 | This repository is MIT-licensed. [Read more](./LICENSE) 380 | -------------------------------------------------------------------------------- /public/2022_FE_roadmap.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sadanandpai/frontend-learning-kit/b27257132ff9254066bc4d83b22540ecab1e8b9a/public/2022_FE_roadmap.pdf -------------------------------------------------------------------------------- /public/2023_FE_roadmap.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sadanandpai/frontend-learning-kit/b27257132ff9254066bc4d83b22540ecab1e8b9a/public/2023_FE_roadmap.pdf -------------------------------------------------------------------------------- /public/2024_FE_roadmap.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sadanandpai/frontend-learning-kit/b27257132ff9254066bc4d83b22540ecab1e8b9a/public/2024_FE_roadmap.pdf -------------------------------------------------------------------------------- /public/faq.md: -------------------------------------------------------------------------------- 1 | ## FAQs 2 | 3 | ##### Frequently/Commonly Asked Questions with Answers 4 | 5 |
6 | 7 |
8 | What is the difference between UI Engineer and frontend developer? 9 | 10 |
11 | 12 | Both roles are almost similar in most companies. Expectations for such roles will be as mentioned in the JD (Job description). Few companies dedicate UI Engineer role-specific to designing the webpages only using HTML & CSS. Those require lesser expertise in JavaScript & logic building. 13 |
14 | 15 |
16 | 17 |
18 | What is the difference between a product company and a service company? What is C2H role? 19 | 20 |
21 | 22 | - Product companies do have their product and employees work for it. Quality of work and compensation is usually better 23 | - Service companies work for other products and give services to them. (Quality of work is not guaranteed as work can vary from project to project) 24 | - C2H Contract to Hire is a role in which consultancies outsource developers to work for other companies (usually for product companies) 25 |
26 | 27 |
28 | 29 |
30 | What is live coding round? 31 | 32 |
33 | 34 | Live coding is generally a part of an interview round, where the candidate has to share the screen and write the program or code snippet. Also, the candidate has to explain the approach while solving the program. 35 |
36 | 37 |
38 | 39 |
40 | What is bar raiser round? 41 | 42 |
43 | 44 | Bar raiser round is a special technical round conducted to decide if the candidate is eligible or not. It is conducted generally in the below scenarios 45 | - There are multiple eligible candidates for the same role, but vacancies are fewer 46 | - The interview panel is not sure if the candidate is eligible for the role or not even after a couple of interview rounds 47 | - The interview panel thinks the candidate is eligible for the higher role and is ready to check the eligibility of the candidate 48 |
49 | 50 |
51 | 52 |
53 | What is the importance of DSA in frontend role? 54 | 55 |
56 | 57 | Data structures and algorithms help to improve problem-solving capabilities and to optimize the solutions. Like web apps we are building nowadays are frontend heavy, problems/tasks to be coded efficiently. Many companies look for good knowledge of DSA, and hands-on will help you. However, advanced DSA is not very essential for general frontend development. 58 |
59 | 60 |
61 | 62 |
63 | Can I use JavaScript for DSA interview? 64 | 65 |
66 | 67 | As a frontend developer, I receommend you to use JS for practicing DSA. It will help you to improve your JS hands-on skills as well. Companies will be happy to see you solve problems in JavaScript (after all you are going to work on the same day and night). 68 |
69 | 70 |
71 | 72 |
73 | Please help me to choose a JavaScript framework/library 74 | 75 |
76 | 77 | As of 2023, React is a popular frontend library having good demands. So it is highly recommended to learn ReactJS. 78 |
79 | 80 |
81 | 82 |
83 | Why am I expected to code in pure HTML, CSS, JS for browser coding (machine coding) rounds of many companies? 84 | 85 |
86 | 87 | Frontend development at its core, HTML, CSS, and JS. A person with strong knowledge of these can adapt to different libraries & frameworks with ease. But nowadays most companies give a flexibility to use a framework as well. 88 |
89 | 90 |
91 | 92 |
93 | Tell me about different role structures in the company 94 | 95 |
96 | 97 | Roles/designations vary from company to company. The expectations and skill set are almost the same as explained in the role guide. To make the progression/promotion process motivating for employees, companies also have multi-level roles (SDE1, 2, 3, 4, ...) with a shorter span for each role. Many companies also follow Junior and Senior roles, with higher roles being tech lead/staff engineer. 98 |
99 | 100 |
101 | 102 |
103 | What is the difference between Tech lead and Team lead? 104 | 105 |
106 | 107 | - Tech lead role is equivalent to an SDE3 or higher role, in which the expectation is to have high technical skills besides managing the people technically. Most of the companies give this designation to a person who manages more than one developer. 108 | - Team lead role is equivalent associate manager role or higher role, in which the expectation is to have excellent soft skills besides good technical knowledge. Most of the companies give this designation to a person who manages more than one person (need not be technical) 109 |
110 | 111 |
112 | 113 |
114 | I had only a few technical rounds in a company & there were no rounds as mentioned in the interview rounds guide!!! 115 | 116 |
117 | 118 | Companies follow the interview structure which suits them the best. And depending on various factors (previous interviews, offer acceptance, conversion ratio, etc.) They adjust the interview processes. 119 |
120 | 121 |
122 | 123 |
124 | Is it fine to move to a lower role than my current role while switching? 125 | 126 |
127 | 128 | Roles/designations vary from company to company. If the opportunity and compensation match your needs, moving to such a role should not be a problem. 129 |
130 | 131 |
132 | 133 |
134 | I went through many of these mentioned interview rounds in a company. I have done very well but did not hear anything back from them!!! 135 | 136 |
137 | 138 | - Selection criteria depend on various factors such as technical skills, soft skills, interview rules, previous company, the reason for the switch, etc. Interviews in which you think you have performed well may not be what the company is thinking or the vacancies might have been filled by others. 139 | - That said, the candidate deserves to know the application status after completing the interview process. Unfortunately, many companies (even well-known) ignore communicating the result to the candidate if rejected. 140 | - It is good to drop a mail requesting the status of the interview and expect feedback. Instead of getting disappointed, consider it as an interview experience. It isn't recommended to post on social media to defame the company. 141 |
142 | 143 |
144 | 145 |
146 | What factors should I consider while accepting an offer? 147 | 148 |
149 | 150 | - Work culture 151 | - Compensation (fixed pay + variable pay + joining bonus) 152 | - Tech stack 153 | - Roles & Responsibilities 154 | - Interview process 155 | - Yearly increment/hike 156 | - Policies (insurance, parents insurance, provident fund, WFH benefits) 157 | - Leaves (paid + casual + sick) and holidays (10+ yearly and weekends) 158 | - Company vision and review 159 | - ESOPs (employee shares) 160 | - Work shift/timings and flexibility 161 | - Skills of colleagues & seniors etc. 162 |
163 | 164 |
165 | 166 |
167 | I directly started learning frontend framework without good knowledge of fundamentals (HTML, CSS, JS). What should I do now? 168 | 169 |
170 | 171 | One of the below approaches you can follow 172 | - If you aim for a long term and have enough time, start learning the fundamentals i.e. HTML, CSS, JS. It can be taken up, parallelly along with your routine work. Create a learning roadmap for yourself. It is more academic and organized. 173 | - If you aim to improve your skills on what you are working on daily, you can explore & study the fundamentals as and when you face the challenges. It is a practical approach but has no roadmap and is unorganized. 174 |
175 | 176 |
177 | 178 |
179 | What is a roadmap? 180 | 181 |
182 | 183 | A roadmap is a step-by-step guide to becoming a strong frontend developer. You can read more about frontend roadmap [here](https://roadmap.sh/frontend) 184 | 185 |
186 | 187 |
188 | 189 |
190 | I have 2/4/6+ years of experience in different domains. Is it possible to switch to frontend at this point? 191 | 192 |
193 | 194 | Yes. As of now, the frontend market is booming and there is a need for a lot of good frontend developers. 195 |
196 | 197 |
198 | 199 |
200 | Who is a self-taught developer? Can I become a self-taught frontend developer? 201 | 202 |
203 | 204 | A self-taught developer is someone who does not depend on one curriculum or instructor, instead gets ready to excel in the coding/programming skills by using free/paid resources. You can become one and be a competent frontend developer like others. 205 |
206 | But having a frontend mentor/instructor will help to get the right guidance and accelerate your learning process. 207 |
208 | 209 |
210 | 211 |
212 | I can follow video tutorials & create projects. But on my own, I get completely stuck. Where am I going wrong? 213 | 214 |
215 | 216 | It is a common problem with most of us. Video tutorials take a lot of effort and trials by experts. But these videos are then converted to tutorials which include only the functional code and happy flow. Hence, it feels easy to follow while watching. As a suggestion, follow these tutorials only to understand the concepts and practice the coding yourself. Also, you can switch to reading the books, which will give your brain more work and will help you to think more to understand & come up with solutions (though it is time consuming) 217 |
218 | 219 |
220 | 221 |
222 | I am a frontend developer and I have prepared well for interviews. I have got multiple offers from top companies and now I feel like I am king/queen of frontend? 223 | 224 |
225 | 226 | It is a very optimistic feeling and boosts confidence. But remember below points, 227 | - job openings for frontend are more than ever in the current market 228 | - cracking interviews depends on various factors such as skills, soft skills, luck, current company, referrals, etc. 229 | - frontend ecosystem is vast and mastering it might not be possible 230 |
231 | 232 |
233 | 234 |
235 | Where can I find ideas to create personal projects for learning and practice? 236 | 237 |
238 | 239 | [App ideas](https://github.com/florinpop17/app-ideas) 240 |
241 | 242 |
243 | 244 | #### Note 245 | 246 | ##### These are not guidelines or standards to be followed. This document is an attempt to list down a few commonly asked doubts and share my opinion to help you to prepare well to become a competent frontend developer. 247 | -------------------------------------------------------------------------------- /public/frontend.svg: -------------------------------------------------------------------------------- 1 | static_assets -------------------------------------------------------------------------------- /public/frontend_projects.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sadanandpai/frontend-learning-kit/b27257132ff9254066bc4d83b22540ecab1e8b9a/public/frontend_projects.pdf -------------------------------------------------------------------------------- /public/interview-guide.md: -------------------------------------------------------------------------------- 1 | ## Frontend Interview rounds 2 | 3 | ##### Guide to help you understand different frontend interview rounds and their process 4 | 5 |
6 | 7 |
8 | Telephonic / Exploratory discussion 9 | 10 |
11 | 12 | - takes from 20 mins to a maximum of 60 mins 13 | - used to assess eligibility/fitment of the candidate for the role 14 | - can be technical or a mix of technical & non-technical questions 15 | 16 | Notes: 17 | 18 | - Telephonic discussion evaluates the candidate using a set of technical questions 19 | - Exploratory discussion evaluates the candidate using technical/non-technical discussion 20 | 21 | Tips: 22 | 23 | - Brush your knowledge of the technologies and frameworks used in your projects and the skills expected 24 | - Learn about the company and go through the job description very well 25 |
26 | 27 |
28 | 29 |
30 | Browser coding (Machine coding) / Assessment 31 | 32 |
33 | 34 | - takes around 60 mins to a maximum of 120 mins 35 | - used to assess core frontend skills or tech stack knowledge of the candidate 36 | - purely technical round focused on frontend skills 37 | 38 | Notes: 39 | 40 | - Browser coding expects you to build or solve mini frontend projects or feature 41 | - Browser coding round allows you to access internet to search code syntaxes 42 | - Assessment can be a quiz or set of problems to solve (may involve both frontend & problem solving) 43 | 44 | Tips: 45 | 46 | - Practice HTML, CSS, JS and DOM mainpulations very well 47 | - Browser coding problem can be asked to solve using pure HTML + CSS + JS or with a framework 48 |
49 | 50 |
51 | 52 |
53 | Problem Solving 54 | 55 |
56 | 57 | - takes around 30 mins to a maximum of 60 mins 58 | - used to assess the analytical and problem-solving skills of the candidate 59 | - purely technical round involving problem solving & DSA, but may not focus much on frontend skills 60 | 61 | Note: 62 | 63 | - expects you to understand the problem, get requirements clear, and come up with an optimized solution 64 | - generally asked to live coding using google docs or code editor 65 | - rather than final output and syntaxes, approach and methodologies are focused more 66 | 67 | Tips: 68 | 69 | - Practice various problems/DSA very well, by going through relevant materials before the interview 70 | - Ask questions to clarify your understanding. Clarify all your doubts with the interviewer before solving 71 | - Explain your approach to the interviewer and then proceed to solve the problem 72 | - It should not be an issue if you are not able to come up with an optimized solution in the first go 73 | - Think out loud while solving the problem and share your thought process 74 |
75 | 76 |
77 | 78 |
79 | Take home assignment 80 | 81 |
82 | 83 | - takes from 1 day to 1 week 84 | - used to assess the capability of the candidate to work on real-time web application 85 | - purely technical challenge which requires project setup knowledge from scratch 86 | 87 | Note: 88 | 89 | - will not be included if machine coding round is already conducted/planned 90 | 91 | Tips: 92 | 93 | - Prepare well on one of the frontend frameworks like React, Angular, Vue 94 | - Also cover different aspects of the project such as: 95 | - Project Setup 96 | - Repo setup 97 | - Unit testing 98 | - Deployment etc. 99 |
100 | 101 |
102 | 103 |
104 | Technical Discussion 105 | 106 |
107 | 108 | - takes around 40 mins to 60 mins 109 | - used to assess the technical strength of the candidate 110 | - is a purely technical round focused on frontend fundamentals and libraries/tools/frameworks 111 | 112 | Notes: 113 | 114 | - won't be restricted to scripted questions and can include anything technical 115 | - multiple technical discussions can be scheduled depending on the requirements 116 | - generally involves live coding with execution over screen sharing 117 |
118 | 119 |
120 | 121 |
122 | System design 123 | 124 |
125 | 126 | - takes around 40 mins to 60 mins 127 | - used to assess the understanding & knowledge of the candidate w.r.t product architecture & design 128 | - purely technical round, focused on functional & non-functional aspects 129 | 130 | Notes: 131 | 132 | - won't be restricted only to frontend but can also involve engineering, UX, design thinking, etc. 133 | - expects to explain the interaction and integration between different components/layers of the system 134 | - will not be included for SDE1 role generally 135 |
136 | 137 |
138 | 139 |
140 | Hiring Manager 141 | 142 |
143 | 144 | - takes around 30 mins to 60 mins 145 | - used to evaluate if the candidate is fit the team they are hiring for 146 | - mix of technical and non-technical round, and also may involve puzzles 147 | - in many companies this is merged with cultural fit as a single interview 148 | 149 | Notes: 150 | 151 | - expects the candidate to answer on the experiences and previous projects 152 | - usually conducted by the hiring manager or higher management roles 153 | 154 | Tips: 155 | 156 | - Prepare and make notes of the projects you have worked on so far 157 |
158 | 159 |
160 | 161 |
162 | Cultural fit 163 | 164 |
165 | 166 | - takes around 30 mins to 60 mins 167 | - used to evaluate if the candidate is fit for the company and culture 168 | - generally a non-technical discussion 169 | 170 | Notes: 171 | 172 | - expects the candidate to answer different scenarios based on the experience 173 | - usually conducted by the higher management roles or non tech person 174 | 175 | Tips: 176 | 177 | - Follow the [STAR](https://www.thebalancecareers.com/what-is-the-star-interview-response-technique-2061629) approach to answer scenario-based questions 178 |
179 | 180 |

181 | 182 | Visit [FAQs](./faq.md) section. 183 | 184 |
185 | 186 | #### Note 187 | 188 | ##### These are not guidelines or standards to be followed. This document is an attempt to collect the general practices being followed by the industry in recent times and share such information with you to help you to prepare well to become a competent frontend developer. 189 | -------------------------------------------------------------------------------- /public/role-guide.md: -------------------------------------------------------------------------------- 1 | ## SDE Frontend roles 2 | 3 | ##### Guide to help you understand different frontend roles, their expectations and required skills 4 | 5 |
6 | 7 | ### SDE1 - Frontend / Junior frontend developer 8 | 9 | Software development engineer 1 - frontend is a role involving frontend development to build webpages and mobile application interfaces using HTML, CSS, and JavaScript. The candidate should be familiar with web development in general and have an understanding of popular frameworks. Frontend experience range expected for this role is 0 - 3 years 10 | 11 |
12 | Expectations 13 | 14 | - Hands-on knowledge of HTML, CSS to design the web pages 15 | - Understanding of core JavaScript concepts and implementation knowledge 16 | - Debugging skills & developer tools usage 17 | - Clarity on synchronous & asynchronous program flows 18 | - Good problem solving and programming skills 19 | - Knowledge of version control systems such as Git 20 | - Interest and ability to work on the given tech stack 21 | - Mindset to work in collaboration and inclusion 22 |
23 | 24 |
25 | Core skills 26 | 27 | - Fundamental knowledge of HTML5, CSS, JavaScript syntaxes and their usage 28 | - Understanding of doctype, structure, meta info, tags, elements levels 29 | - Knowledge of DOM, storage mechanisms, form handling 30 | - Experience in loading of external scripts & styles, event handling 31 | - Understanding of specificity, cascading, CSS selectors 32 | - Knowledge of box model, positioning, display methods 33 | - Experience in any CSS library/framework 34 | - Understanding of variables, primitives, operators, scopes, context 35 | - Knowledge of timeouts, callbacks, promises, browser API 36 | - Hands-on experience of ES6 and newer syntaxes 37 | - Familiarity with any JS library/framework 38 |
39 | 40 |
41 | Engineering skills 42 | 43 | - Fundamental knowledge of programming along with most used data structures 44 | - Experience in solving most commonly known practical challenges/algorithms 45 | - Knowledge of request-response model, HTTP basics, asynchronous programming 46 | - Understanding of different browsers, session, server-side communication 47 | - Familiarity of working on tools such as Git, code editor, deployment, etc. 48 |
49 |
50 | 51 | ### SDE2 - Frontend / Mid-senior frontend developer 52 | ##### (includes everything from SDE1) 53 | 54 | Software development engineer 2 - frontend is a technical role involving frontend development to build webpages and mobile application interfaces using HTML, CSS, and JavaScript. The candidate for this role should be well versed in creating pixel-perfect UIs and have strong web fundamental knowledge. The candidate should already have worked on a frontend framework & have known it in detail. Frontend experience range expected for this role is 3 - 6 years 55 | 56 |
57 | Expectations 58 | 59 | - Building pixel-perfect web apps using HTML, CSS, or libraries 60 | - Strong in core JavaScript and knowledge of common design patterns 61 | - Interest and ability to adapt quickly to any framework used in the company 62 | - Extensive knowledge and hands-on in debugging 63 | - Capability to implement frontend best practices and standards 64 | - Ability to handle the projects from scratch and refactor the codebase 65 | - In-depth knowledge of any one of the popular frontend frameworks 66 | - Ability to guide and support junior developers 67 |
68 | 69 |
70 | Core Skills 71 | 72 | - Strong fundamental knowledge of HTML5, CSS, JavaScript syntaxes and their usage 73 | - In-depth knowledge of CRP, storage mechanisms, form handling 74 | - Good understanding of accessibility, SEO, DOM manipulations 75 | - Excellence in responsive design, modern layouts, stacking context 76 | - Knowledge of cross-browser compatibilities, transitions, animations 77 | - Expertise in async flows using promises, async-await, generators, requestAnimationFrame 78 | - In-depth knowledge of closures, prototypes, modules 79 | - Good hands-on experience in CSS library/framework, SASS, CSS in JS 80 | - Extensive knowledge of a JS library/framework 81 |
82 | 83 |
84 | Engineering skills 85 | 86 | - Expertise in version management systems such as Git 87 | - Strong programming knowledge and ability to solve various problems using efficient techniques 88 | - Knowledge of building performant and accessible web applications 89 | - Hands-on experience of state management, internationalization, TypeScript, unit testing, etc. 90 | - Familiarity of SSR, web components, node packages, docker, cloud services, etc. 91 | - Ability to write clean code and follow the industry best standards 92 |
93 |
94 | 95 | ### SDE3 - Frontend / Senior frontend developer 96 | ##### (includes everything from SDE2) 97 | 98 | Software development engineer 3 - frontend is a technical role involving frontend development to build webpages and mobile application interfaces using HTML, CSS, and JavaScript. The candidate should have expertise in the frontend framework and the capability to design the large-scale application from scratch or transform the legacy application into a modern web app. The candidate should have good knowledge of designing project architecture. Frontend experience range expected for this role is 6+ years 99 | 100 |
101 | Expectations 102 | 103 | - Expertise in HTML5, CSS, JavaScript to deliver the web apps 104 | - Expertise in delivering secure, accessible, performant web application 105 | - Extensive knowledge and hands-on experience in debugging complex code bases 106 | - Good Knowledge of cloud services & CI/CD tools 107 | - Knowledge of structuring and architecting small scale to large scale projects 108 | - Capability to implement frontend best practices and update with trends in the frontend community 109 | - Ability to manage and guide team technically 110 |
111 | 112 |
113 | Core skills 114 | 115 | - Expertise in advanced JavaScript and design patterns 116 | - Expertise and in-depth knowledge of JS frameworks and CSS libraries 117 | - Expertise in web performance, perfromance improvement strategies, light house 118 | - Strong understanding in service workers, web workers, progressive web apps 119 | - Strong understanding of TypeScript, Webpack, web components, functional/reactive programming 120 | - Extensive knowledge browser internals, JS engines and web security 121 | - Good experience on various industry tools such as docker, storybook, GraphQL, Cypress, firebase 122 | - Knowledge of databases, SQL and No SQL 123 |
124 | 125 |
126 | Engineering skills 127 | 128 | - In-depth knowledge of project migration, TDD, End-to-end testing tools, micro frontend, CI/CD, etc. 129 | - Experience in setting up the project from scratch with various Linters & tool integration 130 | - Knowledge of building highly scalable and maintainable web apps along with architecture 131 | - Capability to explore various tech stacks & decide the suitable tech stack 132 | - Understanding of building custom libraries, packages, and frameworks 133 | - Ability to explore the technologies and trends to keep the project standards up to date 134 |
135 | 136 |

137 | 138 | Visit [FAQs](./faq.md) section. 139 | 140 |
141 | 142 | #### Note 143 | 144 | ##### These are not guidelines or standards to be followed. This document is an attempt to collect the general practices being followed by the industry in recent times and share such information with you to help you to prepare well to become a competent frontend developer. 145 | --------------------------------------------------------------------------------