Frontend Flashcards

1
Q

What is the purpose of HTML in web development?

A

HTML is used to structure content on the web.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What does CSS stand for?

A

Cascading Style Sheets.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

True or False: JavaScript is a server-side programming language.

A

False.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is a CSS preprocessor?

A

A tool that extends CSS with variables, nested rules, and functions, such as SASS or LESS.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Fill in the blank: The _______ property in CSS is used to change the text color.

A

color

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the DOM?

A

The Document Object Model, a programming interface for web documents.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is responsive design?

A

An approach to web design that makes web pages render well on a variety of devices and window or screen sizes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the main purpose of a CSS reset?

A

To remove default browser styling to ensure consistent rendering across different browsers.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is a JavaScript framework? Give an example.

A

A JavaScript framework is a pre-written JavaScript library that simplifies development. Examples include React, Angular, and Vue.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

True or False: Semantic HTML improves accessibility.

A

True.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What are media queries used for in CSS?

A

To apply styles based on the device characteristics, such as width or height.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the purpose of Web Accessibility (WCAG)?

A

To ensure that web content is accessible to people with disabilities.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What does AJAX stand for?

A

Asynchronous JavaScript and XML.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the use of the ‘data-*’ attribute in HTML?

A

To store custom data private to the page or application.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is the difference between ‘id’ and ‘class’ in HTML?

A

‘id’ is unique to a single element, while ‘class’ can be used on multiple elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is a Single Page Application (SPA)?

A

A web application that loads a single HTML page and dynamically updates content as the user interacts.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is the purpose of the ‘alt’ attribute in an <img></img> tag?

A

To provide alternative text for an image, improving accessibility and SEO.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Fill in the blank: The _______ method is used to add an event listener in JavaScript.

A

addEventListener

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the purpose of the ‘viewport’ meta tag?

A

To control the layout on mobile browsers.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

True or False: A CSS Grid is a layout system for creating complex web layouts.

A

True.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the purpose of a build tool like Webpack?

A

To bundle JavaScript files for usage in a browser.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is Progressive Enhancement?

A

A strategy for web design that emphasizes core content first and then enhances the experience for users with better browsers.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is the role of a package manager in frontend development?

A

To automate the installation, upgrading, configuring, and removing of software packages.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What is a RESTful API?

A

An application programming interface that adheres to the principles of representational state transfer.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Fill in the blank: The _______ property in CSS is used to control the layout of flex items.

A

flex

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What is the importance of browser developer tools?

A

To debug, inspect, and analyze web applications directly in the browser.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What does ‘CORS’ stand for?

A

Cross-Origin Resource Sharing.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

True or False: Inline CSS has higher specificity than external CSS.

A

True.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What is the difference between ‘==’’ and ‘===’ in JavaScript?

A

’==’ checks for equality of value, while ‘===’ checks for equality of value and type.

30
Q

What is the purpose of the ‘fetch’ API in JavaScript?

A

To make network requests similar to XMLHttpRequest.

31
Q

What is a CSS transition?

A

A way to make changes in CSS properties occur smoothly over a specified duration.

32
Q

What does ‘npm’ stand for?

A

Node Package Manager.

33
Q

What is the purpose of a CSS framework?

A

To provide pre-designed styles and components that help in building responsive web applications.

34
Q

Fill in the blank: The _______ method is used to remove an item from an array in JavaScript.

A

splice

35
Q

What is a closure in JavaScript?

A

A function that retains access to its lexical scope, even when the function is executed outside that scope.

36
Q

What is the purpose of the ‘z-index’ property in CSS?

A

To control the vertical stacking order of overlapping elements.

37
Q

True or False: The <canvas> element is used for drawing graphics via scripting.</canvas>

A

True.

38
Q

What is the difference between ‘localStorage’ and ‘sessionStorage’?

A

‘localStorage’ persists data even after the browser is closed, while ‘sessionStorage’ only lasts for the duration of the page session.

