HTML NOTES
Key Elements
<!DOCTYPE html>: Declares the document type.
**<html lang="**en">: Specifies the language of the document.
<head>: Contains metadata about the document.
<meta charset="UTF-8">: Specifies the character encoding.
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
Controls the zooming and width of the page.
<title>: Sets the title of the page.
<header>: Typically contains the navigation, logo, and other introductory content.
<nav>: Defines a set of navigation links.
<main>: Contains the primary content of the document.
<footer>: Typically contains information about the author, copyright, or other
secondary content.
Headings: <h1>, <h2>, <h3>, etc. define headings in the document.
Line Break: <br> creates a line break in the content.
_blank: Specifies that a link should open in a new tab or window.
: Represents a non-breaking space, which prevents line breaks between words.
<a>: Defines a hyperlink.
<img>: Embeds an image in an HTML document.
<video>: Embeds a video in an HTML document.
<section>: Defines a section of related content.
<style>: Defines CSS styles for an HTML document.(like bg color and many more)
<div>:- use to make division (basically dabba bnana)
To comment a code <!-- This is an HTML comment -->\
Bootstrap is all about copying the text from website ‘bootstrap” (FRONT-END
DEVELOPMENT APPLICATION)
DEBUGGING IN CSS:-
Right Click on chrome file the select “inspect” and codes will be visible.
Or we can go for “view page resource” after clicking right on chrome page and codes will be
visible.
(advance props —> box sizing —> zindex) {topics left in between}
MEDIA_QUERY :-
Width :- {to open responsiveness tool:- open ur webpage in chrome àight-click anywhere on
the page and select "Inspect".-à press Ctrl + Shift + M and responsive tool will open
If we use “width” means jo no. humne diya h sirf uspe color change hoga {for ex;- agr 600
diya h too only 600 pe color change hoga otherwise black by default .
And if we use “max-width” then means jo no. denge use chota no. lene pr color change hoga
{for ex:- agr 600 diya then 0-600 (given color) otherwise black by default .
And if use “orientation ” then on rotating chrome page it changes the color.
Media not all :- mtlb jb jb yeh given property h tb tb yeh color apply mt krna.
FLEXBOX & GRID LAYOUT:-
use to align items . layout change aram se hojana (boxes ko align krna)
Flex-basis : controls the width of box.
Flex-grow : controls the speed of growth (kitni teji se dabba bdaa hoga)
Flex-shrink : controls the speed of shrinkness (kitni teji se dabba chota ho rha h)
Flexbox(1-d) vs grid layout (2-d)
To add same text with multiple numbers…
USE:- [Link]{dabba $}*(no. of times u want the text)
To add height to a box
USE:- grid-auto-rows (if we use this and our text is much more than the space given then text
will overflow)
To add width to a box
USE:- grid-auto-column
Place all your website content inside .wrapper so it reacts to theme
changes. (name the class as wrapper).
ROOT AND * USES:-
Task Use :root Use *****
Define theme colors/fonts ✅ Yes ❌ Not reliable
Reset padding/margin/box-sizing ❌ No ✅ Yes
Set up reusable design tokens ✅ Always ❌ Avoid
Low-level utility CSS Maybe ✅ Yes
Will :root { --bg: white; --text: black; } alone change the Chrome page? Soo **NOOO…
**when u give code that where it should happen then only it will be applicable.
has( ) Magic