/frontend-interview-preparation-kit

This repo contains a complete guidance for Frontend Interview Preparation.

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
Important CSS Topics
Important Javascript Topics

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:

  • Star Rating
  • Implementing Flipkart Search bar functionality using debouncing or throttle
  • Typeahead/ autocomplete search bar
  • Todo List (Having CRUD operations)
  • Creating components like Carousel , Accordian, Popover
  • Infinite Scroll
  • Implement tic tac toe
  • Create Images gallery(Use optimations like infinite scroll, pagination, search functionality)
  • Implement a poll widget
  • Implement a Event Emitter
  • Implement a Kanban board having tasks and subtasks
  • Creating a basic Chat Application
  • Implement Comment Widget (add comments, add multiple replies to comments and delete them like Facebook or Instagram)
  • Food Ordering App having Search, Sort, Filter, Add to Cart functionality
  • Build a calculator (add/subtract... then multiply/divide... then log/pow... etc)
  • Create a progress bar having start/restart, pause, stop functionality
  • Create Analog Clock
  • Implement Day Calendar
  • Create a Todo List using Drag and Drop

Note:

  • You need not practise all the questions mentioned above, skip the questions you think you'll be able to solve confidently and pick the once that you feel hesitant about.
  • Practise everything by coding on laptop as this will not just help in learning but would also make you confident and would increase your coding speed while you're interviewing.
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
Other metrics
Web Performance and Optimisations
Storing Data in browser
Network requests
DOM
Security
Design Patterns
  • Singleton Pattern
  • Module Pattern
  • Factory Pattern
  • Proxy Pattern
  • Observer Pattern
  • Prototype Pattern

Resources for Design Patterns

React Design Patterns
  • Con/Pres Pattern
  • HOC Pattern
  • Render Props Pattern
  • Hooks Pattern
  • Provider Pattern
  • Compound Pattern

Resources for Design 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

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:

  • useState()
  • useEffect()
  • useCallback()
  • useMemo()
  • useRef()
  • useReducer()
  • useContext()
  • useId()
  • useLayoutEffect()

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:

  • Whenever starting with a new topic, don't just read from one resource, try to read atleast 10 articles surrounding that topic from Medium/other websites.
  • Always try to understand the What, Why and How's?(What is the topic about? Why is it used? How to use/implement it?) of a topic with an example of it. This gives you a fair and required idea about the topic. You can also take a real time coding implementation of that topic which will give you the best understanding of the topic, rest of the clarity comes with experience and practise.😌

LinkedIn Instagram