**HTML/CSS and Web Components**
1. **HTML Elements**:
- **Q**: What’s the purpose of the `<main>` and `<section>` tags in HTML5?
- **A**: The `<main>` tag is used to enclose the dominant content of a webpage, such as the
primary text, images, and links. The `<section>` tag defines sections within the document, usually
with a heading, to group related content.
2. **CSS Flexbox vs. Grid**:
- **Q**: When would you use CSS Flexbox vs. CSS Grid?
- **A**: Use **Flexbox** for a one-dimensional layout (either row or column), ideal for aligning
items within a row or column. **CSS Grid** is better for two-dimensional layouts, where you need to
define both rows and columns, such as in complex web page layouts.
3. **CSS Selectors**:
- **Q**: Explain the difference between `.class`, `#id`, and `*` selectors in CSS.
- **A**: `.class` selects elements by class name, `#id` selects elements by ID (unique per page), and
`*` selects all elements. Example:
```css
.my-class { color: blue; }
#my-id { font-size: 20px; }
* { margin: 0; }
```
4. **Responsive Design**:
- **Q**: How would you create a responsive design without using a CSS framework?
- **A**: Use media queries to adjust layout for various screen sizes.
```css
body {
font-size: 16px;
}
@media (max-width: 600px) {
body {
font-size: 14px;
```
5. **Web Components and Shadow DOM**:
- **Q**: How does the Shadow DOM prevent styles from leaking out of a component?
- **A**: Shadow DOM encapsulates styles, preventing them from affecting elements outside the
component and vice versa.
```html
<script>
const template = document.createElement('template');
template.innerHTML = `
<style>
.shadow-style {
color: red;
</style>
<div class="shadow-style">Inside Shadow DOM</div>
`;
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' }).appendChild(template.content.cloneNode(true));
customElements.define('my-component', MyComponent);
</script>
```
JavaScript Basics and Advanced Concepts**
1. **Scope and Closures**:
- **Q**: What’s a closure in JavaScript? Provide an example.
- **A**: A closure is a function that remembers its lexical scope even when the function is
executed outside that scope.
```javascript
function makeCounter() {
let count = 0;
return function() {
return count++;
};
const counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1
```
2. **Array Methods**:
- **Q**: Explain the difference between `map()`, `forEach()`, and `filter()`.
- **A**: `map()` transforms each element in an array and returns a new array, `forEach()` iterates
over an array but doesn’t return a new array, and `filter()` returns a new array containing elements
that match a condition.
3. **Async/Await**:
- **Q**: How does async/await work, and why is it useful?
- **A**: `async/await` syntax is a way to handle asynchronous code in a more readable way than
traditional promises.
```javascript
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
fetchData();
```
4. **Prototypal Inheritance**:
- **Q**: How does inheritance work in JavaScript?
- **A**: In JavaScript, objects inherit properties from other objects through the prototype chain.
```javascript
function Animal(name) {
this.name = name;
Animal.prototype.speak = function() {
console.log(this.name + ' makes a noise.');
};
const dog = new Animal('Dog');
dog.speak(); // Dog makes a noise.
```
**Angular and Frameworks**
1. **Angular Lifecycle Hooks**:
- **Q**: Describe some Angular lifecycle hooks and their usage.
- **A**: Common hooks include `ngOnInit` (called after data-bound properties are initialized),
`ngOnDestroy` (called before the component is destroyed), and `ngAfterViewInit` (called after view is
initialized).
2. **Component Communication**:
- **Q**: How would you pass data between Angular components?
- **A**: Using `@Input` and `@Output` decorators.
```typescript
// parent.component.html
<app-child [childData]="dataFromParent" (childEvent)="onChildEvent($event)"></app-child>
```
3. **State Management**:
- **Q**: How would you manage state in an Angular application?
- **A**: By using services, Angular’s built-in RxJS observables, or external libraries like NgRx.
4. **Angular Dependency Injection**:
- **Q**: Explain the role of Dependency Injection in Angular.
- **A**: Dependency Injection (DI) allows services and components to be easily injected into
classes to maintain loose coupling.
5. **Lazy Loading**:
- **Q**: How do you implement lazy loading in an Angular app?
- **A**:
```typescript
const routes: Routes = [
{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
];
```
**Design Systems and UI/UX Principles*
1. **UI Components**:
- **Q**: Describe the process of creating reusable UI components.
- **A**: Components should be encapsulated, follow single-responsibility, and be customizable
with props or attributes.
2. **Accessibility**:
- **Q**: How would you make sure a button is accessible to screen readers?
- **A**:
```html
<button aria-label="Close Menu">X</button>
```
3. **Design System Integration**:
- **Q**: How would you integrate a design system in a front-end application?
- **A**: Integrate with a component library (e.g., Material UI) and ensure it follows consistent
styles and accessibility guidelines.
4. **User Testing for UI Improvements**:
- **Q**: How would you approach A/B testing in a front-end application?
- **A**: Use tools like Google Optimize to test different versions of a UI element, measure user
engagement, and select the best-performing option.
