Web Development Basics Flashcards

Question 1

What is the difference between a website and a web application?

Accepted Answer

A website is mainly a set of documents that a server sends to a browser, which displays them with little change. A web application responds to user input and keeps track of state, so its interface changes as the user works. The difference lies mostly in how interactive the software is.

Question 2

What happens when you type a web address into a browser and press Enter?

Accepted Answer

The browser parses the address into a protocol, host name, and path, then asks the Domain Name System to find the server's IP address. It opens a connection to that server and sends an HTTP request for the resource. The server replies with a status code and content, which the browser then renders.

Question 3

What does the term client mean in client server communication on the web?

Accepted Answer

A client is the program that makes requests, most often a web browser running on a user's device. A server is the program that receives those requests and returns responses, such as HTML pages, images, or data. This request and response pattern is the basic model behind nearly all web communication.

Question 4

What is a URL and what are its main parts?

Accepted Answer

A URL, or uniform resource locator, is the address that identifies a resource on the web. Its main parts include the scheme, such as https, the host name, an optional port, the path to the resource, and an optional query string that carries parameters.

Question 5

What is the purpose of an HTTP status code?

Accepted Answer

An HTTP status code is a three digit number in a server response that summarizes the outcome of a request. Codes starting with 2 signal success, codes starting with 3 signal redirection, codes starting with 4 signal client errors, and codes starting with 5 signal server errors.

Question 6

Why is the web described as stateless, and why does that matter?

Accepted Answer

HTTP is stateless, which means each request is handled independently and the server does not automatically remember earlier requests. This matters because developers must add mechanisms such as cookies, tokens, or session storage to keep users logged in or to remember items in a shopping cart. Statelessness keeps servers simpler and easier to scale.

Question 7

What is the difference between a static site and a dynamic site?

Accepted Answer

A static site sends the same prebuilt files to every visitor, so the content does not change based on who is asking. A dynamic site generates its responses on the server or in the browser, often by reading data from a database. Static sites are simpler to host, while dynamic sites can personalize content.

Question 8

What is a domain name, and how does it relate to an IP address?

Accepted Answer

A domain name is a human readable label, such as example.com, that stands in for a numeric IP address. The Domain Name System translates the name into the address that computers use to route traffic. Using names lets people remember sites easily, and it lets site owners change servers without changing the name users know.

Question 9

What is HTML and what role does it play in a web page?

Accepted Answer

HTML, or HyperText Markup Language, is the markup language that defines the structure and meaning of content on a web page. It describes elements such as headings, paragraphs, images, links, and lists. Browsers read this markup to build the document that users see and interact with.

Question 10

What is an HTML element, and what are its main parts?

Accepted Answer

An HTML element is a unit of markup made from a start tag, content, and an end tag, such as a paragraph wrapped in p tags. Some elements are void and have no content or closing tag, such as img or br. Elements can carry attributes, which add extra information.

Question 11

Why is semantic HTML important for accessibility and search engines?

Accepted Answer

Semantic HTML matters because its elements, such as header, nav, main, article, and footer, describe the purpose of content rather than only its appearance. Assistive technologies like screen readers use these roles to help users navigate, and search engines can better understand the page's organization. Well chosen elements make pages more understandable for everyone.

Question 12

What is the purpose of the DOCTYPE declaration at the top of an HTML file?

Accepted Answer

The DOCTYPE declaration tells the browser which version of HTML the document uses, so the browser renders it in standards mode. Modern documents use the short form, which is written as doctype html. Without it, browsers may fall back to quirks mode, where layout can behave unpredictably.

Question 13

How are the head and body sections of an HTML document different?

Accepted Answer

The head contains metadata about the document, such as its title, character encoding, viewport settings, and links to stylesheets and scripts. The body contains the visible content that users read and interact with. The head is not displayed on the page itself, although the title appears in the browser tab.

Question 14

What is the purpose of the a element and its href attribute?

Accepted Answer

The a element creates a hyperlink, which lets users move to another resource or to a location within the same page. Its href attribute holds the destination address, such as a full web address or a relative path. Links are what connect separate documents into the web.

