Handwritten notes · Part 18
HTML and CSS Handwritten Notes for Placements (Free PDF)
By Gaurav SharmaPublished
26 pages of handwritten-style HTML and CSS notes for placements and frontend interviews: how the browser renders, semantic HTML5, images, forms, accessibility, meta tags, specificity and the cascade, box model, units, position and z-index, Flexbox, Grid, centering, responsive design, pseudo-elements, animations, CSS variables and modern CSS, with Hinglish explanations.
- Pages
- 26
- Format
- A4 PDF
- Language
- English + Hinglish
- Price
- Free by email
What's inside
24 topics, one page each
- 01How the browser renders: DOM, CSSOM, layout, paint, async vs defer
- 02Document structure, doctype and meta tags for SEO
- 03Semantic HTML5 elements and headings
- 04Text, links and responsive images with srcset and lazy loading
- 05Lists and accessible tables
- 06Forms, input types and built-in validation
- 07Accessibility basics: labels, alt text, keyboard and ARIA rules
- 08Block vs inline vs inline-block, and three ways to hide elements
- 09Ways to add CSS, selectors and combinators
- 10Specificity, the cascade, !important and inheritance
- 11Box model, box-sizing and margin collapse
- 12Units (px, em, rem, vw, dvh, fr), clamp() and colours
- 13Position, z-index and stacking contexts
- 14Flexbox: container and item properties
- 15CSS Grid: template areas and auto-fit with minmax
- 16Every way to centre a div
- 17Responsive design, mobile-first and media queries
- 18Pseudo-classes vs pseudo-elements
- 19Transitions, keyframe animations and transform
- 20CSS variables, :has(), container queries and nesting
- 21BEM naming and common CSS mistakes
- 22Interview questions with short answers
- 23"What will you see?" quiz
- 24Revision cheat sheet
HTML and CSS are tested in almost every frontend and full-stack interview, and many freshers lose easy marks on specificity, the box model and positioning. These notes explain each idea on one page, with diagrams and short snippets you can try in the browser.
What makes these HTML and CSS notes different?
- The questions interviewers really ask. Semantic tags, async vs defer, em vs rem, relative vs absolute, display none vs visibility hidden, each with a clear answer.
- Specificity you can calculate. An (ID, class, type) scoring table and worked examples, so you can predict which rule wins instead of guessing.
- Layout from the ground up. Box model, margin collapse, position and stacking contexts, then Flexbox, Grid and six ways to centre a div.
- Modern CSS. CSS variables,
:has(), container queries, native nesting and accessible, responsive habits.
How should you use these HTML and CSS notes?
Open CodePen or your browser's DevTools next to the PDF and try each snippet: change a value and watch what moves. Do the "What will you see?" quiz without looking at the answers, then use the last page as a revision sheet before the interview.
This is Part 18 of the series. For the language that makes pages interactive, see the JavaScript handwritten notes.
FAQ
Questions about these notes
Are these HTML and CSS notes really free?
Yes. The full 26-page PDF is free; email me to request the complete PDF. Share it with friends preparing for placements.
Do I need any coding background for these notes?
No. They start from how a browser turns HTML and CSS into pixels, so beginners can follow along. Paste the snippets into CodePen and inspect them in DevTools as you read.
Do the notes cover Flexbox, Grid and specificity?
Yes. Flexbox and Grid each get a full page with diagrams, specificity is explained with an (ID, class, type) scoring table and worked examples, and there is a page on every way to centre a div.
Are the notes useful for frontend interviews?
Yes. They include the questions asked most often, such as semantic HTML, box model, em vs rem, position values, display none vs visibility hidden and Flexbox vs Grid, plus a six-question output quiz and a one-page revision sheet.
Placement Series
More from the series
Handwritten notes · Part 1
JavaScript Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style JavaScript notes for placements and interviews: hoisting, closures, this, prototypes, promises, the event loop, polyfills and output-based questions, explained in English with Hinglish.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 2
C++ Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style C++ notes for placements and interviews: pointers, references, memory, OOP, virtual functions and vtables, templates, STL and smart pointers, explained in English with Hinglish.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 3
React Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style React notes for placements and frontend interviews: JSX, state, useEffect, useRef, memoization, Context, useReducer, custom hooks, virtual DOM, React Router, Redux Toolkit, React 18 and 19, and SSR, explained in English with Hinglish.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 4
Node.js Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style Node.js notes for placements and backend interviews: the event loop, libuv thread pool, modules, streams, Express middleware, REST APIs, JWT auth, security, MongoDB, scaling and Socket.io, explained in English with Hinglish.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 5
Python Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style Python notes for placements and interviews: mutability, lists and dicts, comprehensions, *args and **kwargs, decorators, generators, OOP, dunder methods, the GIL and Python for DSA, explained in English with Hinglish.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 6
SQL Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style SQL and DBMS notes for placements and interviews: joins, NULL traps, order of execution, GROUP BY, subqueries, CTEs, window functions, Nth highest salary, normalization, indexes, ACID and isolation levels, explained in English with Hinglish.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 7
Operating System Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style OS notes for placements and interviews: processes, threads, CPU scheduling with Gantt charts, mutex vs semaphore, deadlock and Banker's algorithm, paging, virtual memory, page replacement and disk scheduling, with solved numericals, in English with Hinglish.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 8
Computer Networks Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style Computer Networks notes for placements and interviews: OSI and TCP/IP models, subnetting, ARP, DHCP, NAT, routing, TCP vs UDP, the 3-way handshake, DNS, HTTP, HTTPS and TLS, and what happens when you type a URL, with solved numericals, in English with Hinglish.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 9
OOPs Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style OOPs notes for placements and interviews: the 4 pillars, abstract class vs interface, overloading vs overriding, dynamic dispatch, composition vs aggregation, SOLID, design patterns, equals and hashCode, with Java examples and Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 10
Java Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style core Java notes for placements and interviews: JVM memory, the Integer cache, Strings, pass by value, Collections, HashMap internals, generics, multithreading, Java 8 streams and garbage collection, explained in English with Hinglish.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 11
DSA Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style DSA notes for placements and coding interviews: Big-O, sliding window, two pointers, binary search, linked lists, trees, heaps, graphs, Dijkstra, union-find, greedy and dynamic programming, with clean C++ templates and Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 12
Aptitude Handwritten Notes with Tricks for Placements (Free PDF)
26 pages of handwritten-style aptitude notes for placement tests: speed maths, number system, percentages, profit and loss, interest, time and work, time speed distance, permutations, probability, series, coding-decoding, blood relations, directions, seating, syllogisms and clocks, with shortcuts, solved examples and Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 13
System Design Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style system design notes for placements and interviews: a step-by-step answer framework, estimation, load balancers, caching, CDN, SQL vs NoSQL, replication, sharding, consistent hashing, CAP, Kafka, API design, rate limiting, microservices and reliability, plus case studies and a low-level design, with Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 14
TypeScript Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style TypeScript notes for placements and interviews: basic types, any vs unknown vs never, type vs interface, narrowing, discriminated unions, generics, keyof, utility types, mapped and conditional types, classes, enums, tsconfig, React and Node with Zod, common errors and a type quiz, with Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 15
Next.js Handwritten Notes for Placements (Free PDF, Next.js 16)
26 pages of handwritten-style Next.js 16 notes for placements and interviews: App Router, special files, dynamic and parallel routes, Server vs Client Components, data fetching and streaming, use cache, cacheLife and revalidation, Partial Prerendering, Server Actions, forms, route handlers, proxy, metadata and SEO, with Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 16
C Language Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style C language notes for placements and interviews: compilation stages, data types and format specifiers, operators and precedence traps, functions and call by value, storage classes, arrays, strings, pointers, pointer arithmetic, const and function pointers, malloc and free, structure padding, bit manipulation, macros, file handling, undefined behaviour and an output quiz, with Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 17
Git and GitHub Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style Git and GitHub notes for placements and interviews: the three areas, commits and Git internals, branches, merge vs rebase, merge conflicts, fetch vs pull, forks and pull requests, branching strategies, reset vs revert, stash, cherry-pick, reflog, bisect, commit messages and GitHub Actions, with Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 19
AI, ML and Generative AI Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style AI, machine learning and generative AI notes for placements and interviews: ML types and workflow, regression, trees and ensembles, k-means and PCA, bias-variance, confusion matrix and F1, gradient descent, neural networks, CNN, RNN, transformers and attention, LLMs, prompt engineering, embeddings, RAG, agents and MCP, with Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Handwritten notes · Part 20
Flutter and Dart Handwritten Notes for Placements (Free PDF)
26 pages of handwritten-style Flutter and Dart notes for placements and interviews: Dart basics, null safety, OOP, mixins, records and sealed classes, Futures, Streams and isolates, Stateless vs Stateful widgets, the State lifecycle, widget, element and render trees, keys, layout, navigation, forms, state management, networking, performance, testing and release, with Hinglish explanations.
- 26 pages
- English + Hinglish
- Free by email
Interview questions · Part 1
Top 50 JavaScript Interview Questions with Answers (Free PDF)
49 pages covering the 50 most-asked JavaScript interview questions, each with a short answer to say first and a detailed explanation: var/let/const, hoisting, closures, this, the event loop and output puzzles, promises and async/await, plus coding answers for debounce, throttle, deep clone, Promise.all, bind, curry, memoize and an LRU cache, with Hinglish explanations.
- 49 pages
- English + Hinglish
- Free by email
Interview questions · Part 2
Top 50 C++ Interview Questions with Answers (Free PDF)
56 pages covering the 50 most-asked C++ interview questions, each with a short answer to say first and a detailed answer with code, output and follow-ups: OOP, pointers vs references, virtual functions and vtable, virtual destructors, Rule of 3/5/0, smart pointers, RAII, STL, move semantics, output questions and coding questions, with Hinglish explanations.
- 56 pages
- English + Hinglish
- Free by email
Interview questions · Part 3
Top 50 React Interview Questions with Answers (Free PDF)
The 50 most-asked React interview questions with detailed answers, for freshers and developers with up to 2 years of experience: virtual DOM, keys, props vs state, every common hook, re-renders, reconciliation, Fiber, concurrent rendering, React 19 Actions, Server Components, hydration, performance, testing and four coding questions, with code, diagrams and Hinglish explanations.
- 51 pages
- English + Hinglish
- Free by email
Interview questions · Part 4
Top 50 Node.js Interview Questions with Answers (Free PDF)
The 50 most-asked Node.js interview questions with detailed answers, for freshers and backend developers with up to 2 years of experience: the event loop, libuv, process.nextTick vs setImmediate, streams and backpressure, EventEmitter, cluster vs worker_threads vs child_process, Express middleware, JWT auth, Mongoose, graceful shutdown, testing, and coding and output-prediction questions, with code and Hinglish explanations.
- 61 pages
- English + Hinglish
- Free by email