The Complete Frontend Engineering Interview Preparation Kit

The Complete Frontend Engineering Interview Preparation Kit

The Complete Frontend Engineering Interview Preparation Kit

Learn JavaScript, TypeScript, React, Redux, Material UI, System design & Prepare for your Frontend Interview

Language: english

Note: 4.4/5 (194 notes) 8,155 students

Instructor(s): Manoj Satish Kumar

Last update: 2022-04-27

What you’ll learn

  • The Javascript Bootcamp
  • Master Google Chrome Dev tools
  • The TypeScript Bootcamp
  • React, Redux & Material UI Workshop
  • Designing Scalable Frontend Systems
  • Frontend System Design guidance
  • Interview Questions & Solutions
  • Know the aspects interviewers look at
  • Software Engineering Life lessons
  • Frequently Asked Questions
  • Software engineer career advice
  • Dealing with interview rounds
  • Soft skills development
  • Read a lot of career related articles

 

Requirements

  • You don’t need any specific skills to take this course
  • You will be benefited more if you are already a software developer.
  • You’ll need a laptop and good internet connection.

 

Description

After completing this course, you will be 100% prepared to face and crack your next front-end interview. Now that’s a bold statement but these are the materials I prepared to crack interviews in my career.

**This course is a bundle of all my other courses on Udemy**


Hello, My name is Manoj ( Founder @MSK Web development )

I have a decade of experience in frontend web development and I went through a series of ups and downs in my career to reach this state I am today and I have covered all of it in this course. This will help any front-end engineer to boost their career ( using my experience ) and you will learn from my experience. It is the best thing to do.

It took me almost 10 years to populate the contents of this course. The lessons and problems I have solved to get selected in multiple interviews ( Including Walmart, PayPal, JP Morgan, Tesco, Oracle, Cerner & GE  ) and the teachings I obtained when I failed in multiple interviews ( Including Google, Facebook, Amazon, & Microsoft ), all are covered in this 1 course.

This course is applicable for junior to senior software engineers and those who are looking for a promotion / higher-level role. At some point, you will be assessed for your system design skills. So it is crucial to know what is the acceptance criteria. This will help you prepare better and increase your chances of clearing the round. You will also learn javascript and practice interview coding round as well.


First, you will learn javascript basics to intermediate concepts.

Then, you will master google chrome dev tools.

Then, you will learn TypeScript from scratch.

Then, you will get guidance for the frontend system design interview round.

You will also be given interview problems that were asked to me in various interviews and the ones which I ask whenever I take an interview for a frontend engineer role.

I will give you software engineering career tips based on my experience in multiple companies in this course.


I hope this course gives you a boost in your front-end career.

I would be extremely happy if you get benefited from my experience and get selected in your dream company.


Warm regards,

Manoj Satish Kumar


 

Who this course is for

  • Anyone who wants to start their frontend journey
  • Job seekers looking for frontend engineer position
  • Software engineers who want a promotion in their job
  • Those who want to learn soft-skills in IT world
  • College students interested in frontend

 

