frontend-interview-preparation-kit

45 Days Frontend Interview Preparation Kit

This repo contains a complete guidance for Frontend Interview Preparation.

Week 1 : Brushing up HTML, CSS, JS!

Day-wise Schedule:

Day 1: Revise HTML in 0.5 day or less than that. Start with CSS theory revision.
Day 2: Practise the CSS questions on bfe.dev
Day 3-4: Watch Namaste JS playlist for a refresher. This will take two days as there are good amount of videos, it's always good if you can complete it in less time.
Day 5-7: Focus on other topics that weren't covered in the playlist. Practise the polyfills by coding them yourself, not just on the notebook but also on the laptop.
Important HTML Topics - HTML 5 features - HTML Document Structure - Forms (Input types, attributes, validations) - Semantic tags and uses - Metatag - Media tags : image, audio, video - SEO using HTML tags - IFrames
Useful Resources
- [HTML MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML) - [W3 Schools](https://www.w3schools.com/html/) - [HTML Web.Dev](https://web.dev/learn/html/) - [HTML Best Practises](https://github.com/hail2u/html-best-practices) - [HTML Best Practises II](https://www.freecodecamp.org/news/html-best-practices/) - [Increasing SEO using HTML tags](https://javascript.plainenglish.io/top-10-html-tags-you-need-to-know-for-better-seo-with-code-39add1e7ba6d) - [Semantic Tags and How to use them correctly?](https://www.semrush.com/blog/semantic-html5-guide/)
Note: Once you have basic understanding of HTML, you can read from web.dev website for deep understanding of concepts.
Important CSS Topics - Box Model - Cascading - Specificity - Flex - Grid - Selectors - Pseudo-class Vs Pseudo-elements - Measurement Units (Absolute Vs Relative units, Which one to prefer?) - Positions - Animations and Transitions - z-index - Accessibility
Useful Resources
- [Best Resource : CSS Web.Dev](https://web.dev/learn/css/) - [bfe.dev](https://bigfrontend.dev/css): best resource to practise css questions - [Practise by Patterns](https://web.dev/patterns/) - [10 Amazing games to learn CSS](https://daily-dev-tips.com/posts/10-amazing-games-to-learn-css/) - [CSS Best practises and Naming conventions](https://hackernoon.com/best-practice-in-css-organisation-and-naming-conventions-4d103ujy) - [CSS Naming Conventions Part-2](https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/) - [CSS Practise Questions](https://bigfrontend.dev/css)
Important Javascript Topics - Working of JS - Execution Context - Callstack - Data types ( Especially Arrays, Objects, Strings) - Array and Object methods - let/var/const - Hoisting, Temporal Dead Zone - Illegal shadowing - Scope, Scope chaining - Mutable/Immutable data types - Shallow and Deep copy - DOM (DOM methods) and BOM - Critical Rendering Path - Functions - Function Declaration - Function Expression - Functional Programming - Arrow Functions - IIFE - [`this` keyword](https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c) - [Arrow function and `this` keyword](https://dev.to/bhagatparwinder/arrow-functions-this-keyword-350j) - Call, Apply, Bind - Closure and it's uses - Callbacks, Callback Hell - Promises, promise chaining - Async/Await - [Callbacks vs promises vs asyc/await](https://www.freecodecamp.org/news/javascript-async-await-tutorial-learn-callbacks-promises-async-await-by-making-icecream/) - [Currying](https://javascript.plainenglish.io/javascript-currying-comprehensive-guide-e69c47497309) - Debouncing and Throttling - Event Propagation - Bubbling - Capturing - Event Delegation - Prototype and Prototypal Inheritance - Memoisation - Generator Functions - Event Loop , Mictrotasks, Macrotasks - [Events: DOMContentLoaded, load, beforeunload, unload](https://tilomitra.com/html-page-lifecycle-events/) - async/defer - [Polyfills](https://github.com/ghoshsuman845/js-polyfills) (Mostly asked polyfills : Promise, Promise.all, Promise.any, Promise.race, Promise.allSettled, call, apply, bind, map, reduce, filter, forEach, flat, fetch API) - Web APIs - setTimout, setInterval - High Order Functions - [Working of JS Engine](https://youtu.be/xckH5s3UuX4?si=0S3VazCatZBlDfgv)
Useful Resources
- Start with watching [Namaste Javascript Playlist | Akshay Saini](https://youtu.be/pN6jk0uUrD8?si=9OSqFUJqgjRp6btb) : It is one of the best resources for understanding the JS concepts in depth, it will help you in revising at end moment. - [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) : This is the source of truth for learning JS. - [Javascript Info](https://javascript.info/) - [Nisha Singla JS Playlist](https://youtu.be/Yy9A2rAkOgw?si=C6BeGQ6zLQjiyXFe) : Focus on the following concepts from this channel: Shallow and deep copy, `this` keyword, call apply bind, prototype - [Techsith](https://www.youtube.com/@Techsithtube): Check his interview questions playlist.
Javascript Interview questions
- [JS Coding Questions | Suman Ghosh](https://github.com/ghoshsuman845/js-coding-questions) - [Js Coding Challenge | Sadanand Pai](https://jscodechallenges.vercel.app/) - [Learners Bucket EBook](https://learnersbucket.com/javascript-interview-guide-ebook/)

Week 2 : Practice Time!

Remember Practise makes a man perfect? So, this week we will focus on practising conceptual questions and making basic applications in JS.

Practise on the following links step by step:

Above mentioned resources are more than enough for practising Javascript questions. Now comes the turn of practising by making some small applications in HTML, CSS, JS. Such type of questions are generally asked in Machine Coding rounds.

Adding below a list of small applications that you can practise:

Note:

Useful Resources

Week 3 : Jumping to Web Fundamentals!

Don’t forget to keep practising questions everyday, as it will not only make your concepts more clear but would also give confidence to solve tougher questions.

Web Vitals
Core Web Vitals - [Cumulative Layout Shift (CLS)](https://web.dev/cls/) - [First Input Delay (FID)](https://web.dev/fid/) - [Largest Contentful Paint (LCP)](https://web.dev/lcp/)
Other metrics - [Interaction to next Paint (INP)](https://web.dev/inp/) - [First Contentful Paint (FCP)](https://web.dev/fcp/) - [Time to First Byte (TTFB)](https://web.dev/ttfb/)
Web Performance and Optimisations - [Core Web Vitals](https://web.dev/fast/#core-web-vitals) - [Optimising Images](https://web.dev/fast/#optimize-your-images) - [Optimising Videos](https://web.dev/fast/#lazy-load-images-and-video) - [Optimising Javascript files](https://web.dev/fast/#optimize-your-javascript) - [Optimising resource delivery](https://web.dev/fast/#optimize-your-resource-delivery) - [Optimising CSS files](https://web.dev/fast/#optimize-your-css) - [Optimising third party resources](https://web.dev/fast/#optimize-your-third-party-resources) - [Optimising Web Fonts](https://web.dev/fast/#optimize-webfonts) - [Optimising Network Quality](https://web.dev/fast/#optimize-for-network-quality) - [Webpack to optimized/compressed pages (Code splitting, Brotli Compression, Gzip Compression)](https://levelup.gitconnected.com/the-ultimate-guide-to-modern-web-application-performance-ec4eec9939)
Storing Data in browser - [Storage for Web](https://web.dev/storage-for-the-web/) - [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) - [Session Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) - [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) - [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) - [Cache Storage API](https://web.dev/cache-api-quick-guide/)
Network requests - [Fetch API](https://web.dev/introduction-to-fetch/) - [Abort Controller](https://medium.com/@icjoseph/using-react-to-understand-abort-controllers-eb10654485df) - [XMLHttpRequest](https://javascript.info/xmlhttprequest) - [CORS](https://shorturl.at/wxUXY) - [Long Polling](https://www.pubnub.com/blog/http-long-polling/) - [Web Sockets](https://web.dev/websockets-basics/) - [Server Sent Events](https://javascript.info/server-sent-events) - [Web Workers](https://web.dev/workers-basics/) - [Service Workers](https://web.dev/learn/pwa/service-workers/)
DOM - [Shadow DOM](https://web.dev/shadowdom-v1/) - [Declarative Shadow DOM](https://developer.chrome.com/en/articles/declarative-shadow-dom/#:~:text=Shadow%20DOM%20provides%20a%20way,inserted%20within%20its%20Shadow%20Tree.) - [Virtual DOM](https://adhithiravi.medium.com/react-virtual-dom-explained-in-simple-english-fc2d0b277bc5) - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
Security - [Cross-Site Scripting (XSS)](https://medium.com/codelighthouse/xss-what-it-is-how-it-works-and-how-to-prevent-it-454629e3a0da) - [Cross-Site Request Forgery (CSRF)](https://medium.com/@rajeevranjancom/cross-site-request-forgery-csrf-attack-6949edb9e405#:~:text=Cross%20site%20request%20forgery%20(CSRF)%2C%20also%20known%20as%20XSRF,both%20the%20business%20and%20user.) - [SQL Injection Attacks](https://medium.com/purplebox/sql-injection-da949c39dbe6) - [Distributed Denial Of Service (DDoS) Attack](https://medium.com/@anshulchoudhary227/what-is-a-ddos-attack-5c7db5d92dc8#:~:text=A%20distributed%20denial%2Dof%2Dservice%20(DDoS)%20attack%20is,a%20flood%20of%20Internet%20traffic.) - [Man in the Middle Attacks](https://medium.com/@.Qubit/man-in-the-middle-mitm-attack-19a4faffdc9) - Read about how to avoid these security breaches - [Content Security Policy (CSP)](https://web.dev/csp/) - [CORS](https://blog.logrocket.com/the-ultimate-guide-to-enabling-cross-origin-resource-sharing-cors/) - [Security headers](https://sundowndev.medium.com/how-important-are-http-security-headers-ad511848eb95)
Design Patterns - Singleton Pattern - Module Pattern - Factory Pattern - Proxy Pattern - Observer Pattern - Prototype Pattern Resources for Design Patterns - [patterns.dev](https://www.patterns.dev/posts/introduction) - [freecodecamp](https://www.freecodecamp.org/news/javascript-design-patterns-explained/) - [javascriptpatterns](https://javascriptpatterns.vercel.app/patterns)
React Design Patterns - Con/Pres Pattern - HOC Pattern - Render Props Pattern - Hooks Pattern - Provider Pattern - Compound Pattern Resources for Design Patterns - [patterns.dev](https://www.patterns.dev/posts/introduction) - [javascriptpatterns](https://javascriptpatterns.vercel.app/patterns)
Rendering Patterns - Client-Side Rendering (CSR) - Server-Side Rendering (SSR) - Static site generation (SSG) - Static Rendering - Incremental Static Regeneration - Progressive Hydration - Streaming Server-Side Rendering - React Server Components - Selective Hydration - Islands Architecture - Animating View Transitions
Performance Patterns - Optimize your loading sequence - Static Import - Dynamic Import - Import On Visibility - Import On Interaction - Route Based Splitting - Bundle Splitting - PRPL Pattern - Tree Shaking - Preload - Prefetch - Preconnect - Optimize loading third-parties - List Virtualization - Compressing JavaScript
Other Important Topics - How web works? - HTTPS - How APIs work? REST vs SOAP APIs - API Methods - [HTTP Headers](https://blog.postman.com/what-are-http-headers/)

Week 4 : Time to do some System Design!

Listing some best resources for studying System Design in Frontend, go on and binge watch them:

The above resources will help you in understanding the way you can deal with System Design rounds, although these solutions are not the only ones, you can come up with your own ideas as well. Also, different interviewers have different expectations when they ask you to provide a design for any system, no solution is the best/concrete solution in that case, however you can follow this pattern for framing your answers:

Week 5 : Reading React Docs and Practising!

Brush up your react by reading React docs and making some small apps in react.

Study all the hooks from React docs:

Other important topics:

Week 6 : Get you hands dirty by practising some DSA questions!

Not many companies ask DSA questions for Frontend Engineer roles, but for the sake of some good companies which have DSA rounds and for practise too, you can follow the following two resources:

Once you are done with the above, practise more Arrays and Strings questions:

### Tips:

#

LinkedIn Instagram