Web Technologies & SQL Aptitude
Cheat Sheet
# 1. HTML (HyperText Markup Language)
**Basics:**
- Tags: <html>, <head>, <body>, <h1>-<h6>, <p>, <a>, <img>, <ul>, <ol>, <li>, <div>, <span>,
<form>, <input>
- Semantic: <header>, <footer>, <article>, <section>, <nav>, <main>
- Attributes: id, class, src, href, alt, title, style
**Forms:**
- <input type="text|password|radio|checkbox|submit|email|number|date">
- <textarea>, <select>, <option>
- Validation: required, pattern, maxlength, min, max
**Key Points:**
- <div> block vs <span> inline
- HTML5 input types: email, url, number, range, date
- <b> vs <strong>
# 2. CSS (Cascading Style Sheets)
**Selectors:**
- Element, Class (.class), ID (#id), Attribute, Pseudo-classes (:hover, :first-child), Pseudo-
elements (::before, ::after)
**Box Model:**
- Content → Padding → Border → Margin
- box-sizing: border-box
**Layout:**
- display: block | inline | inline-block | flex | grid | none
- Flexbox: justify-content, align-items, flex-direction, flex-wrap
- Grid: grid-template-columns, grid-template-rows, gap
**Other Properties:**
- position: static | relative | absolute | fixed | sticky
- z-index, overflow
- float & clear
**Interview Tips:**
- em vs rem
- Specificity: Inline > ID > Class > Element
- Relative, absolute, fixed, sticky difference
# 3. JavaScript (JS)
**Variables:** var, let, const
- Primitives: string, number, boolean, null, undefined, symbol
- Reference: object, array, function
**Operators:**
- Arithmetic: + - * / %
- Comparison: == vs ===, != vs !==
- Logical: && || !
- Ternary: condition ? true : false
**Functions:**
- Normal: function foo() {}
- Arrow: const bar = () => {}
**DOM:**
- [Link](), [Link]()
- [Link], [Link], [Link]
- Events: addEventListener('click', fn)
**ES6+:**
- Template literals: `Hello ${name}`
- Destructuring: const {a, b} = obj;
- Spread/Rest: ...arr, ...args
- Modules: export / import
**Arrays:** map(), filter(), reduce(), forEach(), find(), some(), every()
**Async:** Promises, async/await
**Interview Tips:**
- this in arrow vs normal function
- Closure & scope chain
- Hoisting (var vs let/const)
# 4. [Link]
**Concepts:**
- Components: functional & class
- JSX, Props, State
- Lifecycle methods: componentDidMount, componentDidUpdate, componentWillUnmount
**Hooks:** useState, useEffect, useRef, useContext, useMemo, useCallback
**Rendering & Routing:**
- Conditional: {condition && <Component />}
- Lists: [Link](item => <Component />)
- React Router: <Route path="/" element={<Home />} />
**Tips:**
- State vs Props
- Controlled vs Uncontrolled
- Virtual DOM vs Real DOM
- Key prop in lists
# 5. [Link] & Backend
**[Link]:**
- Modules: fs, http, path, os, express
- npm: package manager
- Async & event-driven
**Express:**
const express = require('express');
const app = express();
[Link]('/', (req,res)=>[Link]('Hello'));
[Link](3000);
- Middleware: [Link]()
- Routing: [Link](), [Link](), etc.
**Database:**
- SQL: MySQL, PostgreSQL
- NoSQL: MongoDB
- CRUD operations
**API:**
- REST: GET, POST, PUT, DELETE
- JSON: { "key": "value" }
- Status: 200 OK, 201 Created, 400 Bad Request, 404 Not Found, 500 Server Error
# 6. Web Concepts
**Protocols:** HTTP, HTTPS, WebSocket
**Performance:** Minification, Lazy loading, Caching
**Security:** XSS, CSRF, SQL Injection
**Browser:** Local/Session storage, Cookies, Event Loop, Rendering flow
**Aptitude Focus:** GET vs POST, null vs undefined, event delegation, CSS specificity, async
JS, SQL logic, debugging snippets
# 7. SQL Cheat Sheet
**Basics:**
- DDL: CREATE, ALTER, DROP, TRUNCATE
- DML: SELECT, INSERT, UPDATE, DELETE
- DCL: GRANT, REVOKE
- TCL: COMMIT, ROLLBACK, SAVEPOINT
**Table Operations:**
CREATE TABLE table_name (...);
ALTER TABLE table_name ADD COLUMN ...;
DROP TABLE table_name;
TRUNCATE TABLE table_name;
**SELECT & WHERE:**
SELECT * FROM table_name;
SELECT name, age FROM table_name;
SELECT DISTINCT column FROM table_name;
SELECT * FROM table_name WHERE age > 25;
SELECT * FROM table_name WHERE name LIKE 'A%';
...