Question 15

Why should every img element include an alt attribute?

Accepted Answer

Alt text gives people who cannot see an image a text description of its content or purpose. Screen readers announce this text, and browsers show it when the image fails to load. Decorative images can use an empty alt value so assistive tools skip them.

Question 16

What do form elements and the label element do together?

Accepted Answer

Form elements such as input, select, and textarea collect data from users, while the label element gives each control an accessible name. A label linked with the for attribute, matching the control's id, lets users click the text to focus the field. Screen readers also announce the label when the field gets focus.

Question 17

What is CSS and how does it relate to HTML?

Accepted Answer

CSS, or Cascading Style Sheets, is the language that describes how HTML content should look, including colors, fonts, spacing, and layout. HTML supplies the structure and meaning, while CSS applies the presentation. Keeping these concerns separate makes pages easier to maintain and lets one stylesheet control many pages.

Question 18

What is the basic structure of a CSS rule?

Accepted Answer

A CSS rule has a selector, which picks the elements to style, followed by a declaration block in curly braces. Each declaration pairs a property with a value, separated by a colon and ended with a semicolon. For example, a selector of h1 with the declaration color: navy; styles every top level heading.

Question 19

What does the cascade mean in Cascading Style Sheets?

Accepted Answer

The cascade is the set of rules a browser uses to resolve conflicts when several declarations target the same element. It weighs factors such as origin, specificity of selectors, and source order, with later rules generally winning when other factors are equal. Understanding it helps explain why one style overrides another.

Question 20

How does specificity affect which CSS rule applies to an element?

Accepted Answer

Specificity is a measure of how precisely a selector targets an element, and the browser applies the declaration from the most specific matching selector. Id selectors outrank class, attribute, and pseudo class selectors, which outrank element selectors. Inline styles generally outrank selectors in stylesheets, though declarations marked important can override that order.

Question 21

What is the box model in CSS?

Accepted Answer

The box model describes every element as a rectangular box made of content, padding, border, and margin. Content holds the element's text or images, padding adds space inside the border, the border surrounds that padding, and margin adds space outside the border. Knowing these layers helps explain element sizes.

Question 22

What are the main differences between flexbox and grid layouts?

Accepted Answer

Flexbox arranges items along a single axis, either a row or a column, and distributes space among them. Grid arranges items in two dimensions, defining rows and columns at the same time. Flexbox suits components like navigation bars, while grid suits overall page layouts. Both are widely supported and can be combined.

Question 23

Why do developers use CSS custom properties, also called variables?

Accepted Answer

Developers use custom properties to store reusable values, such as a brand color, under a name beginning with two hyphens. They are referenced with the var function, so changing the value in one place updates every declaration that uses it. They also can be overridden in specific contexts, such as a dark theme.

Question 24

Why are media queries used in responsive CSS?

Accepted Answer

Media queries let styles respond to conditions such as viewport width, so one layout can adapt to many screen sizes. For example, a three column design can switch to a single column on narrow phones, which keeps content readable on small screens.

Question 25

What role does JavaScript play in a web page?

Accepted Answer

JavaScript is the programming language that adds behavior to web pages, such as responding to clicks, updating content, and validating input. It runs in the browser alongside HTML and CSS, and it can read and change the document through the Document Object Model. Many modern applications also run JavaScript on servers.

Question 26

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

Accepted Answer

The keyword let declares a block scoped variable that can be reassigned, while const declares a block scoped binding that cannot be reassigned. The older keyword var declares a function scoped variable. Modern code usually prefers const by default and uses let when reassignment is needed.

Question 27

What is a data type, and which primitive types does JavaScript use?

Accepted Answer

A data type classifies the kind of value a variable holds, which determines what operations are valid on it. JavaScript's primitive types are string, number, bigint, boolean, undefined, symbol, and null. Everything else, including objects, arrays, and functions, is an object.

Question 28

How do functions help organize JavaScript code?

Accepted Answer

