Frontend Development Technologies Flashcards

Question 1

What is the purpose of HTML in a web page?

Accepted Answer

HTML, which stands for HyperText Markup Language, describes the structure and meaning of content on a web page. It uses elements, usually an opening tag and a closing tag around some content, to mark up headings, paragraphs, links, images, and lists. Browsers read these elements to build the page.

Question 2

Why should every page declare a document type and language?

Accepted Answer

The document type declaration tells the browser to use standards mode, which avoids unpredictable layout quirks. Setting the lang attribute on the html element tells browsers, search tools, and screen readers which human language the page uses. Both help the page render and be understood correctly across different software.

Question 3

What is the difference between a block element and an inline element?

Accepted Answer

A block element, such as a paragraph or a div, starts on a new line and takes up the full width available to it. An inline element, such as a span or a link, sits within the flow of text and takes up only as much width as its content needs.

Question 4

Why do semantic elements such as main and nav matter for accessibility?

Accepted Answer

Semantic elements describe the role of content, so assistive technologies can tell users where the main content, navigation, and page sections are. Using a div for everything hides this meaning, which makes pages harder to navigate for people who rely on assistive tools.

Question 5

What is the purpose of the alt attribute on an img element?

Accepted Answer

The alt attribute gives a text description of an image that conveys its meaning. Screen readers announce this text to people who cannot see the image, and it also appears if the image fails to load. Decorative images should use an empty alt value so assistive tools skip them.

Question 6

How do HTML forms send user input to a server?

Accepted Answer

A form groups input controls such as text fields, checkboxes, and buttons inside a form element. When the user submits it, the browser collects each control's name and value and sends them to the URL in the action attribute using the method, usually GET or POST.

Question 7

Why is a label element connected to its input important?

Accepted Answer

A label gives an input an accessible name, so screen readers announce what the field is for. Clicking the label also activates the input, which enlarges the clickable area. You connect them with a for attribute that matches the input's id, or by nesting the input inside the label.

Question 8

What does a meta viewport tag do on mobile devices?

Accepted Answer

A viewport meta tag tells mobile browsers how wide to make the layout area and how to scale the page. Without it, mobile browsers often render a wide default layout and shrink it, making text tiny. A common setting is width set to device-width with an initial scale of one.

Question 9

What is CSS and what role does it play?

Accepted Answer

CSS, short for Cascading Style Sheets, controls how HTML content looks, including colors, fonts, spacing, and positioning. Rules pair a selector, which picks elements, with declarations, which set property and value pairs. Keeping styles separate from markup makes pages easier to maintain and lets one stylesheet apply across many pages.

Question 10

What does the cascade mean in CSS?

Accepted Answer

The cascade is the set of rules that decides which declaration wins when several rules target the same element. The browser considers origin and importance first, then specificity, and finally the order in which rules appear. Later rules win ties, which is why the order of your stylesheet matters.

Question 11

How does specificity affect which CSS selector applies?

Accepted Answer

Specificity is a score that decides which rule applies when several selectors match the same element. ID selectors count more than class, attribute, and pseudo-class selectors, which count more than element selectors. A selector with higher specificity wins even if it appears earlier in the stylesheet.

Question 12

What is the difference between margin and padding?

Accepted Answer

Padding is the space between an element's content and its border, and it takes on the element's background color. Margin is the space outside the border, separating the element from its neighbors, and it does not take the element's background. Both accept the same shorthand values for top, right, bottom, and left sides.

Question 13

How does the box model determine an element's total rendered size?

Accepted Answer

The box model treats each element as a box made of content, padding, border, and margin. By default, width and height apply only to the content area, so padding and border add to the final size. Setting box-sizing to border-box makes width include padding and border, which is easier to predict.

Question 14

What is the main idea behind Flexbox for laying out items?

Accepted Answer

Flexbox is a one-dimensional layout model that arranges items along a row or a column inside a container. The container sets a direction and controls how items are spaced, aligned, and wrapped. Items can grow or shrink to fill available space, which makes it well suited to navigation bars, toolbars, and similar components.

Question 15

How does CSS Grid differ from Flexbox in two-dimensional layouts?

Accepted Answer

CSS Grid is a two-dimensional layout system that controls rows and columns at the same time. You define tracks on the container, then place items into cells or spans of those tracks. Flexbox handles one axis at a time and is used for components, while Grid suits page structure and aligned groups of content.

Question 16

Why are media queries used in responsive design?

Accepted Answer

Media queries apply CSS rules only when certain conditions are true, such as when the viewport is narrower than a given width. They let a layout rearrange, for example by stacking columns on small screens. Responsive design uses fluid units, flexible images, and media queries so one page adapts to many screen sizes.

Question 17

What is JavaScript used for in a web browser?

Accepted Answer

JavaScript is the programming language that adds behavior to web pages, such as responding to clicks, validating forms, and updating content without reloading. Browsers run it directly on the user's device, alongside the HTML and CSS that define the page. Together, they make pages interactive.

Question 18

What is the difference between let, const, and var?

Accepted Answer

The var keyword is function scoped and hoisted, while let and const are block scoped. Const prevents reassigning the variable binding, though the value of an object or array it holds can still change. Modern code usually uses const by default and let only when a value must change.

Question 19

What does it mean for a JavaScript function to be a closure?

Accepted Answer

A closure is a function that keeps access to variables from the scope where it was created, even after that outer scope has finished running. For example, a counter function can remember its count between calls because it closes over that variable. Closures are useful for keeping private state.

Question 20

How do arrow functions differ from regular function expressions?

Accepted Answer

Arrow functions are a shorter syntax for writing functions, and they do not create their own this binding. Instead, they use the this value from the surrounding code where they are defined. This makes them convenient for callbacks, though they cannot be used as constructors and lack their own arguments object.

Question 21

What is the purpose of the strict equality operator?

Accepted Answer

The strict equality operator, three equals signs, checks whether two values are the same type and value without converting either one. The loose operator, two equals signs, converts types before comparing, which produces surprising results such as zero matching an empty string. Many teams prefer strict equality so comparisons behave predictably.

Question 22

What is the difference between null and undefined?

Accepted Answer

Undefined means a variable has been declared but has not been given a value, or a function returns nothing. Null is a value that a programmer assigns on purpose to indicate that something is intentionally empty. Both are falsy, but they are not strictly equal, and typeof null reports object.

Question 23

What does the typeof operator return when given an array?

Accepted Answer

The typeof operator returns the string object for an array, because arrays are a kind of object in JavaScript. To check for an array, use Array.isArray, which returns true only for real arrays. This distinction matters when validating data that arrives from forms, storage, or network responses.

Question 24

How do you declare a default value for a function parameter?

Accepted Answer

You assign a default value directly in the parameter list, such as function greet(name = 'friend'). The default is used when the caller passes no argument or passes undefined explicitly. A default applies only when the argument is undefined, not null.

Question 25

What is the Document Object Model and how do scripts use it?

Accepted Answer

The Document Object Model is a tree of objects that represents the elements of a page, which browsers build from HTML. Scripts use it to find elements, read or change their content and attributes, and add or remove nodes. Because the DOM reflects the current page, changes made through it appear immediately.

Question 26

What is event bubbling, and how does it affect event handlers?

Accepted Answer

Event bubbling means an event fires on its target element first, then on each ancestor, moving upward toward the document. This lets a single listener on a parent handle clicks from many children, a pattern called event delegation. You can stop propagation with event methods.

Question 27

What is the difference between addEventListener and inline onclick attributes?

Accepted Answer

addEventListener attaches a handler from a script, so markup and behavior stay separate. Several listeners can be attached to the same element for one event, while an inline onclick attribute allows only one handler to be defined that way. Listeners can also be removed later and accept options such as capture or once.

Question 28

What is a Promise in JavaScript, and why do developers use one?

Accepted Answer

A Promise is an object that represents the eventual result of an asynchronous operation, which can be pending, fulfilled, or rejected. Developers use promises to chain steps in order and handle errors in one place, instead of nesting many callbacks. Async and await syntax builds on promises to read more like ordinary code.

Question 29

How does fetch retrieve data from a server?

Accepted Answer

The fetch function sends an HTTP request to a URL and returns a promise that resolves to a response object. The response must be checked, because fetch only rejects on network failures, not on error statuses such as 404. To read the body, call a method like json, which also returns a promise.

Question 30

What is JSON and why is it commonly used for data exchange?

Accepted Answer

JSON, short for JavaScript Object Notation, is a text format for representing data as key and value pairs, arrays, strings, numbers, booleans, and null. It is widely used because it is easy for people to read and simple for programs to parse. Although it grew out of JavaScript, most programming languages have libraries that read and write it.

Question 31

What does the event object provide to an event handler?

Accepted Answer

The event object describes what happened, including its type, the target element, and the position of the pointer for mouse events. It also provides methods such as preventDefault, which stops the browser's default action like following a link or submitting a form. Handlers receive it automatically as their first argument.

Question 32

Why should you avoid putting untrusted text into innerHTML?

Accepted Answer

Setting innerHTML parses the string as markup, so any script tags or event attributes inside it can run in the page. This is a common route for cross-site scripting attacks. Use textContent for plain text, which inserts the characters literally and keeps the content safe.

Question 33

What is a package manager and what does npm do?

Accepted Answer

A package manager installs, updates, and tracks the external libraries a project depends on. npm, the manager that ships with Node.js, reads a package.json file that lists those dependencies and their version ranges. Running install on another machine downloads the listed libraries, so teams can set up projects consistently.

Question 34

What is a bundler and why do frontend projects use one?

Accepted Answer

A bundler combines many source files, such as modules, styles, and images, into a smaller set of files that browsers can load. It resolves imports between files and can transform newer syntax into code that older browsers understand. Many bundlers also minify output and split code so pages load only what they need.

Question 35

What is a component in a modern frontend framework?

Accepted Answer

A component is a reusable piece of user interface that packages its own markup, logic, and sometimes styles. Pages are built by nesting components inside one another, which keeps related code together. Components usually receive input through properties and manage their own state, so the same component can appear in many places.

Question 36

What is state, and why does a component-based interface depend on it?

Accepted Answer

State is data that belongs to a component and can change over time, such as whether a menu is open or what a user has typed. When state changes, the framework re-renders the affected part of the interface so the screen matches the data.

Question 37

What is a linter and how does it help frontend developers?

Accepted Answer

A linter is a tool that analyzes source code for likely bugs, stylistic problems, and departures from a team's rules without running it. Running one as part of editing or committing code catches mistakes such as unused variables or missing semicolons early.

Question 38

Why do developers use version control with frontend projects?

Accepted Answer

Version control, most commonly Git, records the history of changes to files so you can review, compare, and undo edits. It lets several people work on the same codebase through branches and merges without overwriting each other's work. Commits also give a clear record of why each change was made, which helps reviewers.

Question 39

What does hot module replacement do during frontend development?

Accepted Answer

Hot module replacement updates changed modules in a running page without a full reload, which often keeps app state intact. A development server watches project files, rebuilds what changed, and pushes the update to the browser. This shortens the feedback loop, letting developers see the effect of an edit within moments.

Question 40

Why is accessibility testing part of frontend development?

Accepted Answer

Accessibility testing checks whether people using keyboards, screen readers, or other assistive tools can perceive and operate a page. Developers can test with keyboard navigation, check color contrast, review semantic markup, and run automated checkers that catch common issues. Automated tools find only part of the problems, so manual testing is still needed.

Frontend Development Technologies Flashcards

1HTML and Document Structure

2CSS Styling and Layout

3JavaScript Fundamentals in the Browser

4DOM, Events, and Asynchronous Data

5Frontend Tooling and Frameworks

Learning Resources