Q 1. What are tags and attributes in HTML?

HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between
an HTML content and a simple content. HTML tags contain three main parts: opening
tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and
left to right. HTML tags are used to create HTML documents and render their
properties. Each HTML tags have different properties.

HTML attributes are special words which provide additional information about the
elements or attributes are the modifier of the HTML element.
Each element or tag can have attributes, which defines the behaviour of that
element.
Attributes should always be applied with start tag.
The Attribute should always be applied with its name and value pair.
The Attributes name and values are case sensitive, and it is recommended by W3C
that it should be written in Lowercase only.
You can add multiple attributes in one HTML element, but need to give space between
two attributes.

Q 2. What are different types of lists in HTML?

HTML Lists are used to specify lists of information. All lists may contain one or
more list elements. There are three different types of HTML lists:

Ordered List or Numbered List (ol)

Unordered List or Bulleted List (ul)
Description List or Definition List (dl)

In the ordered HTML lists, all the list items are marked with numbers by default.
It is known as numbered list also. The ordered list starts with <ol> tag and the
list items start with <li> tag.

In HTML Unordered list, all the list items are marked with bullets. It is also
known as bulleted list also. The Unordered list starts with <ul> tag and list items
start with the <li> tag.

HTML Description list is also a list style which is supported by HTML and XHTML. It
is also known as definition list where entries are listed like a dictionary or
encyclopedia.

The definition list is very appropriate when you want to present glossary, list of
terms or other name-value list.

Q 3. What is the ‘class’ attribute in HTML?

The HTML class attribute specifies one or more class names for an element
Classes are used by CSS and JavaScript to select and access specific elements
The class attribute can be used on any HTML element
The class name is case sensitive
Different HTML elements can point to the same class name
JavaScript can access elements with a specific class name with the
getElementsByClassName() method

Q 4. Describe HTML layout structure?

An HTML layout is a blueprint used to arrange web pages in a well-defined manner.
It is easy to navigate, simple to understand and uses HTML tags to customize web
design elements. Crucial for any website, an HTML layout that uses the correct
format will easily improve a website's appearance.

Q 5. Can we display a web page inside a web page or Is nesting of webpages

possible?

When the content of one completely different webpage is embedded into another
webpage, it is called a nested webpage. In simple words, a webpage that is inside
another webpage of a completely different domain.

Table of Content

Using <iframe> tag:

Using <embed> tag:

Using <iframe> tag:

The iframe in HTML stands for Inline Frame. The “iframe” tag defines a rectangular
region within the document in which the browser can display a separate document,
including scrollbars and borders. An inline frame is used to embed another document
within the current HTML document

Using <embed> tag:

The <embed> tag in HTML is used for embedding external applications which are
generally multimedia content like audio or video into an HTML document. But other
raw HTML content can be embedded using this tag. We can use this feature to create
a nested webpage.

Q 6. How to include javascript code in HTML?

To include an external JavaScript file, we can use the script tag with the
attribute src . You've already used the src attribute when using images. The value
for the src attribute should be the path to your JavaScript file. This script tag
should be included between the <head> tags in your HTML document.

Q 7. How to handle events in HTML?

On adding javascript code along with the HTML, js react over the events and allows
the execution. This process is known as Event Handling. Therefore, js handles the
HTML events using Event Handlers. There are different types of events such as
onclick, keydown, keyup, focus, load, etc.

Q 8. Explain CSS position property?

The CSS position property defines the position of an element in a document. This
property works with the left, right, top, bottom and z-index properties to
determine the final position of an element on a page.

There are five values the position property can take. They are:

static
relative
absolute
fixed
sticky

Static
This is the default value for elements. The element is positioned according to the
normal flow of the document. The left, right, top, bottom and z-index properties do
not affect an element with position: static.

Let's use an example to show that position: static has no effect on the position of
an element. We have three divs placed in a parent container. We'll use this example
throughout this article.

Relative
Elements with position: relative remain in the normal flow of the document. But,
unlike static elements, the left, right, top, bottom and z-index properties affect
the position of the element. An offset, based on the values of left, right, top and
bottom properties, is applied to the element relative to itself.

