Junior Level

1. Question: What is CSS Grid? Answer: CSS Grid is a layout system that allows you to create two-dimensional layouts on the web. It divides the page into rows and columns, making it easier to position elements. For example:

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. Question: What is the "DOMContentLoaded" event? Answer: The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. It's useful for running scripts once the DOM is ready:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Question: What is the "z-index" property in CSS? Answer: The z-index property controls the stacking order of elements. Elements with a higher z-index are displayed in front of elements with a lower z-index. For example:

   .box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

1. Question: What is "this" in JavaScript? Answer: This in JavaScript refers to the current execution context. The value of this can change depending on how a function is called. For example:

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. Question: What are CSS selectors? Answer: CSS selectors are patterns used to select the elements you want to style. There are several types of selectors such as class, ID, and type selectors. For example:

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. Question: What is "localStorage" in JavaScript? Answer: localStorage is an API that allows you to store data in the user's browser persistently. Data stored in localStorage does not expire and remains even after closing the browser. For example:

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. Question: What is "event bubbling"?
   
   Answer: "Event bubbling" is an event propagation mechanism in which an event starts in the innermost element and propagates to the outer elements. For example, if a button inside a

   is clicked, the click event will be fired first on the button and then on the

   .

2. Question: What is a "callback function"?
   
   Answer: A "callback function" is a function passed as an argument to another function, which can be called at a later time. For example:
   

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. Question: What is "responsive design"? Answer: "Responsive design" is a web design approach that aims to create pages that adapt to different screen sizes and devices. This is often achieved using media queries in CSS. For example:

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. Question: What is "fetch API"?
   
   Answer: The fetch API is a modern interface for making HTTP requests in JavaScript. It returns a Promise that resolves the request's response. For example:
   

      .box1 {
          position: relative;
          z-index: 1;
      }
      .box2 {
          position: relative;
          z-index: 2; /* box2 será exibido na frente de box1 */
      }
   

Full Level

1. Question: What is "CORS"?
   
   Answer: CORS (Cross-Origin Resource Sharing) is a security mechanism that allows restricted resources on a web page to be requested from a different domain than the one that served the page. This is important to protect user data.

2. Question: What is the "virtual DOM" in React?
   
   Answer: The "virtual DOM" is a lightweight representation of the real DOM. React uses the virtual DOM to optimize updating the DOM, allowing it to make changes more efficiently by comparing the virtual DOM to the real DOM and applying only the necessary changes.

3. Question: What are "props" in React?
   
   Answer: "Props" are a mechanism for passing data between components in React. They allow you to pass data from a parent component to a child component. For example:
   

      const obj = {
          name: "John",
          greet: function() {
              console.log("Hello, " + this.name);
          }
      };
      obj.greet(); // "Hello, John"
   

4. Question: What is "state" in React?
   
   Answer: The "state" is an object that represents the part of the application that can change. It is used to store data that affects the rendering of the component. For example:
   

      .className { /* Seleciona todos os elementos com a classe "className" */
          color: blue;
      }
      #idName { /* Seleciona o elemento com o ID "idName" */
          font-size: 20px;
      }
   

5. Question: What is "React Router"?
   
   Answer: React Router is a library that allows navigation between different components in a React application, facilitating the creation of single page applications (SPA). It allows you to define routes and render components based on URL.

6. Question: What are "hooks" in React?
   
   Answer: Hooks are functions that allow you to use state and other React resources in functional components. useState and useEffect are examples of hooks. For example:
   

      .grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
      }
   

7. Question:What is "Webpack"?
   
   Answer: Webpack is a module wrapper for JavaScript applications. It allows you to bundle JavaScript, CSS, and other resource files into a single file or multiple production-optimized files.

8. Question:What is "Babel"?
   
   Answer: Babel is a transpiler that allows you to write modern JavaScript code (ES6) and convert it to a version compatible with older browsers. It is often used in conjunction with Webpack.

9. Question: What is "SASS"?
   
   Answer: SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that allows you to use variables, nesting and functions, making CSS more dynamic and easier to maintain. For example:
   

      document.addEventListener("DOMContentLoaded", function() {
          console.log("DOM completamente carregado e analisado");
      });
   

10. Question:What is "AJAX"?
    
    Answer: AJAX (Asynchronous JavaScript and XML) is a technique that allows you to make asynchronous requests to the server without reloading the page. This is often used to update parts of a web page dynamically.

Senior Level

1. Question: What is "microservices architecture"?
   
   Answer: Microservices architecture is an architectural style that structures an application as a set of small, independent services that communicate with each other. This allows different teams to work on different parts of the application more efficiently.

2. Question: What is "SSR" (Server-Side Rendering)?
   
   Answer: SSR is a technique where the rendering of a web application is done on the server instead of on the client. This can improve performance and SEO as the content is sent to the client already rendered.

3. Question: What is "CSR" (Client-Side Rendering)?
   
   Answer: CSR is a technique where the rendering of a web application is done on the client, usually using JavaScript. This allows for a more interactive user experience, but can have a negative impact on SEO if not implemented correctly.

4. Question:What is "Redux Saga"?
   
   Answer: Redux Saga is a library that facilitates the management of side effects in Redux applications. It uses generators to handle asynchronous operations like API calls in a more readable and organized way.

5. Question: What is the "Context API" in React?
   
   Answer: The Context API is a way to pass data through the component tree without having to manually pass props at each level. This is useful for sharing global data such as themes or user information.

6. Question: What is "TypeScript"?
   
   Answer: TypeScript is a superset of JavaScript that adds static typing to code. It allows you to define types for variables, functions and objects, helping to avoid run-time errors.

7. Question: What is "Progressive Web App" (PWA)?
   
   Answer: PWAs are web applications that offer a native app-like experience, including offline support, push notifications, and home screen installation. They are built using standard web technologies.

8. Question: What is "GraphQL"?
   
   Answer: GraphQL is a query language for APIs that allows clients to request exactly the data they need. This is in contrast to REST APIs, where clients may receive more data than necessary.

9. Question: What is "Web Accessibility"?
   
   Answer: Web accessibility refers to the practice of making web applications usable by people with disabilities. This includes using semantic tags, ARIA attributes and ensuring content is keyboard navigable.

10. Question: What is the "Service Worker"?
    
    Answer: A Service Worker is a script that the browser runs in the background, separate from a web page, enabling functionality such as caching, push notifications, and background synchronization. It is essential for building PWAs.

Bibliography

The information presented has been extracted and adapted from several reliable sources, including:

1. Glassdoor - A site where people share their interview experiences and common questions.

   • Glassdoor

2. MDN Web Docs - Comprehensive documentation on HTML, CSS and JavaScript.

   • MDN Web Docs

3. JavaScript.info - A modern guide to JavaScript, covering everything from the fundamentals to advanced topics.

   • JavaScript.info

4. React Documentation - The official React documentation, which provides detailed information about the library.

   • React Documentation

5. CSS-Tricks - A website with tips and tutorials about CSS and front-end development.

   • CSS-Tricks

These sources are widely recognized in the web development community and are great resources for deepening front-end knowledge.

The above is the detailed content of Front end Concepts II. For more information, please follow other related articles on the PHP Chinese website!