HTML-5:

1.HTML 5 features:
1. Semantic Elements
2. Video and audio Tags
3. Canvas
4. Svg Integration
5. Form Enhancement
6. Web storage
7. Geo location
8. Offline support
9. Web workers
10. Drag and drop
11. Responsive images
12. New Apis
2.semantic elements
 A semantic element clearly describes its
meaning to both the browser and the
developer.
 <header>, <nav>, <main>,.<article>,<section>,<aside>,
<footer>,<time>,<summary>
 Semantic elements enhance the accessibility of our website.
Screen readers interprets these tags more accurately, providing
a more meaningful experience for users
 our code becomes more maintainable. It's easier for developers
to understand the structure and purpose of different sections
. Form Enhancements:
HTML5 introduced several new input types and attributes for form
elements, making form validation and handling more accessible and
powerful. Examples include email, tel, url, number, date, range,
required,

Tag AND element:

 Tag is Nothing But tag name enclosed in angle brackets

(< and >). Tags can be either opening, closing, or self-
closing.
 Element is nothing But complete unit of content in
HTML, simply opening tag, content, and a closing tag
(for non-self-closing elements).
 Elements represent the structure and semantics of the
content on a web page.
meta tags :

Meta tags provide metadata about the HTML document, such as

character encoding, author, viewport settings
DOCTYPE in HTML?

The DOCTYPE declaration in HTML tells web browsers which version of HTML
your web page is using.
It's like giving the browser a rulebook to follow so that your web page looks the
same on different devices and browsers.
your web page is displayed correctly and consistently everywhere.
id and class.
id is used to uniquely identify an element, and each page should have
only one element with a specific id.

class is used to group multiple elements, and you can apply the sa me
styles or behavior to all elements with the same class .

target attribute :

The target attribute specifies where to open the linked

document. Common values include _self, _blank, _parent,
and _top
.

picture
<picture> element allows for responsive images by providing multiple
sources based on different conditions like device size or resolution.

div and span

 <div> is a block-level element, creating a new block on the page.
 commonly used for creating layout structures, grouping sections,
or applying styles to entire blocks of content
 <span> is an inline element, affecting only the content its.
 is used when you want to style or manipulate a small part of text
within a larger block, such as applying a different color or adding
inline scripting.

6.padding and margin

padding is the space inside the element between its content and the
element's border,

while margin is the space outside the element, creating a gap between
the element and other elements around it.

Boxmodel:

 so basically when you write any html element its taking rectangular
shape.
 The box have several layers content ,pad,border,margin,
 if you set the width and height of an element, and then add padding and
border? Does the overall size of the box change : yes;
 If you have an element with width: 100px; and padding: 10px;, what will
be the total width of the element, including padding: 120px

inline and block elements.

 Inline elements only take up as much width as necessary and do
not force new lines,

 while block elements take up the full width available and create
a new line after them .
inline elements
1. Have respect for their left & right margin and padding. not for
top/bottom.
2. Cannot set width or height.
3. Allow other elements to sit to their left and right.
Inline-Block elements:
 1. Respect all sides for margin and padding.
2. Can set width and height.
3. Allow other elements to sit to their left & right.
Block elements:
1. Respect all sides for margin and padding
2. Acquire full-width (in case the width is not defined)
3. Force a line break after them

boxsizing:
- box-sizing property allows us to include the padding and border in
an element's total width and height.
- When you set box-sizing: content-box;it's like "Measure only the
actual content inside the box. Ignore any padding or border."
- Suppose you have one box width 100px if add pad 10px the box
becomes 110 pixels.
- box-sizing: border-box;, it's like, "Measure everything - the content,
the padding, and the border. Consider the whole thing.
- If you add 10 pixels of pad, the box remains 100 pixels wide. The
browser adjusts the content size to fit within that specified width,
including pad also.

None vs hidden:
- None is nothing but if you remove the element from the page it
donot occupy space .
- But coming hidden if you remove the element from the page it
not visible but it occupy the space.
Zindex:
- Z -index is used over lap one element to other element ,

position
 - position property is used to control the positioning of an
element within its containing element
- we have static,relative,absolute,fixed,sticky.
- Basically static is the default position all the elements.
- Relative: You can shift an element from its normal
position, but it still takes up space, affecting the layout of
other elements. It's like moving a puzzle piece while
keeping it in the puzzle
- Absolute: You can place an element anywhere on the
page, and it won't affect the surrounding elements. It's like
the element is in its own layer

8. transition
- `transition` allows smooth changes over a specified duration when
a CSS property changes, creating animations or transitions.

9. display:
- The `display` property defines how an HTML element should be
displayed. Common values include `block`, `inline`, `flex`, `grid`, etc.
FlexBox:
- Flex box is one dimension layout either row or column.
 - laying out items along a single axis, either horizontally or
vertically.
- display: flex;: Turns the container into a flex container.
- flex-direction: Specifies the direction of the main axis (row
or column).
- justify-content: Aligns items along the main axis.
- align-items: Aligns items along the cross axis.
- flex: Controls how items grow, shrink, and their initial size
grid:
- two-dimensional layouts, allowing you to define both rows
and columns
- display: grid;: Turns the container into a grid container.
- grid-template-rows and grid-template-columns: Defines
the size and number of rows and columns.
- justify-items and align-items: Aligns items within the grid
cells
- grid-gap: Sets the gap between grid cells
10. opacity
- `opacity` controls the transparency of an element. A value of `0` is
completely transparent, while `1` is fully opaque.

11. vendor prefixes in CSS

- Vendor prefixes (e.g., `-webkit-`, `-moz-`) are used to add
experimental or non-standard properties to CSS for early browser
support, ensuring compatibility during feature testing.

12.pseudo-classes
 - Pseudo-classes are used to define a special state of an element
(e.g., `:hover`, `:active`, `:first-child`). Example: `a:hover { color: red; }`.
Pseudo-elements:
- Pseudo-elements are like the extras that appear
dynamically for styling purposes.
- These elements denoted by double columns
- ::before and ::after ::first-line and ::first-letter, ::selection
center div:
- Using Flexbox (Modern Approach):
- .container {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- Using Grid (Modern Approach):
- .container {
- display: grid;
- place-items: center;
- }
- Using Text Alignment
- .container {
- text-align: center;
- }
-
- .centered-div {
- display: inline-block; /* or inline */
- }
- Using Absolute Positioning:
- .container {
- position: relative;
- }
-
- .centered-div {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
 - }
-
13. CSS animation?**
- Use `@keyframes` to define the animation's behavior, then apply
it to an element using `animation` properties.

14.transform**
- `transform` allows you to modify the presentation of an element
(e.g., rotation, scaling, skewing) without affecting the document flow.

viewport
- Viewport units represent a percentage of the viewport's
dimensions. `1vw` is 1% of the viewport's width, and `1vh` is 1% of its
height.

TailwindCss:
 Tailwind is a set of low-level utility classes for styling web
applications.
 Developers can apply classes directly in html to style elements
no need to write extra files.
 Setup we just need configure npx create-react-app my-tailwind-
app
 After Install Tailwind CSS using dependensies
 npm install tailwindcss postcss autoprefixer.
 Create a tailwind.config.js file to configure Tailwind. You can
generate a default configuration file using npx tailwindcss init.
  "Create a postcss.config.js file in your project's root directory,
and configure it to use Tailwind CSS and Autoprefixer."
 Open your main CSS file, usually src/index.css, and import
Tailwind CSS by adding @import 'tailwindcss/base';, @import
'tailwindcss/components';, and @import 'tailwindcss/utilities';
at the top."
Bootstarp:
Bootstrap is known for its component-based approach. It comes with
a set of pre-designed components, making it easy to create a
consistent and visually appealing design. If your project aligns with a
standardized look and feel, Bootstrap is a solid choice.

Sass & sass:

Sass is like writing css , with some super power writing css becomes a
little more advanced, little more easy,
 Uses braces {}
 Uses semi-colons ;
 Assignment sign is :
 To create a mixin it uses the @mixin directive
 To use mixin it precedes it with the @include directive
 Files have the .scss extension.
 Syntax is similar to Ruby
Scss:
 No braces
 No strict indentation
 No semi-colons
 Assignment sign is = instead of :
 To create a mixin it uses the = sign
 To use mixin it precedes it with the + sign
 Files have the .sass extension.