Absolute
Elements with position: absolute are positioned relative to their parent elements.
In this case, the element is removed from the normal document flow. The other
elements will behave as if that element is not in the document. No space is created
for the element in the page layout. The values of left, top, bottom and right
determine the final position of the element.

Fixed
Fixed position elements are similar to absolutely positioned elements. They are
also removed from the normal flow of the document. But unlike absolutely positioned
element, they are always positioned relative to the <html> element.

Sticky
position: sticky is a mix of position: relative and position: fixed. It acts like a
relatively positioned element until a certain scroll point and then it acts like a
fixed element. Have no fear if you don't understand what this means, the example
will help you to understand it better.

Q 9. How to include CSS in the webpage?

मराठी मध्ये
In English
CSS may be added to HTML in three different ways. To style a single HTML element on
the page, use Inline CSS in a style attribute. By adding CSS to the head section of
our HTML document, we can embed an internal stylesheet. We can also connect to an
external stylesheet that separates our CSS from our HTML.

Q 10. How do you test the webpage in different browsers?

To test a website in multiple browsers using LambdaTest, sign up or log in, select
browsers and platforms, upload your website or provide a URL, choose test
configurations, run the tests, review results for screenshots and videos, debug and
fix issues, and retest if needed after making fixes.

Q 11. What is the grid system?

Grid is a collection of rows and columns along with margins, and spacing between
each row and column. A designer can always tweak the number of rows or columns
required and also the margin and spacing between each of these rows and columns.

The optimal use of grids serves as a guiding layout for overall designs. It helps
to create consistent templates and standards. Using baselines (columns and rows)
and padding( gutters and margins) it becomes easy to configure multiple screens at
once. Grid ensures a balanced hierarchy of screen elements. Grid systems have
different types of grids(which we’ll have a look at later in this article).

Let’s look into some basic terminologies used in grid systems:

Columns: The vertical containers that hold some element like images, or text.
Occupies most of the area in a grid. Depending on the screen the number of columns
varies.
For example, Mobile screens have 4 columns in a grid and laptop/desktop screens
have 12 columns in a grid. Below is an example of how columns look.
Rows: The Horizontal containers that hold some element like images, or text. It is
similar to a column but is not mostly used unless required.
Gutters: The spaces between 2 columns or rows also called “Alleys”. Gutters have
set values but depending upon the screen they also vary. Large screens such as
laptops or desktops have wider gutters whereas small screens such as mobile phones
have thinner gutters. A combination of columns and gutters takes up the horizontal
width of the screen.
Margins: The spacing on the left and right of the screen where no screen element is
present. Margins help in making the screen feel dense but not cluttered. The size
of the margins may or may not be the same as the gutter, generally is it more than
gutters. It marks the boundary for screen elements. Helps in fixing the layout.
Terminologies used in Grid System
Terminologies used in Grid System

These were some basic terminologies a designer should know before using a grid
system. One thing to keep in mind is that “Elements don’t need to end at the same
marking but all elements should start at the same marking” when using a grid
system.

Types of Grid Systems

As the grid is flexible to create a similar layout for different size devices. It
is also available in different ways to use multiple kinds of Grid systems. Now
let’s look at the different types of grids system in UI Design that we have and how
to use them:

1. Symmetrical Grids: This types of grid system in UI Design are evenly spread,
which means all the elements are aligned with the center. Such grid systems consist
of an equal number of rows and columns. These look very pleasing to the eye and
elements are evenly spread on the screen. Give a formal and clean look to the
designs.

Column Grid: The most commonly used grid type, where a frame is split into multiple
columns separated with gutters. It is pleasing to the eye and creates a balanced
visual hierarchy. Screen elements like text, images, and buttons are aligned using
these columns. Column grids are mostly used in magazines and newspapers. Margins
are fixed and independently sized.
Column Grid
Column Grid

Pixel grid: It is a type of symmetrical grid, where the layout is fixed having
columns and rows that make it appear like a grid cage. It feels like one has super
zoomed into Figma or just like our math elementary notebook. This grid type helps
in creating pixel-perfect designs, each box denotes a pixel itself. Designers
occasionally close in to make pixel-by-pixel adjustments to the millions of pixels
that make up digital screens.
Pixel Grid
Pixel Grid

