1. HTML Core Architecture, Tables & Elements
Key Exam Facts & Definitions:
- Document Type: HTML5 uses
<!DOCTYPE html>(case-insensitive, simplified from HTML 4.01 DTD variants like Strict, Transitional, and Frameset). - Void/Empty Elements: Do not require a closing tag:
<br>,<hr>,<img>,<input>,<meta>,<link>,<wbr>. - Structural Semantics:
<pre>preserves whitespace and line breaks verbatim in monospace;<em>conveys vocal emphasis, while<i>is purely stylistic. - Table Grouping:
<thead>,<tbody>, and<tfoot>group row blocks. Cells span usingcolspan(horizontally across columns) androwspan(vertically down rows).<colgroup>and<col>format entire columns simultaneously. - Special Utilities:
<fieldset>groups form elements visually, while<legend>provides its caption.<bdo dir="rtl">overrides bidirectional reading order.<base href="...">establishes document-wide default relative URL resolution.
Practice Check: 5 Core HTML PYQs
Q1. What is the standard document type declaration for HTML5?
Q2. Which HTML element is a void/empty tag that does NOT have a closing tag?
Q3. In HTML tables, which attribute merges two or more adjacent cells horizontally?
Q4. Which tag provides a caption/title for a <fieldset> grouping element?
Q5. Which scheme creates an HTML hyperlink that initiates a direct phone call?
2. HTML5 Semantics, Form Controls & Web Storage
Key Exam Facts & Definitions:
- Semantic Containers:
<article>specifies self-contained, distributable syndication content;<aside>denotes related sidebar/callout content;<figure>encapsulates media paired with<figcaption>. - Dynamic Graphics:
<canvas>is pixel-based and manipulated via JavaScript procedural APIs (canvas.getContext('2d'), origin at top-left 0,0). SVG is XML-based vector graphics, scaling infinitely without fidelity loss. - Interactive Controls:
<datalist>provides suggested auto-complete items linked to an input via thelistattribute.<progress>displays task progression, whereas<meter>gauges scalar quantities within fixed boundaries. - Form Validation: Native attributes include
required,pattern(regex check), andnovalidate(bypasses browser client-side constraint checks). - Client Storage APIs:
localStoragepersists with no expiry date (~5MB per origin).sessionStoragewipes data upon tab closure.IndexedDBis a transactional, asynchronous NoSQL client database.
Practice Check: 5 HTML5 & Storage PYQs
Q1. Which HTML5 element renders dynamic, scriptable 2D bitmapped graphics on the fly?
Q2. What is the key functional difference between sessionStorage and localStorage?
Q3. Which HTML5 semantic tag defines an independent, self-contained piece of syndication-ready content?
Q4. Which HTML5 element binds predefined autocomplete options to an <input> element?
Q5. Which browser background script acts as a programmable network proxy for offline Progressive Web Apps (PWAs)?
3. CSS Selectors, Cascade Specificity & Combinators
Key Exam Facts & Definitions:
- Specificity Weight Hierarchy:
!important> Inline Styles (1,0,0,0) > IDs (0,1,0,0) > Classes, Attributes, and Pseudo-classes (0,0,1,0) > Elements and Pseudo-elements (0,0,0,1). The universal selector (*) has (0,0,0,0). - Combinator Symbols:
•
A > B: Direct child combinator (immediate children only). •A + B: Adjacent sibling combinator (immediately following sibling). •A ~ B: General sibling combinator (any following sibling). •A B: Descendant selector (any nested child). - Attribute Selectors:
^=starts with;$=ends with;*=contains substring;~=matches space-separated word;|=matches exact or hyphen-prefixed word. - Modern Pseudo-classes:
:is()adopts the specificity of its most specific argument;:where()always contributes zero (0) specificity;:has()acts as a parent relational selector.
Practice Check: 5 CSS Selectors PYQs
Q1. Which CSS selector carries the highest individual specificity weight?
Q2. Which symbol represents the direct child combinator in CSS?
Q3. Which modern CSS pseudo-class always contributes exactly (0, 0, 0) specificity?
Q4. What does the selector "h1 + p" match in an HTML document?
Q5. Which attribute selector matches elements whose attribute starts with a specific prefix?
4. CSS Box Model, Positioning, Flexbox & Grid
Key Exam Facts & Definitions:
- Box Model: Layers from inside-out: Content > Padding > Border > Margin.
box-sizing: border-boxincludes padding and border within the total element width, preventing layout breakage. - Positioning Types:
•
static: Default in-flow document positioning. •relative: Offset relative to its normal position without removing its footprint. •absolute: Positioned relative to its nearest non-static positioned ancestor. •fixed: Positioned relative to the viewport; unaffected by scrolling. •sticky: Behaves relatively until a specified scroll offset is met, then acts fixed. - Flexbox:
justify-contentaligns items along the main axis;align-itemsaligns items along the cross axis.flexshorthand:flex-grow,flex-shrink,flex-basis(defaults: 0 1 auto). - CSS Grid: Two-dimensional layout system. Uses the fractional unit (
fr).gapdefines gutters.grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))creates responsive column tracks without requiring media queries.
Practice Check: 5 Box Model & Layout PYQs
Q1. Which CSS property includes padding and borders inside the declared width and height?
Q2. What is the default value of the CSS "position" property?
Q3. Which property distributes space along the main axis in a Flexbox container?
Q4. What unit represents a fraction of the remaining free space in a CSS Grid?
Q5. What three properties are configured by the "flex: 1 1 auto;" shorthand?
5. CSS3 Animations, 2D/3D Transforms & Responsive Design
Key Exam Facts & Definitions:
- Animations: Keyframe steps are declared with the
@keyframesat-rule.animation-fill-mode: forwardsretains final computed styles after animation completion.animation-direction: alternateruns alternating playback directions. - Transforms: Manipulated via
rotate(),scale(),translate(x, y), andskew(). 3D perspective is established using theperspectiveproperty andtransform-style: preserve-3d. - Responsive Viewport: Requires
<meta name="viewport" content="width=device-width, initial-scale=1.0">in the<head>to prevent automatic mobile viewport down-scaling. - Modern Media Queries:
min-widthestablishes mobile-first breakpoints. Features like(prefers-color-scheme: dark)query system theme preferences, and(prefers-reduced-motion: reduce)detect accessibility settings.
Practice Check: 5 CSS3 & Animation PYQs
Q1. Which CSS @-rule is used to declare intermediate animation keyframes?
Q2. Which meta tag is essential for responsive CSS media queries to work on mobile browsers?
Q3. Which property retains the final frame styles after an animation finishes playing?
Q4. Which media query matches screen viewports that are 768px wide or wider?
Q5. Which dynamic CSS function combines length calculations across different units?
6. JavaScript ES6 Core, Scope, Types & Operators
Key Exam Facts & Definitions:
- Scoping & Hoisting:
varis function-scoped, hoisted, and initialized toundefined.letandconstare block-scoped and reside in the Temporal Dead Zone (TDZ) prior to declaration. - Type Quirks:
typeof null === 'object'(legacy JS bug);typeof NaN === 'number';NaN === NaNevaluates tofalse(useNumber.isNaN()instead). - Coercion Rules:
'5' + 3 === '53'(string concatenation dominates with+);'5' - 3 === 2(subtraction coerces string to number). - Arrow Functions & Context: Arrow functions (
() => {}) do not bind their ownthis; they retain lexicalthisfrom their enclosing scope. - Modern ES6+ Operators: Nullish Coalescing (
??) returns the right-hand value only fornullorundefined. Optional Chaining (?.) short-circuits gracefully without throwing reference errors on nullish properties.
Practice Check: 5 JavaScript Core PYQs
Q1. What is the return value of "typeof null" in JavaScript?
Q2. What is the result of evaluating ('5' - 3) in JavaScript?
Q3. How does the "this" keyword behave inside an ES6 Arrow Function?
Q4. What values trigger fallback execution in the Nullish Coalescing operator (??)?
Q5. Why does (0.1 + 0.2 === 0.3) evaluate to false in JavaScript?
7. DOM Manipulation, Event Propagation & Asynchronous JS
Key Exam Facts & Definitions:
- Event Propagation Pipeline: 1. Capturing Phase (window down to target) > 2. Target Phase > 3. Bubbling Phase (target up to window).
event.stopPropagation()halts bubbling;event.preventDefault()prevents native browser default behavior. - Event Delegation: Placing a single listener on an ancestor element to manage events from dynamically created children using
event.target. - DOM Selection Performance:
getElementByIdandgetElementsByClassNamereturn live node collections.querySelectorAllreturns a static snapshot NodeList.DocumentFragmentallows batching DOM updates in memory without triggering browser reflows. - Lifecycle Events:
DOMContentLoadedfires when the HTML parser completes the DOM tree (without waiting for stylesheets/images).window.onloadfires after all subresources finish loading. - Async JavaScript: Promises exist in three mutually exclusive states: pending, fulfilled, and rejected.
async/awaitprovides syntactic sugar over Promises, whereawaitpauses execution inside an async function until a Promise settles.
Practice Check: 5 DOM & Async JS PYQs
Q1. In DOM event propagation, which phase executes first?
Q2. What is the explicit purpose of event.preventDefault()?
Q3. What is the benefit of "Event Delegation" in client-side programming?
Q4. Which event fires as soon as the DOM tree finishes parsing, without waiting for external stylesheets/images?
Q5. Which state is NOT a valid status of an ECMAScript Promise?
8. Web Architecture, HTTP Protocols & Security
Key Exam Facts & Definitions:
- Status Codes:
200 OK;301 Moved Permanently;304 Not Modified(serves from local cache);401 Unauthorized(missing authentication);403 Forbidden;404 Not Found;500 Internal Server Error. - Protocol Enhancements: HTTP/2 enables multiplexing requests over a single TCP connection. HTTP/3 replaces TCP with QUIC over UDP to eliminate head-of-line blocking.
- Security Controls:
• SOP (Same-Origin Policy) : Restricts scripts on one origin from accessing resources on another origin (Protocol + Domain + Port). • CORS : Uses HTTP headers to grant cross-origin access; complex calls initiate an
OPTIONSpreflight check. • Cookies :HttpOnlyblocks client script access (mitigates XSS);SameSitemitigates CSRF. • CSP (Content-Security-Policy) : Restricts allowed resource origins to block malicious script injection. - Script Loading Attributes:
asyncdownloads asynchronously and executes immediately when ready.deferdownloads in parallel and executes in document order only after HTML parsing completes.
Practice Check: 5 Web Architecture & Tools PYQs
Q1. Which HTTP status code indicates that a requested resource was permanently moved to a new URI?
Q2. Which HTTP header defends against Cross-Site Scripting (XSS) by whitelisting trusted content sources?
Q3. Which cookie flag prevents client-side JavaScript (document.cookie) from accessing the cookie?
Q4. How does the "defer" attribute on an external <script> tag execute?
Q5. What underlying transport protocol does HTTP/3 utilize instead of standard TCP?
.png)
Tags
Computer Teacher Exam
DSSSB TGT CS
Front End Design
HTML5 CSS3 Notes
JavaScript Revision
Web Technology Notes