Key Elements [HTML,CSS]
<!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:- {css: lec-6}
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 :- {css: lec- }
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:- 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:- div.items{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).
This is the magic trick: a hidden checkbox that controls the entire theme.
<label for="theme-toggle"> will toggle the checkbox when clicked.
.theme-toggle is invisible, but its state (:checked) controls the theme.
Use :root Use *
Task
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.
JAVASCRIPT [Goal is to make interactive websites]
Alert(“ “) :- means when we refresh the chrome page it will show the written msg in this
alert box.
Console.log(“ “) :- means when we inspect our chrome page , in option console we can
see all this next (helps in debugging).
Var a = prompt(“any msg”) :- means after refreshing our chrome page . this msg will
appear.
Var isTrue = confirm(“ “) :- if we ask any question and then we want to confirm that if
yes then this af else then this.
If(isTrue) { give console }
Else {give console }
(these consoles will shown up on console tab after inspecting the chrome page.)
To link any js file with html file use:- <script src="file name.js"></script>
To give title use:- document.title = “ “
To add styling use:- document.body.style.(available styles like bg color , bg image etc.)