Baseline grid: It is also a type of symmetrical grid, where the layout is fixed
having only horizontal lines as a guide, a ruled notebook is a straightforward
illustration of a baseline grid. To make sure that the lines of text in each column
align consistently across a spread, baseline grids are frequently used in
conjunction with column grids.
Baseline Grid

Modular grid: It is another type of symmetrical grid that appears to be very

pleasing to the eye. Modular grid got the name because of the “Modules” which are
created by the intersection of columns and rows that are very well organized and
placed using gutters. Margins are consistent which gives a boxy look, this type is
generally used by business magazines.
Modular Grid

Manuscript grid: It is a type of symmetrical grid, also known as a “Single

columned” or “one-columned” grid as well. As the name suggests, the manuscript grid
has only one column that guides the layout. This grid type is often used for books,
especially folk or traditional books. Due to its appearance, it makes reading
easier by using short lines with fixed margins from all sides.
Manuscript Grid

2. Asymmetrical Grid: This type of Grid System in UI Design are opposite to

symmetric grids as there is no restriction of the grid being aligned to the center.
It is also called the broken glass grid, as pieces are unevenly placed which gives
a funky, modern, and abstract look to the designs.

Hierarchical grid: It is a type of asymmetrical grid, where the layout is not

fixed. A hierarchical grid is entirely freeform, made up of two or more grids that
are overlaid, or contain other grid components within themselves. To avoid having a
boxy vibe, many contemporary website interfaces use hierarchical grid layouts. As
it is asymmetrical it is more modern and abstract, setting a playful mood on
websites when used.
Hierarchical grid

These are some popular types of grids that are used based on different requirements
and needs. It is good to know about each of these so that as a designer one can
utilize and leverage the best guiding layout grid system.

To know the optimal usage of a grid system, knowing how to use the grid is very
important. As a beginner using a grid can be very overwhelming and confusing but
not to worry, We’re here to rescue you. Now let’s look into how to use the grid to
create an organized and consistent layout.

How To Use Grids?

1. Know your requirements: This is generally seen when beginners directly jump onto
using grids without knowing the requirement, the device, and which type of grid to
use. Later in design and further development, this can be very confusing to
resolve.

There are a few frameworks that are already defined to use grid systems optimally.
Such as 12 cols, 6 cols, 4 cols, and 3 colors even 2 and 1 col grids, here
12,6,4,3,2, and 1 are the number of grids in which the screen is divided. But not
only this can be used, but there might also be a screen that requires an 8-col grid
and it is completely okay to use a customized grid that suits the need. Not only
grids but keep in mind the screens as well, using the same grids for multiple
devices might not be a good option.

2. Take care of text alignment: Make sure that all the text irrespective of the
font weight and size, everything should be placed on a fixed baseline. This is a
part of the layout as well and maintaining a grid layout along with text hierarchy
would make the content and website/app appear more pleasing to the eyes.

3. Emphasize breaking the grid: It is a rule that says while using a grid it is
mandatory to place all elements inside the grid boundary but nowadays it is more
popular to break the grid to emphasize certain elements. When something is out of
alignment or disturbing the layout it gets noticed easily, a similar trend is
getting by breaking grid boundaries.

4. Maintain gutter balance: Equally, pay attention to both vertical and horizontal
grid alignments. For example, if you are using a gutter of 20px between 2 vertical
columns keep the same gutter between horizontal rows as well. Doing this would make
the content on the screen very well organized even if not symmetric.

5. Use 8pt grid: Using baseline numbers and their multiple promotes layout to fit
as per screen sizes. Such as the 8pt grid, which is the most popular. An 8pt grid
is currently widely used because it allows designs to grow well on retina screens
like iPhones and TV screens and works with both vector and pixel-based graphics.

6. Know where to start: Always remember to place the content on the screen using
the grid as a guideline, start with a grid, not with the gutter. Keep content
aligned with the start and end of a column’s edge, module, or pixel. This might not
sound critical from a design perspective but it is very helpful to guide a
developer on how and where to place media content like images and video. As
developers also do follow the grid system which codes your designs.

7. Use grid generators: There are good options available online for generating a
grid based on the screen sizes. This can be very useful for the times when you are
just starting with visual designs. Using them speeds up the process and ensures the
layout is optimized for use.

