Frontend Interview Cheatsheet
HTML Cheatsheet
1. Basic Structure: <!DOCTYPE html>, <html>, <head>, <body>
2. Headings: <h1> to <h6>
3. Text: <p>, <br>, <hr>, <strong>, <em>, <mark>
4. Links & Images: <a href="">, <img src="" alt="">
5. Lists: <ul>, <ol>, <li>
6. Forms: <form>, <input>, <textarea>, <button>, <select>, <label>
7. Semantic Tags: <header>, <footer>, <section>, <article>, <nav>, <aside>, <main>
8. Media: <audio>, <video>, <source>
9. Tables: <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>
10. Meta Tags: charset, viewport, description
11. Attributes: href, src, alt, id, class, style, target
12. Entities: <, >, &, ",
Frontend Interview Cheatsheet
CSS Cheatsheet
1. Syntax: selector { property: value; }
2. Selectors: *, element, #id, .class, [attribute], pseudo-classes (:hover), pseudo-elements (::before)
3. Box Model: content, padding, border, margin
4. Layout: display (block, inline, flex, grid), position (static, relative, absolute, fixed, sticky)
5. Flexbox: display:flex, justify-content, align-items
6. Grid: display:grid, grid-template-columns, grid-gap
7. Colors: color, background-color, rgba(), hex, hsl
8. Fonts: font-family, font-size, font-weight
9. Spacing: margin, padding, line-height
10. Responsive: @media queries
11. Transitions & Animations: transition, animation
Frontend Interview Cheatsheet
JavaScript Cheatsheet
1. Variables: var, let, const
2. Data Types: Number, String, Boolean, Object, Array, Null, Undefined
3. Operators: +, -, *, /, %, ==, ===, !=, !==, <, >
4. Functions: function funcName() {}, arrow functions: () => {}
5. DOM: document.getElementById(), querySelector(), addEventListener()
6. Events: click, submit, keypress
7. Loops: for, while, do-while, forEach
8. Conditionals: if, else, switch
9. Arrays & Objects: push, pop, map, filter, reduce, Object.keys()
10. ES6+: destructuring, template literals, promises, async/await
Frontend Interview Cheatsheet
ReactJS Cheatsheet
1. Components: Functional & Class Components
2. JSX: JavaScript + HTML-like syntax
3. Props: Data passed from parent to child
4. State: useState(), class state
5. Hooks: useState(), useEffect(), useContext()
6. Event Handling: onClick, onChange
7. Conditional Rendering: ternary, && operator
8. Lists & Keys: map(), unique key prop
9. Forms: controlled components with state
10. Routing: react-router-dom (BrowserRouter, Routes, Route, Link)
11. Lifecycle: componentDidMount(), useEffect()
12. Best Practices: component reusability, separation of concerns
