Web Development Solutions Flashcards

Question 1

What is the purpose of HTML in a web page?

Accepted Answer

HTML provides the structure and meaning of a web page. It uses elements, marked by tags, to label content such as headings, paragraphs, links, images, and lists. Browsers read this markup to build the document tree that everything else, including styling and scripting, is attached to.

Question 2

How does the CSS box model determine the space an element occupies?

Accepted Answer

The CSS box model treats every element as a rectangular box made of content, padding, border, and margin. Padding sits inside the border and margin sits outside it. By default, width and height apply only to the content area, while border-box sizing includes padding and border in the total size.

Question 3

Why should you use semantic elements like header, nav, and main?

Accepted Answer

Semantic elements describe the role of content, so the page structure is clear to browsers, developers, and assistive technologies. A header marks introductory content, nav groups navigation links, and main holds the primary content of the page. Screen reader users can jump directly between these landmarks, and search engines can interpret the layout.

Question 4

How does specificity decide which CSS rule applies when rules conflict?

Accepted Answer

When several CSS rules target the same element, the browser chooses the one with the highest specificity. Inline styles outrank ID selectors, which outrank class, attribute, and pseudo-class selectors, which outrank element selectors. If specificity is equal, the rule that appears later in the stylesheet wins.

Question 5

What is the difference between block and inline elements?

Accepted Answer

Block elements start on a new line and stretch across the full width of their container by default, so they stack vertically. Inline elements flow within a line of text and take up only the space their content needs. Inline elements ignore explicit width and height, while block elements respect them.

Question 6

What does the document object model represent when a browser loads an HTML page?

Accepted Answer

The document object model, or DOM, is a tree of objects that represents the loaded HTML page in memory. Each element, attribute, and text node becomes a node the browser can read and change. JavaScript uses the DOM to select elements, update text, and respond to user events, and changes to the DOM are reflected on screen.

Question 7

Why do developers store repeated values in CSS custom properties?

Accepted Answer

Developers store repeated values such as colors, spacing, and font sizes in custom properties so a single change updates every rule that uses them. They also cascade and inherit like other CSS values, so a value can be overridden for a specific section of the page.

Question 8

How do you connect an external stylesheet to an HTML document?

Accepted Answer

You connect an external stylesheet with a link element placed inside the head of the HTML document. The element uses rel set to stylesheet and href set to the file path, such as styles/main.css. The browser fetches the file and applies its rules to the page, keeping presentation separate from content.

Question 9

What is the difference between let and const in JavaScript?

Accepted Answer

Both let and const declare block-scoped variables, but const does not allow the binding to be reassigned after its initial value is set. A let variable can be changed later in the same scope. Neither keyword makes an object immutable, since a const object can still have its properties modified.

Question 10

How does an event listener respond to a user action on a page?

Accepted Answer

An event listener is a function attached to an element that the browser calls whenever a matching event occurs, such as a click or key press. You register it with addEventListener, passing the event name and the callback. The callback receives an event object that describes the action, including its target element.

Question 11

What does it mean that JavaScript is single-threaded?

Accepted Answer

JavaScript in the browser runs on a single main thread, so only one piece of script executes at a time. Long-running work would block rendering and input, so slow operations such as network requests are handled asynchronously. The runtime queues completed callbacks and runs them when the stack is free, which keeps pages responsive.

Question 12

What does a Promise represent in asynchronous JavaScript code?

Accepted Answer

A Promise represents the eventual result of an asynchronous operation. It has one of three states: pending while the work is in progress, fulfilled when it succeeds with a value, or rejected when it fails with an error. You attach handlers with then and catch, or use await inside an async function.

Question 13

How can JavaScript read a value typed into a form field?

Accepted Answer

JavaScript reads a typed value by selecting the input element, usually with document.querySelector or getElementById, and then accessing its value property. Reading that property inside an input or change event handler gives the current text. The value is always a string, so numeric input must be converted with Number or parseInt before arithmetic.

Question 14

What is a closure in JavaScript and why is it useful?

Accepted Answer

A closure is a function that retains access to variables from the scope where it was created, even after that outer function has returned. This lets a function keep private state between calls, such as a counter that is hidden from the rest of the program.

Question 15

Why should you avoid inserting untrusted user text with innerHTML?

Accepted Answer

Assigning untrusted text to innerHTML lets the browser parse it as markup, so an attacker can inject script that runs in your page, known as cross-site scripting. Safer options include setting textContent, which treats the input as plain text, or sanitizing HTML with a vetted library before insertion.

Question 16

How does the fetch function request 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. You usually call response.json() to parse the body, and you must check response.ok because fetch only rejects on network failure, not on error status codes like 404.

Question 17

What is the difference between a client and a server?

Accepted Answer

A client is the program that makes requests, usually a web browser or mobile app running on a user's device. A server is a program that listens for those requests, processes them, and returns responses such as HTML, JSON, or images. Web applications usually split the interface from data and logic on the server.

Question 18

What does an HTTP status code like 404 tell the client?

Accepted Answer

An HTTP status code is a three-digit number in the server response that summarizes the outcome of the request. Codes in the 200 range indicate success, 300 range indicate redirection, 400 range indicate client errors such as a missing page, and 500 range indicate server errors.

Question 19

What is the difference between GET and POST requests in HTTP?

Accepted Answer

A GET request asks the server to retrieve a resource and normally carries its parameters in the URL, so it is suitable for reading data. A POST request sends data in the request body to create or change something on the server, such as submitting a form. GET requests should not cause side effects.

Question 20

What is a REST API and how do clients use it?

Accepted Answer

A REST API is an interface that exposes resources at predictable URLs and uses standard HTTP methods to act on them. Clients typically send GET to read a resource, POST to create one, PUT or PATCH to update it, and DELETE to remove it.

Question 21

What is JSON and why is it commonly used for API responses?

Accepted Answer

JSON, short for JavaScript Object Notation, is a text format for structured data made of key and value pairs, arrays, strings, numbers, booleans, and null. It is widely used for API responses because it is lightweight, easy for people to read, and maps easily onto native data structures in most languages.

Question 22

Why do web APIs often require an authentication token with each request?

Accepted Answer

An authentication token proves to the server that the request comes from an authorized user or application, without sending a password on every call. The client usually places the token in an Authorization header, and the server verifies it before returning protected data.

Question 23

How does CORS affect a browser request to a different origin?

Accepted Answer

CORS, or cross-origin resource sharing, is a browser policy that blocks a page from reading responses from a different origin unless the server allows it. The server signals permission through headers such as Access-Control-Allow-Origin. For some requests, the browser first sends a preflight OPTIONS request to check that the method and headers are allowed.

Question 24

Why should a client validate data received from an API before displaying it?

Accepted Answer

A client should validate API data because the server's output may be incomplete, malformed, or unexpected, and displaying it unchecked can break the interface or mislead users. Validation confirms that required fields exist and have the right types before the values are used.

Question 25

What is a viewport meta tag and why does a responsive page need one?

Accepted Answer

The viewport meta tag tells mobile browsers how wide the layout should be and how to scale the page. Without it, many mobile browsers render the page at a desktop width and shrink it, so media queries and fluid layouts do not behave as intended.

Question 26

What is a media query and how does it change a layout?

Accepted Answer

A media query is a CSS rule that applies styles only when certain conditions are true, such as a minimum viewport width, screen orientation, or user preference. Mobile-first design writes base styles for small screens and adds media queries for larger ones.

Question 27

Why do flexible units like percentages and fr help layouts adapt?

Accepted Answer

Flexible units size elements relative to their container or the available space instead of fixed pixel values, so layouts can stretch and shrink with the screen. Percentages are relative to the parent width, while the fr unit in CSS Grid divides leftover space into proportional tracks.

Question 28

What does the alt attribute do for an image on a web page?

