Add frontend questions (#5831)

src/data/question-groups/frontend/content/async-ops-js.md

@@ -0,0 +1,6 @@
+There are 4 main ways in which JavaScript allows developers to handle asynchronous calls. In the end, the result is always the same, but the final structure of the code and the way to reason about it is considerably different.
+
+- **Callbacks**. They allow you to set up a function to be called directly once the asynchronous operation is done.
+- **Promises**. Promises represent the eventual completion of an asynchronous operation, and they provide a simpler and more intuitive syntax to specify callbacks to be called on success and failure of the operation.
+- **Async/Await**. The final evolution of the promises syntax. It’s mainly syntactic sugar, but it makes asynchronous code look synchronous, which in turn makes it a lot easier to read and reason about.
+- **Event listeners**. Event listeners are callbacks that get triggered when specific events are fired (usually due to user interactions).

src/data/question-groups/frontend/content/block-inline-elems.md

@@ -0,0 +1,5 @@
+In CSS, the difference between **inline**, **inline-block**, and **block** elements is on the way they’re rendered in the web page:
+
+- **Inline**: Inline elements don’t have a width or height. Instead, they don’t start on a new line and take up only the width that’s required (based on their content). Examples: <span>, <a>.
+- **Inline-block**: Just like inline elements, here the DOM elements do not start on a new line, however, they do allow you to set a height and width on them. Example: <img>.
+- **Block**: Elements start on a new line, taking up the full width available by default. Their width and height can be set by you. Examples: <div>, <p>.

src/data/question-groups/frontend/content/box-model.md

@@ -0,0 +1,8 @@
+The CSS box model describes the rectangular boxes generated for elements in the DOM. The box model is composed of the following layers:
+
+1. **Content**: The innermost part, where text and images appear.
+2. **Padding**: The space between the content and the border.
+3. **Border**: The outer edge of the padding, surrounding the element.
+4. **Margin:** The space outside the border, separating the element from others.
+
+By controlling each layer individually, you can define the look of each element in the user interface.

src/data/question-groups/frontend/content/browser-render.md

@@ -0,0 +1,9 @@
+The process of rendering a web page in the browser involves several steps:
+
+1. Parsing the HTML.
+2. Parsing the CSS and applying styles.
+3. Calculating the position of each element in the layout of the page.
+4. Painting the actual pixels in the screen, while at the same time sorting them into layers.
+5. Composing all layers together, to render the website on screen. This step is taking into account z-index values, opacity values and more.
+6. Running JavaScript code.
+7. Loading the asynchronous resources.

src/data/question-groups/frontend/content/client-storage.md

@@ -0,0 +1,5 @@
+**Cookies** are small pieces of data stored in web browsers. They are mainly used for keeping information between HTTP requests, such as user authentication, session management, and tracking user behavior
+
+On the other hand, **sessionStorage** is designed for temporary storage and is accessible only within the same session (i.e.., while the browser window or tab is open). Data stored in sessionStorage is lost when the browser window is closed.
+
+Finally, **localStorage** is similar to **sessionStorage** but persists even when the browser window or tab is closed and reopened. It provides long-term storage for web applications. They are very similar to cookies, however, the size limitations on localStorage are quite big compared to cookies, making it a much better alternative when storing large datasets.

src/data/question-groups/frontend/content/closures.md

@@ -0,0 +1,3 @@
+When a function is defined within another function, it retains access to the variables and parameters of the outer function, even after the outer function has finished executing. That link, between the inner function and its scope inside the outer function is known as “closure”
+
+You can use them to create private variables that can only be accessed by the inner function, you can even use them to create complex objects with access to a rich context that is only available globally to them.

src/data/question-groups/frontend/content/critical-css.md

@@ -0,0 +1,3 @@
+Remove the CSS rules from the CSS files and inline them into the main “<head>” element of your website.
+
+By doing it like this, you remove the loading time of that code, as it loads immediately once the main file loads. The rest, the non-critical rules, can be loaded once the main resource loads (the main CSS file).

src/data/question-groups/frontend/content/csp.md

@@ -0,0 +1,7 @@
+Content Security Policy (CSP) is a security standard that helps to avoid cross-site scripting (XSS) attacks and other code injection attacks by defining and enforcing a whitelist of approved sources, such as scripts, stylesheets, images, and other resources.
+
+The main benefits are:
+
+- **Better Security**: CSP helps protect websites and web apps against various types of attacks, including XSS and data injection.
+- **More Contro**l: Developers can define fine-grained policies to control the sources from which content can be loaded.
+- **Improved Compliance**: Helps meet security compliance requirements, such as those outlined in OWASP Top 10.

src/data/question-groups/frontend/content/css-grid.md

@@ -0,0 +1,3 @@
+To create a grid layout, you have to first specify the “display:grid” property on the containing element, and then define the structure of the grid, by using the “grid-template-rows” and “grid-template-columns” properties.
+
+Now simply place the elements inside the grid container and specify the “grid-column” or “grid-row” properties.

src/data/question-groups/frontend/content/css-specificity.md

@@ -0,0 +1,8 @@
+CSS specificity is used to determine which set of styles to apply on any given element when there are overlapping styles (like several rules setting the font-size of the same element).
+
+The way it works is by applying the following order of precedence:
+
+1. First, any inline style will override any other style.
+2. Second, any ID-based style will override anything but inline styles.
+3. Third, class-based selectors will override anything but inline and ID-based styles.
+4. Finally, type selectors can be overridden by any other type of selectors.

src/data/question-groups/frontend/content/css-variables.md

@@ -0,0 +1,3 @@
+Just like variables in programming languages, CSS variables can be set by developers and reused across the entire CSS stylesheets. They’re great for centralizing global values that are used throughout the web site’s code.
+
+They’re also heavily used by CSS frameworks to set constants such as the value of colors (i.e. “black” being “#222” instead of “000”.-

src/data/question-groups/frontend/content/dom.md

@@ -0,0 +1 @@
+The Document Object Model (DOM) is an API for web documents. It represents the structure of an HTML web page as a tree of nodes, where each node corresponds to a part of the document (i.e. an element, an attribute, or text).

src/data/question-groups/frontend/content/em-vs-rem.md

@@ -0,0 +1,6 @@
+![EM vs REM in CSS](https://assets.roadmap.sh/guest/em-vs-rem-css-jwgx8.png)
+
+They’re both relative units of measurement, however, they’re relative to different things:
+
+1. **“em”** units are relative to the font size of their parent element. So if the parent element has a font size of 20px, then setting a “2em” font size, would equal to 40px.
+2. **“rem”** units are “root em”, which means they’re relative to the web page’s root element (the “<html>” element).

src/data/question-groups/frontend/content/event-delegation.md

@@ -0,0 +1,5 @@
+Event delegation is a technique where you define an event handler for a particular event as part of the parent element that contains the elements that will actually trigger the event.
+
+![Event Delegation in JavaScript](https://assets.roadmap.sh/guest/event-delegation-explained-5e2vt.png)
+
+When the event is triggered, it’ll bubble up in the DOM hierarchy until it reaches the parent’s event handler.

src/data/question-groups/frontend/content/event-listeners.md

@@ -0,0 +1,3 @@
+To add an event listener on an element, you have to first “get” that element through one of the many methods of the document object (i.e. getElementById, etc) and then use the addEventListener method of the obtained object.
+
+The method will receive the event name (i.e. ‘click’, ‘keyup’, ‘mouseup’, etc), the event handler function and, optionally, a boolean indicating whether the event should be captured during the capturing phase.

src/data/question-groups/frontend/content/event-loop-js.md

@@ -0,0 +1,10 @@
+The event loop is a core concept in JavaScript, and it allows for the execution of asynchronous code.
+
+![Event loop in JavaScript](https://assets.roadmap.sh/guest/javascript-event-loop-explained-d92hx.png)
+
+The way it works, is as follows:
+
+1. **Call Stack**: JavaScript executes your code on a single thread using a call stack, where function calls are added and executed one by one. When a function ends, it's removed from the stack.
+2. **Async calls**: For asynchronous operations, JavaScript uses Web APIs provided by the browser. These operations are offloaded from the call stack and handled separately.
+3. **Tasks Queue**: Once an asynchronous call is done, its callback is placed in the task queue.
+4. **Event Loop**: The event loop constantly checks the call stack and the task queue. If the call stack is empty, it takes the first task from the queue and pushes it onto the call stack for execution. This cycle repeats indefinitely.

src/data/question-groups/frontend/content/flexbox-layout.md

@@ -0,0 +1,4 @@
+To create a flexbox layout, you have to take care of 2 main steps:
+
+1. Set up the container element by applying the “display:flexbox” CSS property to it.
+2. Set up the flexbox properties for each element inside the container (something like “flex:1” would suffice).

src/data/question-groups/frontend/content/id-vs-class.md

@@ -0,0 +1,10 @@
+An **id** is a unique identifier for a single HTML element. A **class** is a reusable identifier that can be applied to multiple elements.
+
+![ID vs Class in HTML](https://assets.roadmap.sh/guest/css-classes-vs-id-example-9ufsl.png)
+
+You’d want to use an **id** when you need to address a single element either through CSS or JavaScript. And you’ll want to use a **class** when you need to address a group of DOM elements.
+
+In CSS:
+
+- **#id** selects a specific element with that id.
+- **.class** selects all elements with that class.

src/data/question-groups/frontend/content/improve-web-perf.md

@@ -0,0 +1,7 @@
+The main set of metrics to monitor for web apps are:
+
+1. First Contentful Paint (FCP): Time until the first piece of content is rendered.
+2. Largest Contentful Paint (LCP): Time until the largest content element is rendered.
+3. Time to Interactive (TTI): Time until the page is fully interactive.
+4. Total Blocking Time (TBT): Total time during which the main thread is blocked.
+5. Cumulative Layout Shift (CLS): Measures visual stability.

src/data/question-groups/frontend/content/js-promises.md

@@ -0,0 +1 @@
+Promises are JavaScript objects that represent the eventual completion of an asynchronous call. Through promises you’re able to handle the successful or failed execution of the asynchronous call.

src/data/question-groups/frontend/content/media-queries.md

@@ -0,0 +1,3 @@
+Media queries are a feature in CSS that allow Front End developers to apply different styles to a document based on various characteristics of the device or viewport. For example, you can set different styles based on the device’s width, height, orientation, or type.
+
+Through media queries we can achieve responsive design allowing styles to adapt to different screen sizes and device capabilities.

src/data/question-groups/frontend/content/null-vs-undefined.md

@@ -0,0 +1,3 @@
+In JavaScript, “undefined” is the default value new variables take, and it means the variable has been defined but it hasn’t been assigned any value just yet.
+
+And “null” is actually a value that signals “no value” or “no object”, it is specifically assigned to the variable by the developer.

src/data/question-groups/frontend/content/optimize-assets.md

@@ -0,0 +1,4 @@
+There are different techniques to improve loading times, depending on the asset type, for example:
+
+- CSS & JavaScript files should be minimized and compressed.
+- Images can be compressed when you’re saving them or through the use of specialized software, like [JPEGOptim](https://github.com/tjko/jpegoptim) or [ImageOptim](https://imageoptim.com/mac). Just make sure you don’t lose any quality during the process.

src/data/question-groups/frontend/content/same-origin-policy.md

@@ -0,0 +1,5 @@
+The same-origin policy is a security feature in browsers designed to prevent a web site from accessing data (like importing a script, or sending a request to an API) from another site.
+
+This policy helps protect users from malicious scripts that try to steal sensitive data from other websites, such as cookies, local storage, or content
+
+A way to overcome this limitation is through CORS (Cross-Origin Resource Sharing). As long as the server specifies which domain it can receive requests from, and the client app sends the right headers, they will be able to interact with each other, even if they’re not in the same domain.

src/data/question-groups/frontend/content/seo-best-practices.md

@@ -0,0 +1,12 @@
+Purely from the HTML side:
+
+- **Use Semantic HTML**: Use tags like <header>, <nav>, <main>, <article>, <section>, and <footer> to provide meaningful structure.
+- **Proper Heading Hierarchy**: Use headings (<h1> to <h6>) correctly, making sure <h1> is used once per page for the main title, followed by <h2>, <h3>, etc.
+- **Meta Tags**: Include relevant <meta> tags, such as description, keywords, and viewport, to provide metadata about the website.
+- **Alt Attributes on images**: Use alt attributes for images to describe the content, improving accessibility and search engine understanding.
+
+On top of that:
+
+- **Internal Linking**: Make sure to use internal links to connect content within your web site, helping search engines crawl and understand the site structure.
+- **Mobile-Friendly Design**: Code your site and CSS with a mobile-first mindset. Ensuring the site is responsive and mobile-friendly to improve user experience and ranking on search engines.
+- **Fast Loading Times**: Try to optimize images, use efficient code, and leverage caching to improve page load speeds. The faster the page loads, the bigger the advantage it’ll have against other similar results on the SERP.

src/data/question-groups/frontend/content/service-workers.md

@@ -0,0 +1 @@
+Service workers are scripts that run in the background of a web application, separate from the web page’s main thread, and provide features like offline caching, push notifications, and background synchronization.

src/data/question-groups/frontend/content/ssr-when.md

@@ -0,0 +1,7 @@
+Server-side rendering (SSR) is a technique in which a web server generates the HTML content of a web page and sends it to the client (usually a web browser) as a fully rendered document. This is the opposite of what naturally happens with client-side rendering (CSR), where the browser downloads a minimal HTML page and then uses JavaScript to render the content dynamically.
+
+There are several ideal use cases for SSR:
+
+- **Content-rich websites**. For example, new sites, blogs, etc.
+- **SEO-heavy applications**. When the success of the web app relies on SEO, this approach can greatly improve the performance of the site (and because of that, the SEO performance).
+- **Progressive web applications**. When the application needs to render fast to provide a fast and performance user experience, the application can initially be rendered in the server, and then hydrated in the client for subsequent integrations.

src/data/question-groups/frontend/content/state-mgmt-spa.md

@@ -0,0 +1,8 @@
+Without a full framework or library like React or Vue.js, properly handling state management is not a trivial task.
+
+Some options available through the language itself are:
+
+- **Global Variables**: You can use global variables, or perhaps a global object to centralize state. The problem with this approach is that it can become quite unmanageable for large applications. It’s also a lot harder to maintain local state inside single components.
+- **Module Pattern**: You can use this pattern to encapsulate state and provide a clear API to manage it. You would have to instantiate local instances of these modules for individual components.
+- **Pub/Sub Pattern**: This option is more sophisticated, and it decouples state changes using event-driven architecture. It’s a more complex solution, but it provides a bigger flexibility.
+- **State Management Libraries**: You can always use something like [Redux](https://redux.js.org/) or similar libraries without frameworks.

src/data/question-groups/frontend/content/tree-shaking.md

@@ -0,0 +1,7 @@
+Tree shaking is a technique used in JavaScript module bundlers, like Webpack or Vite, to remove unused code from the final bundled output.
+
+Main benefits include:
+
+1. **Reduced Bundle Size:** Removing unused code reduces the size of the JavaScript bundle sent to the client, improving load times and reducing bandwidth usage.
+2. **Improved Performance:** Smaller bundle sizes can lead to faster parsing and execution times, resulting in improved performance and responsiveness of the web application.
+3. **Better Resource Utilization:** Developers can write modular code without worrying about unused dependencies bloating the final bundle size.

src/data/question-groups/frontend/content/vdom.md

@@ -0,0 +1,14 @@
+![Virtual DOM](https://assets.roadmap.sh/guest/virtual-dom-example-7ynkg.png)
+
+The way the virtual DOM works is the following:
+
+1. The entire user interface is copied into an in-memory structure called “virtual DOM”, which is a lightweight version of the actual DOM.
+2. When state changes and the UI needs to be updated, a new virtual DOM is created with the updated state.
+3. Then a diff is made between the new virtual DOM and the previous version.
+4. The system will then calculate the least amount of changes required to achieve the new state, and it’ll apply those changes. Only the nodes that need to be updated are touched, which minimizes direct manipulation of the real DOM.
+
+As for advantages:
+
+- **Performance optimization**: By only updating specific nodes within the real DOM, this technique reduces the number of updates, reflows and repaints on the UI. Directly affecting the performance of the app.
+- **Cross-platform**. The virtual DOM provides a layer of abstraction between the application and the actual API that renders the UI. This means the app can be ported into other platforms as long as there is a virtual DOM implementation for that platform.
+- **Consistency**. This technique keeps the UI in sync with the internal state, reducing bugs and inconsistencies.

src/data/question-groups/frontend/frontend.md

@@ -0,0 +1,164 @@
+---
+order: 5
+briefTitle: 'Frontend'
+briefDescription: 'Test, rate and improve your Frontend knowledge with these questions.'
+title: 'Top 30 Popular Front End Developer Interview Questions'
+description: 'Test, rate and improve your Frontend knowledge with these questions.'
+authorId: 'fernando'
+isNew: true
+date: 2024-05-24
+seo:
+  title: 'Top 30 Popular Front End Developer Interview Questions'
+  description: 'Nail your frontend developer interview with these 30 popularly asked questions and answers. Test your knowledge with our quiz cards!'
+  keywords:
+    - 'frontend quiz'
+    - 'frontend questions'
+    - 'frontend interview questions'
+    - 'frontend interview'
+    - 'frontend test'
+sitemap:
+  priority: 1
+  changefreq: 'monthly'
+questions:
+  - question: What is the difference between an id and a class in HTML/CSS?
+    answer: id-vs-class.md
+    topics:
+      - 'Beginner'
+  - question: Can you explain the box model in CSS?
+    answer: box-model.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between inline, inline-block, and block elements?
+    answer: block-inline-elems.md
+    topics:
+      - 'Beginner'
+  - question: What are some SEO best practices when structuring an HTML document?
+    answer: seo-best-practices.md
+    topics:
+      - 'Beginner'
+  - question: What is the Document Object Model (DOM)?
+    answer: dom.md
+    topics:
+      - 'Beginner'
+  - question: How do you add an event listener to an element?
+    answer: event-listeners.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between null and undefined?
+    answer: null-vs-undefined.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between cookies, sessionStorage, and localStorage?
+    answer: client-storage.md
+    topics:
+      - 'Beginner'
+  - question: How does the browser render a website?
+    answer: browser-render.md
+    topics:
+      - 'Beginner'
+  - question: What are media queries?
+    answer: media-queries.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between the em and rem units?
+    answer: em-vs-rem.md
+    topics:
+      - 'Intermediate'
+  - question: How do you create a flexbox layout?
+    answer: flexbox-layout.md
+    topics:
+      - 'Intermediate'
+  - question: Can you explain CSS specificity and how it works?
+    answer: css-specificity.md
+    topics:
+      - 'Intermediate'
+  - question: How can you create a CSS grid layout?
+    answer: css-grid.md
+    topics:
+      - 'Intermediate'
+  - question: What are closures, and how/why would you use them?
+    answer: closures.md
+    topics:
+      - 'Intermediate'
+  - question: Can you explain what event delegation is in JavaScript?
+    answer: event-delegation.md
+    topics:
+      - 'Intermediate'
+  - question: What are promises, and how do they work?
+    answer: js-promises.md
+    topics:
+      - 'Intermediate'
+  - question: How do you optimize website assets for better loading times?
+    answer: optimize-assets.md
+    topics:
+      - 'Intermediate'
+  - question: What are service workers, and what are they used for?
+    answer: service-workers.md
+    topics:
+      - 'Intermediate'
+  - question: What is the Same-Origin Policy in web development?
+    answer: same-origin-policy.md
+    topics:
+      - 'Intermediate'
+  - question: What are CSS variables, and when would you use them?
+    answer: css-variables.md
+    topics:
+      - 'Advanced'
+  - question: How would you implement critical CSS to improve the perceived load time of your web pages?
+    answer: critical-css.md
+    topics:
+      - 'Advanced'
+  - question: How does the event loop work in JavaScript?
+    answer: event-loop-js.md
+    topics:
+      - 'Advanced'
+  - question: What are the different ways to handle asynchronous operations in JavaScript?
+    answer: async-ops-js.md
+    topics:
+      - 'Advanced'
+  - question: How do you handle state management in single-page applications?
+    answer: state-mgmt-spa.md
+    topics:
+      - 'Advanced'
+  - question: How does virtual DOM work, and what are its advantages?
+    answer: vdom.md
+    topics:
+      - 'Advanced'
+  - question: What is server-side rendering, and when might you use it?
+    answer: ssr-when.md
+    topics:
+      - 'Advanced'
+  - question: How do you analyze and improve the performance of a web application?
+    answer: improve-web-perf.md
+    topics:
+      - 'Advanced'
+  - question: What is Content Security Policy (CSP), and how does it improve the security of web applications?
+    answer: csp.md
+    topics:
+      - 'Advanced'
+  - question: What is tree shaking, and how does it help with the performance of a web application?
+    answer: tree-shaking.md
+    topics:
+      - 'Advanced'
+---
+
+Preparing for your front end web development interview is key to achieving a successful outcome, but understanding what kind of questions or topics are going to be asked is not easy.
+
+So to help you get ready for your upcoming front end developer interview, here are 30 technical interview questions about web development with a focus on the front end, in other words, about JavaScript, HTML, and CSS.
+
+Keep in mind that they’re grouped by difficulty into three categories: beginners, intermediate and advanced. Ideally, you should aim to understand all of them, and if you find yourself not able to continue, consider checking out the [Frontend roadmap](https://roadmap.sh/frontend) to figure out what to focus your studies on.
+
+## Preparing for your Front End interview
+
+Before jumping straight into front end interview prep, here are some key points to keep in mind:
+
+1. **Master the Fundamentals**: Before you start to solve complex problems, you need to make sure you have a solid understanding of front end development basics. This includes HTML, CSS, and JavaScript, as well as how they work together to create responsive, interactive web pages. Remember that you have the [Front End roadmap](https://roadmap.sh/frontend) available if you feel you still need to learn more about any of these topics.
+2. **Practice Coding**: You can improve your coding skills through mini-projects or by solving problems on platforms like [LeetCode](https://leetcode.com/) and [HackerRank](https://www.hackerrank.com/). Focus on challenges related to front end development.
+3. **Learn Modern Frameworks and Libraries**: Get to know popular frameworks and libraries such as React, Angular, or Vue.js. Understanding these tools is often crucial for modern front end roles.
+4. **Tackle the foundational tools of your dev workflow**: Make sure you’re comfortable with essential tools and practices such as version control (e.g., Git), testing (unit and integration testing), and build tools (e.g., Vite). These are crucial for any front end role.
+5. **Understand UI/UX Principles**: Understanding basic concepts of design and user experience can set you apart as a front end developer. Try to learn about accessibility, responsive design, and how to create intuitive interfaces.
+6. **Research the Company**: Show some interest in the company you’re interviewing with by learning about their business and products. Prepare some questions to ask during the interview to show you care about the role.
+7. **Improve your communication skills**. This one is not front end-specific, however, it’s always a good idea to invest in your future.
+
+With these tips out of the way, let's now get into some of the most common Front End interview questions that you’ll encounter!
+