Front-end Fresher/Junior/Middle Interview (with ReactJS)

fe-fresher-junior-middle-interview-reactjs

#fe-fresher-interview (50%)
#fe-junior-interview (40%)
#fe-middle-interview (10%)

HTML

• <!DOCTYPE> tag?
• Name all the Semantic HTML tags
• What is the difference between <script defer src=”...”> and <script async src=”...”>

CSS

• How many ways to apply CSS to HTML?
• Flex and Grid, Which one? Why and When?
• What is CSS preprocessor? Name all the CSS preprocessors you know?
• What is BEM?
• Name all the CSS libraries/frameworks you know?
• What is Atomic CSS?
• Name all the CSS combinators you know.
• Create Element below with CSS
  

JS

• var/let?
• Pass by reference?
• What is Scope?
• How many ways to add an event?
• Event Capturing and Event Bubbling?
• What is Callback Hell? How to solve it?
• Event loop?
• console.log(this) <= What is this?
• Algorithm:

const testcases = [
  {
    input: "aa",
    output: "Empty String",
  },
  {
    input: "abba",
    output: "Empty String",
  },
  {
    input: "cabba",
    output: "c",
  },
  {
    input: "cabbbbac",
    output: "Empty String",
  },
]

ReactJS

• What is ReactJS and why do you use it?
• What is JSX?
• What is Virtual DOM?
• Prop? State?
• Difference between Class component and Function Component?
• What is Lifecycle?
• Form Handling.
• Name all the React Hooks you know
• What is Redux and when do you use it?
• Redux middleware?
• Typescript?
• Make a FilterComponent for Table:
  
  INPUT:
  
  OUTPUT:
  

HTML, CSS Excercise

• Estimate and make the template below: (HTML, CSS)
  
• Estimate and create the component below: (HTMl, CSS, JS)
  

Order Stuffs

• Git flow?
• Design? (Figma, AdobeXD, Sketch…)
• Mock API?
• webpack
• NodeJS, npm, RESTfulsAPI...
• JWT?
• Unit Test?
• Postman, swagger, ...