Accepted Answer

The alt attribute provides a text alternative that describes an image's content or purpose. Screen readers announce this text to people who cannot see the image, and the browser displays it if the image fails to load. Decorative images should use an empty alt value so assistive technologies skip them.

Question 29

How do you make sure text has enough contrast for readers?

Accepted Answer

Check that text contrast against its background meets the minimum ratio defined in accessibility guidelines, which for normal body text is at least 4.5 to 1. Use a contrast checker tool during design. Avoid relying on color alone to convey status, and provide text labels or icons as well.

Question 30

Why should every interactive control be reachable with the keyboard?

Accepted Answer

Many people navigate without a mouse, including users of screen readers, switch devices, and those with motor impairments, so controls that only respond to pointing will block them. Native elements such as button and a are keyboard accessible by default, while custom elements built from div need tabindex, a role, and key handlers.

Question 31

What is the purpose of label elements in HTML forms?

Accepted Answer

A label element gives each form control an accessible name, so screen readers announce what the field is for. Clicking the label also moves focus to the associated input. You connect them by matching the label's for attribute with the input's id, or by nesting the input inside the label.

Question 32

How does a skip link help keyboard users on long pages?

Accepted Answer

A skip link is a hidden-until-focused link placed at the top of the page that jumps directly to the main content. Keyboard and screen reader users would otherwise tab through every navigation item on each page before reaching the content. The link targets an element with a matching id.

Question 33

What does it mean to deploy a web application?

Accepted Answer

Deploying a web application means publishing its files and code to a server or hosting platform so that users can reach it through a public address. The process typically includes building the project into optimized static files, configuring the server, and connecting a domain name.

Question 34

Why is minifying and compressing assets important for page speed?

Accepted Answer

Smaller files download faster, so the browser can display content sooner, which matters most on slow mobile connections. Minifying removes whitespace and comments from CSS and JavaScript, and compression such as gzip or Brotli shrinks the transferred bytes further. Compression helps most with text-based files like HTML, CSS, and JavaScript.

Question 35

How do browser developer tools help you debug a layout problem?

Accepted Answer

Browser developer tools let you inspect the live DOM and see which CSS rules apply to a selected element, including overridden or crossed-out declarations. The box model diagram shows margin, border, padding, and content sizes, which often reveals unexpected spacing. You can also edit styles in place to test a fix.

Question 36

What is a console error, and how should you read a stack trace?

Accepted Answer

A console error is a message the browser or runtime logs when code fails, such as a type error or a failed network request. A stack trace lists the chain of function calls that led to the failure, with the most recent call usually at the top.

Question 37

Why does caching static files improve the speed of repeat visits?

Accepted Answer

Caching stores copies of files such as images, scripts, and stylesheets so the browser can reuse them instead of downloading them again. Cache-Control headers tell the browser how long a file may be reused. Repeat visits therefore load faster and use less bandwidth.

Question 38

What is the purpose of version control in a web project?

Accepted Answer

Version control, usually Git, records every change to project files so you can see who changed what, when, and why. It lets teams work on separate branches, review changes before merging them, and return to an earlier state if a release breaks.

Question 39

How can you test that a web page works across different screen sizes?

Accepted Answer

Use responsive mode in browser developer tools to step through common widths, checking for overflow, cramped text, and broken navigation. Test on real phones and tablets when possible, since emulators do not reproduce every rendering quirk or touch behavior. Automated visual testing tools can also catch unexpected layout changes after updates.

Question 40

What is the difference between a staging environment and production?

Accepted Answer

A staging environment is a copy of the live setup used to test changes before users see them, while production is the live site that real visitors use. Staging should match production closely in server configuration, data shape, and third-party services, so problems appear there first.

Web Development Solutions Flashcards

1HTML and CSS Foundations

2JavaScript Basics in the Browser

3Client Server Communication and APIs

4Responsive Layout and Accessibility

5Deployment, Performance and Debugging

Learning Resources