HTML:

1) Semantic Tag: Tags which we can identify by their name.

Example: <header>, <footer>, <nav>
2) Non Semantic Tag: Tags which we can’t identify by their name.
Example: <div>, <span>
3) Block Element: Element which starts from new line and take whole width.
Example: <div>, <p>
4) Inline Element: Element which take only its width.
Example: <span>
5) Session Storage: It’s a storage which we can keep data in key value pair for particular
session. Up to 5mb
6) Local Storage: It’s a storage which we can keep data in key value pair until browser gets
closed. Manually we have to clear the local storage. Up to 5mb

CSS/SCSS:

• CSS
1) Position:
a. Static (Default): Does not affect with top, bottom, right, left values.
b. Relative: Will take changes from its static position.
c. Fixed: We set this with help of top, bottom, right, left properties and scroll will
not affect its position.
d. Absolute: This will get adjust with reference to its parent position, except static
in this case its get adjusted with reference to body
e. Sticky: It will get adjust with reference to its parent and does not get affected by
scroll.

2) Media Query:
a. @media not screen (media type) and (max-width).
b. @media only screen (media type) and (max-width).

3) Box model: margin – border – padding – content.

4) Z-index: z-index: 99, position: absolute

5) Combinator:
a. Descendant Selector (space): div p{} selects all <p> inside <div>
b. Child Selector (>): div > p {} selects all <p> which are directly inside <div>.
c. Adjacent Sibling Selector (+): div + p {} selects first <p> inside <div>
d. General Sibling Selector (~): div ~ p {} selects all <p> inside <div>

6) Pseudo-class: :hover, :active, :visited, :focus

Example: a:hover {
background-color: yellow;
}
 7) Pseudo-element: ::before, ::after, ::first-line, ::first-letter, ::selection.
Example: p::after {
content: " - Remember this";
},
p::first-line {
background-color: yellow;
}

8) nth Child: element: nth-child (2)

Example: div: nth-child (2).

9) Specificity: Inline => Id => Class => Element

10) Centre a box: top-50%, left-50% position-absolute

11) Flex box:

12) Grid vs Flex: Gird is 2 dimensional (row and column) and Flex is one dimensional
(row/column).

• SCSS
1) Variables: $color: #fff
2) Partials: _file-name, partials do not get converted in CSS file.
3) Mixin: @mixin methodName () {}
4) Function: @function funcName () { return }
5) Import: @import ‘path of the file’.
6) If Else
7) Error
8) Warn
9) Debug
10) Extend
11) Interpolation: #{$variableName}
12) Loops
a. For: @for $i from 1 through 3
b. Each: @each $size in $sizes
c. While: @while $value > $base
13) Values
a. Number
b. String
c. Map
d. List
e. Boolean