HTML, CSS
1. Use of Doctype in HTML and what if we don’t use Doctype in HTML?
- The <!DOCTYPE> declaration represents the document type and
helps browsers to display web pages correctly.
2. Display: block vs inline vs inline-block :
- [Link]
- [Link]
- Inline-block: Element doesn’t start with the new line and we can also
set width and height.
- [Link]
ock/
3. Features of HTML 5
- Audio and Video tag
- Semantic element: header, nav, section, and footer
- Progress tag
- Email attribute
- Storage
4. Semantic Element
- A semantic element clearly describes its meaning to both the browser
and the developer.
- [Link]
5. Types of CSS
- [Link]
6. Difference between span and p tag
7. 100vh vs 100% and 100vw vs 100%
- [Link]
elector-to-height-100-vs-using-100vh
- [Link]
h100-and-width100vw
8. What is a meta tag?
- The <meta> tag defines metadata about an HTML document.
- Metadata is information about data. Ex: title, content, description, logo
9. Diff b/w visibility: hidden and display: none, opacity: 0
10. Position:
- [Link]
property/
11. Which browser does not support HTML5 ??
- IE 8 and older version
12. Specificity
- [Link]
13. How to override the UI library CSS style?
14. Element vs Tag :
- Tags are just opening or closing entities. Ex: <p> and </p> are called
HTML tags.
- An element is a set of opening tags, content, and closing tags.
Ex: <p>This is the content</p>: This complete thing is called an HTML
element.
15. Pseudo-class vs Pseudo Element:
- [Link]
16. Attribute Selector:
- The [attribute] selector is used to select elements with a specified
attribute. ([Link]
- a[target] {
- background-color: yellow;
- }
17. FlexBox vs Grid :
- The basic difference between CSS Grid Layout and CSS Flexbox Layout
is that Flexbox is designed for layout in one dimension - either a row or
a column.
Grid is designed for a two-dimensional layout - rows, and columns at the
same time.
18. How to change div position: using flex-order CSS prop
19. Local storage vs Session storage vs Cookies.
-[Link]
age-and-cookies/
20. Property of Flex-box.
- flex-direction.
- flex-wrap: It specifies whether the flex items should wrap or not.
- flex-flow: It is a shorthand property for setting both the flex-direction
and flex-wrap properties.
- Align-items: It controls the element in the cross axis( Vertically )
- Justify-content: It controls the element in the main axis( Horizontally )
- flex-order
21. window vs document
- window is a global object ( main Javascript object root) while document
is a property of the window object. document is used to access the
HTML elements.
22. attr vs property
- Attr is defined via HTML while property is defined via DOM.
- Difference between Attribute and Property in HTML world | by Arun
Rajeevan | Medium
23. Box Modal
- The CSS box model is essentially a box that wraps around every HTML
element. It consists of margins, borders, padding, and the actual content.
- [Link]
24. Use of makeStyle in material UI:
- It is a function that takes an object which contains CSS classes and rules
that we want to apply.