A- CSS

1-How many type position in CSS.

Ans: Five type positions we are using in CSS.

2- What is Box sizing in CSS.

Ans: box sizing property is used to specify how to calculate an element's total height and width.
It allows you to include the padding and border within the total height and width of the element
It includes: Height + width + padding + border

3- What is the display flex, and can you define some property of flex.

Ans: The flex property sets the flexible length on flexible items. The order of any element can
be easily changed without editing the HTML section. The flex property is much more responsive
and mobile-friendly. It is easy to position child elements and the main container.
1- align-item
2- justify-content
3- flex-direction
4- flex-wrap
5- flex-flow

4- Explain the difference between inline, inline-block, and block? Can you give the
example of Block and inline elements?

Ans:

Block Element: A block element always begins a new line and extends to the left and right,
and takes up the full width available.
Ex: Div, P, Button, section, header, nav, footer, article, figure,

Inline element: inline elements do not start on a new line and only take up as much width as
their content. So, if you try to set any width and height, it will have no effects.
Ex: span, small, a, i, img, em,

Inline-block: it’s essentially the same thing as inline, except that you can set height and width
values.
5- What is pseudo Classes and Element in CSS

Ans: CSS pseudo-classes are used to add special effects to some selectors.
Syntax: selector:pseudo-class

pseudo Classes
1- :link
2- :hover
3- :active
4- :focus
5- :first-child

pseudo Element
1- :first-line
2- :first-letter
3- :before
4- :after

B- Javascript

1- Difference between var and let.

2- difference b/w push and unshift method in jquery

Ans: unshift () method adds the element at the start of the array whereas push () adds the
element at the end of the array.

3- What is a callback in javascript

Ans: A callback is a function passed as an argument to another function. A callback function

4- What is hoisting in javascript.

5- What is the Bubbling principle in JavaScript?

Ans: When an event happens on an element, it first runs the handlers on it, then on its parent,
then all the way up on other ancestors.

C- Angular

1-What are Angular building blocks?

Ans: Components
Data binding
Dependency injection
Directives
Metadata
Modules
Routing
Services
Template

2-What isRouting?

if you want to navigate to different pages in your application, but you also want the application
to be a SPA (Single Page Application), with no page reloading, you can use the
ngRoutemodule. The ngRoute module routes your application to different pages without
reloading the entire application.

3- What is Lazy loading in angular

Ans: Lazy loading is a technology of angular that allows you to load JavaScript components when a
specific route is activated.

4- What is directive in angular

Ans: Components(custom directive) – also known as Directives with Templates. We can create
custom elements using components.
Attribute Directives – change the appearance or behavior of an element, component, or another
directive.
ex- ngStyle

Structural Directives – provide DOM structure manipulation and for reshaping the HTML layout by
adding or manipulating elements.
ex- ngIf, ngFor

5- How can we communicate between components

1- through services
2- through @input decorator (parent to child)
3- through @output decorator (child to parent)
4- through custom directive

D- Bootstrap and Responsive design

1- What is the grid system in bootstrap

Ans: Bootstrap's grid system is built with flexbox and allows up to 12 columns
across the page.
Bootstrap’s grid system uses a series of containers, rows, and columns to layout
and aligns content. It’s built with flexbox and is fully responsive

2- What media query will use for tabs

Ans: @media (min-width: 768px) and (max-width: 1024px)

3- How many types of layouts are available in Bootstrap?

Ans:

i-Fluid Layout- This layout is necessary for creating an app that is 100 % wider and
covers all the screen widths.

ii- Fixed Layout- It is used only for a standard screen (940px). Both layouts can be used
for creating a responsive design.
4- How do you make images responsive?

Ans: Bootstrap allows to make the images responsive by adding a class .img-responsive
to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it
scales nicely to the parent element.

E- Angular Material Design

1- What is matdialog used for in angular Material?

Ans: Angular Material Dialog. The MatDialog service is used to open dialogs with
content design, styling, and animations. MatDialogRef provides a handle to the open
dialog.

2- What is the Matcard in angular material

Ans: is a content container that can be used for inserting text, photos, and actions in
the context of the subject.

3- what is the syntax for open a mat dialog

Ans: this.dialog.open(componentName….