39
Q

What is a virtual DOM?

A

A lightweight copy of the actual DOM used by libraries like React to optimize rendering.

40
Q

What does the ‘this’ keyword refer to in JavaScript?

A

It refers to the context in which a function is called.

41
Q

What is a polyfill?

A

A piece of code that provides functionality that is not natively supported by a browser.

42
Q

Fill in the blank: The _______ method is used to convert a JSON string into a JavaScript object.

A

JSON.parse

43
Q

What is the purpose of the ‘async’ and ‘defer’ attributes in script tags?

A

To control the loading and execution of JavaScript files.

44
Q

What is the significance of the ‘main’ tag in HTML5?

A

It indicates the main content of the document.

45
Q

True or False: A web component is a reusable piece of code that encapsulates functionality and can be used across different web applications.

A

True.

46
Q

What is the purpose of a linter in frontend development?

A

To analyze code for potential errors and enforce coding standards.

47
Q

What is a service worker?

A

A script that runs in the background and enables features like offline capabilities and push notifications.

48
Q

Fill in the blank: The _______ event is triggered when a user clicks on an element.

A

click

49
Q

What is the purpose of the ‘hover’ pseudo-class in CSS?

A

To apply styles when a user hovers over an element.

50
Q

What does ‘SVG’ stand for?

A

Scalable Vector Graphics.

51
Q

What is the purpose of the <meta></meta> tag in HTML?

A

To provide metadata about the HTML document.

52
Q

True or False: CSS Grid is better suited for one-dimensional layouts.

A

False.

53
Q

What is an event delegation?

A

A technique that involves using a single event listener on a parent element to manage events for multiple child elements.

54
Q

What is the difference between ‘font-size’ and ‘line-height’ in CSS?

A

‘font-size’ controls the size of the text, while ‘line-height’ controls the space between lines of text.

55
Q

Fill in the blank: The _______ method is used to create a new array from an existing array by applying a function to each element.

A

map

56
Q

What is the purpose of the ‘transform’ property in CSS?

A

To apply 2D or 3D transformations to an element.

57
Q

What is a content delivery network (CDN)?

A

A system of distributed servers that deliver web content to a user based on their geographic location.

58
Q

True or False: The ‘display: none;’ property in CSS removes an element from the document flow.

A

True.

59
Q

What is the purpose of the ‘grid-template-areas’ property in CSS Grid?

A

To define named grid areas for layout purposes.

60
Q

What is the significance of the <header> tag in HTML5?

A

It represents introductory content or navigational links.

61
Q

Fill in the blank: The _______ event occurs when the user changes the value of an <input></input> element.

A

input

62
Q

What is the role of the ‘DOMContentLoaded’ event in JavaScript?

A

It is triggered when the initial HTML document has been completely loaded and parsed.

63
Q

What is a CSS framework? Give an example.

A

A CSS framework provides a standard structure and style for building websites. Examples include Bootstrap and Tailwind CSS.

64
Q

True or False: Semantic HTML helps with SEO.

A

True.

65
Q

What is the purpose of the <footer> tag in HTML5?

A

To define the footer for a document or section.

66
Q

What is a JavaScript module?

A

A JavaScript file or block of code that is executed in strict mode and can export and import functionality.

67
Q

Fill in the blank: The _______ method is used to add an element to the end of an array in JavaScript.

A

push

68
Q

What is the purpose of the ‘visibility’ property in CSS?

A

To control whether an element is visible or hidden, but it still takes up space in the layout.

69
Q

What does ‘BEM’ stand for in CSS methodology?

A

Block Element Modifier.

70
Q

True or False: The ‘console.log()’ method is used to print output to the web console.

A

True.

71
Q

What is the purpose of the ‘requestAnimationFrame()’ method in JavaScript?

A

To create smooth animations by synchronizing updates with the browser’s repaint cycle.