Benefits of Using Grids

Keeping these points in mind would help create a better and optimal grid system for
your designs. There are a few which I mentioned but there are multiple do’s and
don’t for using the grid system effectively. To conclude the articles, let’s look
into what are some key benefits of using a grid system.

Ensures consistency: Grid layouts provide a defined structure to designs that

optimize information accessibility and responsiveness, serving both an aesthetic
and practical purpose for UX/UI designers. Fixed margins and layout speed up the
element layering on the screen, and one doesn’t have to check alignments again and
again.
Better scanning: As the information on the screen is well organized, scanning
becomes easier. A good layout guides eye movement that avoids the user’s struggle
of getting lost in the content.
Responsiveness: Optimal use of a grid system for multiple devices, promotes
responsiveness. For example to replicate a design from big to small or small to the
big screen, one just has to adjust grids and place content accordingly.
Easy to modify and reuse: Good guiding layout ensures easy modification and
reusability. Digital products keep on changing such as new updates or UI
modifications keep on coming every 6 months. So for quick modification, the grid
works as a skeleton.

Q 12. What are the CSS frameworks?

1. Bootstrap
2. Tailwind CSS
3. Foundation
4. Bulma
5. Skeleton
6. UIkit
7. Milligram

Q 13. How to use external JavaScript file?

We can create external JavaScript file and embed it in many html page.

It provides code re usability because single JavaScript file can be used in several
html pages.

An external JavaScript file must be saved by .js extension. It is recommended to

embed all JavaScript files into a single file. It increases the speed of the
webpage.

Q 14. What is the use of Math object in JavaScript?

In JavaScript, "Math" is an object that provides mathematical functions and

constants. It allows you to perform various mathematical operations like
calculations, rounding numbers, generating random numbers, etc.

Q 15. What are the data types supported by JavaScript?

JavaScript has 8 Datatypes

1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object

Q 16. What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery takes a lot of common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that you can call with a single line of
code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX
calls and DOM manipulation.

The jQuery library contains the following features:

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

Q 17. How to read, write and delete cookies in jQuery?

In this article, we will learn how to read, write and delete cookies in jQuery.
This can be done using the cookie() and removeCookie() methods of the jquery-cookie
library. We will first understand what exactly is a cookie.

Cookie: Cookies are small blocks of data created by a web server when a user is
using a website and cookies are stored on the user’s device. These cookies remember
certain information about the user.
1. Creating or writing a cookie: We use the cookie() method to create cookies.

Syntax:

$.cookie('name', 'value', { settings });

Parameters: This method has two parameters.

name: This is the key of the cookie

value: This is the value of the cookie.
settings: This is an object that can be used to set additional parameters to the
Cookie.
2. Reading a cookie: We can use the cookie() method to read a cookie by passing the
name of the cookie and it will return the value of the cookie.

Syntax:

$.cookie('name');
Parameters: It has a single parameter, which is the name of the cookie to be read.

Return Value: It returns the value of the cookie.

3. Removing a cookie: We can use the removeCookie() method to read a cookie by

passing the name of the cookie. It Returns true when a cookie was successfully
deleted, otherwise, it returns false.

Syntax:

$.removeCookie('name');
Parameters: It has a single parameter, which is the name of the cookie.

Return Value: It Returns true when a cookie was successfully deleted, otherwise, it
returns false.

Q 18. What is the use of val() method in JQuery?

val() method is primarily used to get the values of form elements such as input ,
select and textarea . When called on an empty collection, it returns undefined .

Q 19. What is the use of html() method in JQuery?

The html() method sets or returns the content (innerHTML) of the selected elements.
When this method is used to return content, it returns the content of the FIRST
matched element. When this method is used to set content, it overwrites the content
of ALL matched elements.

Q 20. What are the features of jQuery used in web applications?

HTML/DOM manipulation.
CSS manipulation.
HTML event methods.
Effects and animations.
AJAX.
Utilities.

Q 21. What are the advantages of jQuery?

Enables developers/programmers to write JavaScript faster and easier.

Works with multiple browsers, so the code is compatible regardless of whatever
features the browser contains.
Compresses the most common JavaScript actions into fewer lines of code.
Helps you avoid common browser errors.