A function groups a set of statements under a name so they can be run whenever needed. Functions can accept parameters, which let the same logic work with different inputs, and they can return a value to the caller. Reusing functions reduces duplication and makes code easier to test and read.

Question 29

What is the Document Object Model, and why does JavaScript use it?

Accepted Answer

The Document Object Model is a tree shaped representation of an HTML document in which each element, attribute, and text node is an object. JavaScript uses it to find elements, read their content, change their attributes or styles, and add or remove nodes. This lets scripts update the page without reloading it.

Question 30

How does an event listener respond to user actions in the browser?

Accepted Answer

An event listener is a function registered on an element with addEventListener, specifying an event type such as click. When the event occurs, the browser calls the function and passes an event object describing what happened. The function can then read input, update the page, or prevent the default action.

Question 31

What is the difference between synchronous and asynchronous code?

Accepted Answer

Synchronous code runs one step at a time, and each step must finish before the next begins. Asynchronous code starts an operation, such as a network request, and continues running while the operation completes. When it finishes, a callback, promise, or async function handles the result. Asynchronous code keeps pages responsive during slow tasks.

Question 32

Why is it important to validate user input before using it?

Accepted Answer

Validation checks that input has the expected format, length, and range, which prevents many bugs and security problems. Users may mistype data, leave fields empty, or deliberately submit harmful content. Client side checks in JavaScript improve feedback, but servers must validate input again because browser checks can be bypassed.

Question 33

What is version control and why do web developers use it?

Accepted Answer

Version control is a system that records changes to files over time, so developers can review history, compare versions, and return to earlier states. It also lets several people work on the same project, combining their changes with less risk of overwriting one another.

Question 34

What are browser developer tools used for?

Accepted Answer

Browser developer tools let you inspect the HTML and CSS of a live page, change styles, and see how elements are laid out. Their console shows errors and lets you run JavaScript, while the network panel reveals each request, status code, and response. Using them is one of the fastest ways to diagnose problems.

Question 35

What does responsive design aim to achieve?

Accepted Answer

Responsive design aims to make a website usable and readable across screen sizes, from small phones to large desktop monitors. It relies on flexible grids, fluid images, and media queries so that layouts adjust rather than requiring separate sites. A mobile first approach starts with the smallest layout and adds complexity as space allows.

Question 36

What is the purpose of the viewport meta tag?

Accepted Answer

The viewport meta tag tells mobile browsers how to scale a page to the device width. Without it, many phones render the page at a wide desktop width and shrink it, making text tiny. Including a tag with width set to device width and an initial scale of one helps layouts respond correctly.

Question 37

What does it mean to make a website accessible?

Accepted Answer

Making a website accessible means ensuring people with disabilities can perceive, understand, navigate, and interact with its content. Common practices include sufficient color contrast, keyboard operability, meaningful headings, text alternatives for images, and clear focus indicators. Accessibility benefits many users, including those using only a keyboard or a small screen.

Question 38

Why should you test a website with only a keyboard?

Accepted Answer

Keyboard testing reveals whether every interactive control can be reached with the Tab key and activated with Enter or Space. Many people rely on keyboards or switch devices, so hidden focus, missing controls, or traps in menus block them completely. Focus outlines should stay visible so users know where they are.

Question 39

What is web hosting, and what does a deployed site require?

Accepted Answer

Web hosting is a service that stores a site's files on a server connected to the internet so browsers can request them. A deployed site needs a domain name pointing to that server, the built files uploaded or served from a repository, and a configured server that returns them correctly.

Question 40

Why is performance important for web pages, and what is one simple way to improve it?

Accepted Answer

Performance matters because slow pages frustrate visitors, reduce engagement, and can be harder to use on limited connections. One simple improvement is to compress and size images so they are no larger than they need to be on the page. Developers can also reduce unnecessary scripts and stylesheets to shorten load times.

Web Development Basics Flashcards

1How the web works

2HTML document structure

3CSS styling and layout

4JavaScript fundamentals

5Accessibility, responsive design, and workflow

Learning Resources