Q. Explain differences between HTML & HTML 5
- HTML (Hypertext Markup Language) is the standard markup language for creating web pages. HTML5 is the latest version of HTML.
- HTML5 introduces new semantic elements like
<header>,<nav>, and<section, which provide better structure and meaning to web content. - HTML5 includes native support for audio and video elements, eliminating the need for third-party plugins.
- It offers improved form handling with new input types and attributes.
- HTML5 enables canvas and SVG graphics for richer visual content.
- It supports geolocation, local storage, and more modern web features.
Q.Explain differences between CSS & CSS 3:
- CSS (Cascading Style Sheets) is the initial version for styling web documents. CSS3 is the latest version.
- CSS3 is modular, allowing for more granular control through individual feature-specific modules.
- CSS3 introduces advanced selectors like attribute selectors and pseudo-classes.
- It enhances the box model with properties like
box-sizing, rounded corners, and box shadows. - CSS3 adds text shadows, gradients, transitions, and animations.
- It supports 2D and 3D transformations and introduces Flexbox and Grid Layout modules for layout control.
Q. What is “doctype”?
A “doctype” declaration, short for “document type declaration,” defines the version and type of HTML a web page is using. It helps browsers interpret and render the page correctly.
Q. Meaning of “*/star/select all” operator in CSS:
The “*/star/select all” operator in CSS (*) is a wildcard selector that targets all elements on a web page. It’s used to apply styles globally.
Q. Full form of HTML and explain each term:
HTML stands for Hypertext Markup Language.
- “Hypertext” refers to text with links to other text.
- “Markup” involves using tags to define the structure and presentation of content.
- “Language” indicates that it’s a set of rules and codes for instructing web browsers how to display content.
Q. Full form of CSS and explain each term:
CSS stands for Cascading Style Sheets.
- “Cascading” signifies the order of precedence in applying styles.
- “Style” relates to the visual presentation.
- “Sheets” refers to documents containing style information.
Q. What are media queries, why do we need them?
Media queries are CSS techniques used to apply different styles based on the characteristics of the user’s device or screen, such as width, height, orientation, and resolution. They are crucial for creating responsive web designs that adapt to various screen sizes and devices.
Q. Full form of CSS and explain each term:
CSS stands for Cascading Style Sheets:
- Cascading refers to the way styles are prioritized and can inherit from multiple sources.
- Style pertains to the visual presentation and formatting of web content.
- Sheets are documents or files containing style information used to apply styles to HTML elements.
Q. Difference between “max-width” and “min-width” in media queries:
max-width: Specifies a maximum width at which styles are applied. Styles will be active when the screen width is equal to or less than the specified value.min-width: Specifies a minimum width at which styles are applied. Styles will be active when the screen width is equal to or greater than the specified value.
Q. What are “block” and “inline” elements? Give a few examples of each:
- Block Elements: Block-level elements create a new “block” formatting context and typically start on a new line, extending the full width of their parent container. Examples include
<div>,<p>,<h1>to<h6>,<ul>,<li>, and<section>. - Inline Elements: Inline elements flow within the content, allowing other elements to sit beside them horizontally. Examples include
<span>,<a>,<strong>,<em>, and<img>.
Q. What is “inline-block”?
inline-block is a CSS display property value that combines characteristics of both block and inline elements. Elements with this property are inline-level elements but can have block-level properties like setting width and height, margins, and padding. They flow within the content but retain the ability to control their dimensions.
Q. Difference between CSS Flexbox vs. CSS Grid, which to use when?
- Flexbox: Best suited for one-dimensional layouts, like aligning items in a row or column. It’s great for arranging items within a container.
- Grid: Ideal for two-dimensional layouts, creating both rows and columns. It’s suitable for creating complex layouts with precise control over item placement.
Q. Difference between “class” and “id”, which to use when?
- Class: Can be used multiple times in an HTML document. Used for styling multiple elements that share common properties.
- ID: Should be unique within an HTML document. Typically used for styling a single, specific element or for JavaScript targeting.
Q. Difference between position “absolute”, “relative”, “fixed”, “sticky”:
- Absolute: Positioned relative to the nearest positioned ancestor. It’s taken out of the normal document flow.
- Relative: Positioned relative to its normal position in the document flow. Other elements are still affected by it.
- Fixed: Positioned relative to the viewport and remains in the same position even when scrolling.
- Sticky: Initially behaves like
relativebut becomesfixedonce it reaches a specified scroll position.
Q. What is Bootstrap, why use it?
Bootstrap is a popular front-end framework that provides a set of pre-designed and responsive CSS and JavaScript components and tools. It’s used for building consistent, visually appealing, and mobile-friendly web applications quickly. It saves time and effort in web development by offering a well-documented and customizable set of UI components and styles.
Q. Full form of DOM, what it is:
DOM stands for Document Object Model. It is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as a tree of objects, allowing developers to interact with and manipulate web page elements using scripting languages like JavaScript.
Q. How is DOM manipulated using JS:
The DOM can be manipulated using JavaScript by selecting elements and altering their properties, attributes, or content. You can use methods like getElementById, querySelector, createElement, and functions to change HTML, CSS, and attributes.
Q. What is jQuery, why is it used, how different it is from JS:
- jQuery is a JavaScript library that simplifies DOM manipulation, event handling, animation, and other common web development tasks. It provides a concise and cross-browser-compatible way to interact with the DOM and offers numerous plugins and utilities.
- jQuery is built with JavaScript and is essentially a JavaScript library. It abstracts many complex JavaScript operations, making them easier to perform, but it’s not a replacement for JavaScript. You can think of jQuery as a tool that enhances JavaScript’s capabilities.
Q. What is the document.ready function:
$(document).ready() is a jQuery function that is used to ensure that the DOM is fully loaded before executing JavaScript code. It helps prevent issues where JavaScript code runs before the document is ready, which can lead to errors.
Q. How to detect a click using JS & jQuery:
- In JavaScript: You can add an event listener to an element using
addEventListenerand listen for the “click” event. - In jQuery: You can use the
clickmethod or theonmethod to attach a click event handler to an element.
Q. How to detect scroll using JS & jQuery:
- In JavaScript: You can use the
onscrollevent handler to detect scrolling. - In jQuery: You can use the
scrollevent or theonmethod to attach a scroll event handler to an element.
Q. What is JSON, why is it used:
JSON stands for JavaScript Object Notation. It is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate. JSON is used to transmit data between a server and a web application, as well as for configuration files and data storage.
Q. Any other formats you know of other than JSON:
Other data interchange formats include XML (eXtensible Markup Language), YAML (YAML Ain’t Markup Language), and CSV (Comma-Separated Values).
Q. What is REST API, full form of REST and API:
- REST stands for Representational State Transfer.
- API stands for Application Programming Interface.
- A REST API is a set of rules and conventions for building and interacting with web services using HTTP methods. It allows applications to communicate and exchange data over the internet.
Q. How the internet works, what happens when you type google.com or any other URL in the browser and press enter:
When you enter a URL and press enter, the browser initiates a series of steps, including DNS resolution, establishing a TCP connection, sending an HTTP request to the server, receiving and rendering the HTML response, and executing JavaScript, if present. This process involves multiple servers and protocols to fetch and display the requested web page.
Q. What are React.js, Angular, Vue.js:
React.js, Angular, and Vue.js are JavaScript libraries or frameworks for building user interfaces and web applications. They provide tools and patterns for building interactive and dynamic web applications.
Q. Full form of SPA, why is it used:
SPA stands for Single Page Application. SPAs load a single HTML page and dynamically update the content as the user interacts with the application, typically using JavaScript. They offer a smoother and more responsive user experience by reducing page reloads.
Q. What is AJAX, full form of AJAX and why is it used:
AJAX stands for Asynchronous JavaScript and XML (although XML is less commonly used today). AJAX is used to make asynchronous requests to a server from a web page without requiring a full page reload. It is used to fetch and update data without disrupting the user’s experience.
Q. What are HTTP methods:
HTTP methods are actions that define what a request should do. Common HTTP methods include GET (retrieve data), POST (send data to be processed), PUT (update data), DELETE (remove data), and more.
Q. Difference between GET & POST:
- GET is used to retrieve data from a server, and the data is included in the URL.
- POST is used to send data to a server for processing, and the data is sent in the request body.
Q. What are HTTP status codes:
HTTP status codes are three-digit numbers returned by a server in response to an HTTP request. They indicate the outcome of the request, such as success, redirection, or error.
Q. What is client-server architecture:
Client-server architecture is a computing model where client devices (like web browsers) request resources or services from central servers (computers or machines) over a network. Servers provide resources or services in response to client requests.