Course content

  • Introduction
    • What you can expect in this course
    • Career advice & lessons included
    • Let’s build your online portfolio.
    • Join our web dev community!
    • Walmart Interview Experience – Sr. Software Engineer
  • The Javascript Bootcamp
    • My JavaScript journey.
    • Introduction to JS bootcamp.
    • Bootcamp agenda
    • Component based design
    • Your time is your asset.
    • The creator of JavaScript
    • ECMAScript specification
    • ES 2015 / ES6 features
    • Introducing JavaScript
    • The JavaScript runtime engine
    • The web browsers & engines
    • The almighty V8 engine
    • A Walkthrough of data types in JavaScript
    • A Walkthrough of operators in JavaScript
    • The Lexical scope & compiler passes
    • The concept of “Hoisting”
    • Understand functions to become an expert in JS
    • A walkthrough of functions in JavaScript
    • What is a “prototype” ?
    • Call, Apply and Bind methods
    • Immediately Invoked Function Expressions ( IIFE ) pattern
    • Is JavaScript “single-threaded” ?
    • The Event loop
    • A walkthrough of Google chrome dev tools
    • A quote on human brain
    • Introducing String methods
    • A walkthrough of static & prototype string methods
    • You need a cheat sheet for reference
    • A cheat-sheet of string methods
    • Introducing Array methods
    • A Walkthrough of all Array methods
    • A cheat-sheet of array methods
    • Why is array performance important ?
    • Performance of Array methods
    • Static and Dynamic Importing
    • Callbacks and Promises in JS
    • Generator function* in JS
    • What are “Closures” ?
    • Reference materials & links
    • Final Assessment
    • Congratulations on completing JS Bootcamp
  • Mastering google chrome dev tools
    • The Elements tab
    • The Console tab
    • Come back for more
  • The TypeScript Bootcamp
    • Why TypeScript ?
    • Welcome to the TypeScript bootcamp
    • Benefits of using TypeScript in your project
    • Bootcamp instructions & guidelines
    • Pre requisites for the bootcamp
    • Creating your personal library of code snippets
    • The “Car”, “Bike” and “Plane” examples
    • Let’s begin the TS journey
    • The Problem with JavaScript
    • What’s wrong with JavaScript ?
    • Lab Experiment: JavaScript Runtime Querk!
    • Local machine setup
    • Bootstrap project setup
    • VS Code extensions
    • The TypeScript online playground
    • Lab Experiment: TS Compilation
    • Exploring TS Compiler options / flags
    • Lab Experiment: Stopping TS Compilation
    • TypeScript & it’s Compiler Quiz
    • Primitive Type annotations
    • Primitive Types Walkthrough
    • Array Type
    • Union Types
    • Type aliases
    • Lab Experiment: Annotating basic types
    • The “Function” Type
    • Interfaces
    • Object types
    • Lab Experiment: Interface type and object
    • Interface VS Type alias
    • Renaming primitives
    • Field addition
    • Extensibility
    • Special Type annotations
    • Special Type | “any”
    • Special Type | “unknown”
    • Special Type | “void”
    • Special Type | “never”
    • Dive into Literal Types
    • Literal Types walkthrough
    • Literal Inference
    • Example | Union combination
    • Example | Non literal combination
    • Understanding Tuple types
    • Annotating Tuple types
    • Using tuple for API responses
    • Tuples with Interfaces
    • Specifying optional properties
    • Read only tuples
    • Array assertion inference
    • Rest parameter elements
    • Lab Experiment: Tuple annotation
    • Few Important concepts
    • Type assertions
    • Non null assertion
    • Impossible coersions
    • Congratulations! You did it.
  • React, Redux & Material UI Workshop
    • Introduction to the workshop
    • Welcome to the React workshop
    • A React Journey.
    • What is React ?
    • What is the “Virtual DOM” ?
    • The JSX syntax
    • Styling JSX elements with JSS
    • Render components inside JSX
    • Incremental bundle size of React apps
    • A walkthrough of React website
    • The strong era of React
    • What is Redux ?
    • Three principles of Redux
    • Redux-Saga workflow
    • A walkthrough of Redux official website
    • Redux dev tools chrome extension
    • Redux state management
    • Project MSK Todos – High level UI design
    • Todo Item component design
    • Ready … Steady …. Wait !
    • Create the react app from scratch
    • Installing dependencies
    • Redux-Sage setup from scratch
    • Material UI website walkthrough
    • Let’s add an AppBar on top
    • Adding classes with MakeStyles
    • Adding a New todo
    • Marking Todo as completed
    • Deleting todos
    • Marking Todo as important
    • TodoAdder component issues
    • State persistence in browser
    • A walkthrough of JEST documentation
    • Setting up JEST in the app
    • Write few unit tests
    • Generate coverage report
    • JEST testing Quiz
    • Download the source code
    • React, Redux & M-UI Test
    • Congratulations on completing the workshop
  • Designing Scalable Frontend Systems
    • What is the session about ?
    • Session introduction
    • Welcome to the session
    • About the instructor
    • The facebook background
    • Design … Round … Ready
    • Agenda – What will you learn ?
    • Diagrams and pseudo code
    • Let’s get started !
    • The crypto exchange order book
    • Interviewer’s expectations
    • Diffferences between HLD & LLD
    • A quick recap of the question
    • Front-tier, Mid-tier and DB client
    • Template based rendering unit
    • Quick Summary of HLD
    • Let’s get started with LLD
    • The sequence of explanation
    • Choosing the frontend frameworks
    • Representing the tech stack
    • Identifying the UI components
    • Determining API schema definitions
    • Identify the template definition
    • Let’s write some pseudo code
    • Quick summary of LLD
    • Getting the order book data
    • Placing a buy order
    • A quick recap of the session
    • Download the design file
    • Congratulations! You are now design round ready.
  • Frontend System Design Guidance
    • Introduction
    • A word before we begin !
    • Experience matters !
    • Intro to frontend system design guidance
    • Wear the designer’s shoes
    • Target devices
    • Progressive web apps
    • Summary
    • Importance of SEO
    • Open graph standard
    • Collaboration with product
    • Workflow scenarios
    • Micro frontend methodology
    • Deciding the app state
    • UI logic VS Business logic
    • Minimum Viable Product
    • Identifying service requirements
    • Volume of operation
    • Performance optimisation
    • Smooth VS Fast
    • Web performance is important !
    • Tuning techniques
    • Optimising images
    • Handling APIs
    • Attention to detail.
    • Browser tools
    • Documentation
    • Exercise – Design a Movie booking app.
    • Design an online shopping website with cart checkout.
    • Introduction to role based management
    • Governance
    • Instrumentation
    • Versioning artefacts
    • Work load vs Working hours.
    • Internationalization
    • Accessibility
    • Quality assurance, control & techniques
    • Future roadmap
    • Discover Web APIs
    • Closing note
  • Software engineering career advice
    • The introduction
    • A quote for success ( as a programmer )
    • Over preparing for interview
    • Tip to connect wirth product managers.
    • Focus on your soft skills | convincing ability
    • Management is not for everyone
    • Why to be a team player ?
    • Liking the work you do daily.
    • About changing jobs / companies.
    • Investing your hard earned salary
    • Diversifying your portfolio
    • Importance of back contribution
    • Standing out from the crowd
    • Connecting with adjacent teams
    • Exhibiting characteristics for promotion
    • Don’t be an engineer with managers
    • When is it time to rethink about your job ?
    • The right time to prepare for interviews
    • Salary negotiation with levels.fyi
    • Restricted Stock Units
    • Dealing with multiple job offers
    • The bar raiser round
    • Don’t think about money – 5 years
    • Are career breaks ok to have ?
  • Algorithms in Javascript
    • Crush your next goal !
    • Binary search
    • Linear search
    • Bubble sort
    • Count sort
    • Insertion sort
    • Merge sort
    • Quick sort
    • Selection sort
    • Big O – Cheat sheet
  • Interview Questions & Solutions
    • Utilizing the 40 minutes of coding round
    • The future of interviews.
    • Important data structure for frontend interviews
    • DOM Finder | Facebook Interview Question
    • DOM Finder | Algorithm
    • DOM FInder | Program
    • Event Emitter | Facebook Interview Question
    • Event Emitter | Program
    • CTC v/s VTC
    • Binary Strings | Google Interview Question
    • Binary Strings | Algorithm
    • Binary Strings | Program
    • BST ( Using JS Closures )
    • About closures
    • BST | Program
    • Consistency Matters !
    • Reverse String | Oracle Interview Question
    • Reverse String | Algorithm
    • Reverse String | Program
    • Two Stacks | Google Interview question
    • Two Stacks | Algorithm
    • Two Stacks | Program
    • Find Triplets | Oracle Interview Question
    • Find Triplets | Program ( Naive approach )
    • Find Triplets | Program ( Sorting approach )
    • Find Triplets | Program ( Hashing approach )
    • Subarray Sum | Cerner Interview Question
    • Subarray Sum | Program ( Naive approach )
    • Subarray Sum | Program ( Better approach )
    • Longest Subtring | Walmart Interview Question
    • Longest Subtring | Program
    • String Finder | Walmart Interview Question
    • String Finder | Program
    • Bracket Detector | JP Morgan Interview Question
    • Bracket Detector | Program
  • Frequently Asked Questions
    • Making project by looking at videos.
    • Backend developer wants to switch.
    • UG student wants to be full-stack.
    • More resources to learn JS.
    • DS, Algo for frontend role.
    • Preparing in CSS for interview.
    • Regarding Babel transpiler.
    • Important Data-structure for frontend.
    • Regarding promises in Javascript.
    • Manager knows only backend.
    • JS interviewer’s expectations.
    • Knowing backend for promotions.
    • Working on old technologies.
    • Regarding IIFE pattern in JS.
    • Overwhelming content online.
  • Software Engineering Life
    • DO’s & DONT’s of LinkedIn job referral.
    • Online interviews ( Audio only )
    • Zoom interview tips ( Article )
    • Effective ways to get a linkedin job referral
    • Software Engineer v/s Architect
    • Tips to get promoted to a Senior Software engineer ( article )
    • Get promoted to Senior software engineer ( Audio only )
    • 12 types of devs ( Audio only )
    • Types of software developers in office ( article )
    • Professional relationships in IT
    • Mistakes you should avoid as a Manager in IT
    • Reasons you should avoid a job change in IT industry
    • Ways to overcome – The Low Salary Syndrome.
    • Types of 1 on 1 meetings
    • Signs your co-worker is quitting the job ( Humorous article )
    • Roadmap for a full-stack web developer ( Audio only )
    • Learning Webpack
    • 5 tips for effective office staff meetings.
  • BONUS Tips & tricks
    • NPM vs PNPM
    • Webpack React Boilerplate

 

The Complete Frontend Engineering Interview Preparation KitThe Complete Frontend Engineering Interview Preparation Kit

Time remaining or 409 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate