# baeharam/must-know-about-frontend

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/baeharam-must-know-about-frontend).**

3,675 stars · 579 forks

## Links

- GitHub: https://github.com/baeharam/Must-Know-About-Frontend
- awesome-repositories: https://awesome-repositories.com/repository/baeharam-must-know-about-frontend.md

## Topics

`css` `front-end` `html` `interview` `interview-questions` `javascript`

## Description

This project is a comprehensive frontend engineering study guide designed to cover the essential technical concepts of modern web development. It serves as a multi-disciplinary reference for mastering the browser execution engine, the JavaScript language, and the structural fundamentals of the web.

The collection provides deep dives into JavaScript language internals, including execution contexts, closures, prototypes, and the event loop. It further details web browser internals, focusing on the critical rendering path, DOM construction, and engine mechanics.

The guide also covers web security fundamentals like the Same Origin Policy, XSS, and CSRF, as well as detailed CSS layout and styling techniques including the box model, flexbox, and grid systems. Additionally, it provides an overview of frontend infrastructure, covering module bundling, transpilation, and automated CI/CD deployment pipelines.

## Tags

### Education & Learning Resources

- [Frontend Engineering Curricula](https://awesome-repositories.com/f/education-learning-resources/frontend-engineering-curricula.md) — Provides a comprehensive study guide covering browser internals, network protocols, and critical rendering paths for frontend engineering.
- [Frontend Engineering Studies](https://awesome-repositories.com/f/education-learning-resources/frontend-engineering-studies.md) — Acts as a comprehensive study guide for frontend engineering, covering browser rendering and engine mechanics. ([source](https://github.com/baeharam/must-know-about-frontend#readme))
- [JavaScript Engine Internals](https://awesome-repositories.com/f/education-learning-resources/educational-resources/languages-and-programming-concepts/programming-language-mastery-guides/language-concept-guides/javascript-engine-internals.md) — Offers detailed technical explanations of how JavaScript engines parse and execute code.
- [Language Internals Guides](https://awesome-repositories.com/f/education-learning-resources/educational-resources/languages-and-programming-concepts/software-engineering-languages/language-fundamentals/language-internals-guides.md) — Offers educational deep dives into JavaScript closures, prototypes, and the event loop. ([source](https://github.com/baeharam/must-know-about-frontend#readme))
- [JavaScript Language Instruction](https://awesome-repositories.com/f/education-learning-resources/javascript-language-instruction.md) — Provides educational deep dives into the core specifications and behaviors of the JavaScript language.
- [JavaScript Language References](https://awesome-repositories.com/f/education-learning-resources/javascript-language-references.md) — Details internal JavaScript mechanisms such as execution contexts, closures, and the event loop.
- [Web Browser Internals](https://awesome-repositories.com/f/education-learning-resources/python-learning-resources/internals-education/web-browser-internals.md) — Explains the internal architecture of web browsers, focusing on the critical rendering path.
- [Network Protocol Tutorials](https://awesome-repositories.com/f/education-learning-resources/network-protocol-tutorials.md) — Explains the fundamental workings of HTTP/S, REST APIs, and the lifecycle of a URL request. ([source](https://github.com/baeharam/must-know-about-frontend#readme))
- [Hoisting Explanations](https://awesome-repositories.com/f/education-learning-resources/variable-declaration-guides/hoisting-explanations.md) — Provides educational explanations of how variable and function declarations are hoisted in JavaScript. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/hoisting.md))

### Part of an Awesome List

- [Layout Techniques](https://awesome-repositories.com/f/awesome-lists/devtools/css-styling-and-layout/layout-techniques.md) — Serves as a study guide for mastering the CSS box model and modern layout systems. ([source](https://github.com/baeharam/must-know-about-frontend#readme))
- [Web API and Browser Standards](https://awesome-repositories.com/f/awesome-lists/devtools/web-api-and-browser-standards.md) — Serves as a reference for leveraging native browser capabilities and Web APIs.
- [CSS and Styling](https://awesome-repositories.com/f/awesome-lists/devtools/css-and-styling.md) — Serves as a technical reference for CSS layout systems and browser style normalization.
- [Declarative Transition Animations](https://awesome-repositories.com/f/awesome-lists/media/animation-transitions/ui-transition-animations/declarative-transition-animations.md) — Guides the implementation of basic transitions and movements using declarative CSS and compositor threads. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/css-js-animation.md))

### Development Tools & Productivity

- [JavaScript Execution Contexts](https://awesome-repositories.com/f/development-tools-productivity/execution-context-management/javascript-execution-contexts.md) — Explains how JavaScript manages execution contexts and the call stack during code execution. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/execution-context.md))
- [Frontend Build Pipelines](https://awesome-repositories.com/f/development-tools-productivity/frontend-build-pipelines.md) — Provides an overview of automated sequences for bundling, transpiling, and optimizing web assets.
- [Module Bundling](https://awesome-repositories.com/f/development-tools-productivity/source-bundling/module-bundling.md) — Describes the process of merging multiple source files into a single bundle to improve load speed.

### Programming Languages & Runtimes

- [JavaScript Engine Internals](https://awesome-repositories.com/f/programming-languages-runtimes/javascript-engine-internals.md) — Describes the internal pipeline of parsing source code into ASTs and applying JIT optimizations. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/engine.md))
- [Lexical Scope Resolution](https://awesome-repositories.com/f/programming-languages-runtimes/lexical-scope-resolution.md) — Details how the JavaScript engine resolves variables using lexical scope and the scope chain.
- [V8 Bytecode Compilation](https://awesome-repositories.com/f/programming-languages-runtimes/bytecode-compiled-languages/source-to-bytecode-compilers/v8-bytecode-compilation.md) — Covers the compilation of JavaScript into V8 bytecode and just-in-time optimizations.
- [Host and Native Objects](https://awesome-repositories.com/f/programming-languages-runtimes/host-and-native-objects.md) — Explains the difference between language-defined native objects and environment-provided host objects. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/native-host.md))

### Security & Cryptography

- [Web Security](https://awesome-repositories.com/f/security-cryptography/application-and-system-security/web-security.md) — Explains fundamental web security concepts used to protect applications from common browser-based attacks.
- [Web Application Security](https://awesome-repositories.com/f/security-cryptography/web-application-security.md) — Provides a deep dive into protecting web applications from XSS, CSRF, and Same Origin Policy violations. ([source](https://github.com/baeharam/must-know-about-frontend#readme))
- [Web Security Analysis](https://awesome-repositories.com/f/security-cryptography/web-security-analysis.md) — Analyzes common web vulnerabilities including XSS, CSRF, and the Same Origin Policy.

### Software Engineering & Architecture

- [Lexical Scoping](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/scope-and-hierarchy-management/closure-based-state-encapsulations/lexical-scoping.md) — Explains the language mechanism of lexical scoping to create persistent environments and closures. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/closure.md))
- [Abstract Syntax Tree Parsing](https://awesome-repositories.com/f/software-engineering-architecture/abstract-syntax-tree-parsing.md) — Explains how JavaScript engines parse source code into abstract syntax trees for optimization.
- [DOM Event Propagation Control](https://awesome-repositories.com/f/software-engineering-architecture/event-flow-control/dom-event-propagation-control.md) — Details how to manage event bubbling and capturing phases within the browser DOM. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/event-delegation.md))
- [Browser Style Resets](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/browser-style-resets.md) — Details techniques for resetting default browser styles to create a blank slate for custom design. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/reset-normalize.md))

### User Interface & Experience

- [Box Model Sizing](https://awesome-repositories.com/f/user-interface-experience/element-groupings/alignment-spacing/glyph-padding-adjusters/element-padding/box-model-sizing.md) — Explains the critical distinction between content-box and border-box sizing in the CSS box model. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/box-model.md))
- [Semantic Markup Standards](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/accessible-content-structuring/semantic-markup-standards.md) — Provides guidance on using semantic HTML and proper document types for better structure and compatibility. ([source](https://github.com/baeharam/must-know-about-frontend#readme))
- [Grid Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems.md) — Provides a comprehensive guide to implementing structured page layouts using CSS Grid and Flexbox. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/grid.md))
- [Critical Rendering Paths](https://awesome-repositories.com/f/user-interface-experience/text-rendering/dom-based-rendering/critical-rendering-paths.md) — Provides a deep dive into the critical rendering path, including DOM and CSSOM construction.
- [Browser Style Normalizers](https://awesome-repositories.com/f/user-interface-experience/browser-style-normalizers.md) — Covers the use of CSS normalization libraries to ensure consistent element rendering across browsers. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/reset-normalize.md))
- [Display Mode Definitions](https://awesome-repositories.com/f/user-interface-experience/display-mode-definitions.md) — Analyzes the differences between CSS block, inline, and inline-block layout behaviors. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/block-inline-inline-block.md))
- [Element Centering](https://awesome-repositories.com/f/user-interface-experience/element-centering.md) — Explains various techniques for aligning UI components both horizontally and vertically using Flexbox, Grid, and absolute positioning. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/center.md))
- [Element Stacking](https://awesome-repositories.com/f/user-interface-experience/element-stacking.md) — Teaches how to manage the visual stacking order of elements using the z-axis and positioning. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/z-index.md))
- [Legacy Float Layouts](https://awesome-repositories.com/f/user-interface-experience/float-free-layouts/legacy-float-layouts.md) — Covers the use of CSS float properties and techniques to prevent parent container collapse. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/bfc.md))
- [Floating Layouts](https://awesome-repositories.com/f/user-interface-experience/floating-layouts.md) — Explains how to manage floating layouts and isolate text from floating elements using formatting boundaries. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/bfc.md))
- [Image Alignment Fixes](https://awesome-repositories.com/f/user-interface-experience/image-alignment-fixes.md) — Provides specific CSS fixes to eliminate default baseline gaps that appear below images. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/img-space.md))
- [Margin Collapsing Behaviors](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/spacing-scales/margin-collapsing-behaviors.md) — Describes how vertical margins collapse and provides methods to prevent this behavior. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/margin-collapsing.md))

### Web Development

- [Browser Rendering Pipelines](https://awesome-repositories.com/f/web-development/browser-rendering-pipelines.md) — Details the browser rendering pipeline and the creation of the render tree for layout and painting.
- [DOM Manipulation](https://awesome-repositories.com/f/web-development/dom-manipulation.md) — Covers the manipulation of the document object model to programmatically change elements and text. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/bom-dom.md))
- [Box Model Tutorials](https://awesome-repositories.com/f/web-development/dom-to-canvas-renderers/css-box-model-renderers/box-model-tutorials.md) — Teaches the CSS box model, including the interaction between content, padding, borders, and margins.
- [Script Loading Strategies](https://awesome-repositories.com/f/web-development/script-loading-strategies.md) — Details strategies for managing JavaScript execution and download timing using async and defer attributes. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/script-tag-type.md))
- [Asynchronous Script Loading](https://awesome-repositories.com/f/web-development/asynchronous-script-loading.md) — Describes the use of async and defer strategies to prevent JavaScript from blocking the render path.
- [Formatting Contexts](https://awesome-repositories.com/f/web-development/css-development-utilities/css-only-ui-components/formatting-contexts.md) — Teaches how to create new formatting contexts to isolate elements and prevent vertical margin collapsing. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/bfc.md))
- [Element-Linked Data Stores](https://awesome-repositories.com/f/web-development/element-linked-data-stores.md) — Covers the use of data attributes to attach custom, private data to DOM elements for script access. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/data.md))
- [Event Delegation](https://awesome-repositories.com/f/web-development/event-delegation.md) — Explains the event delegation pattern using bubbling to manage multiple child elements with one listener.
- [Modern Web Syntax Transpilation](https://awesome-repositories.com/f/web-development/modern-web-syntax-transpilation.md) — Covers the conversion of modern JavaScript syntax into versions compatible with older browsers.
- [Rendering Strategies](https://awesome-repositories.com/f/web-development/server-side-rendering/rendering-strategies.md) — Provides a technical analysis of the trade-offs between different web page rendering strategies. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/csr-ssr.md))

### Data & Databases

- [Application Key-Value Stores](https://awesome-repositories.com/f/data-databases/data-engineering-infrastructure/data-persistence-storage/data-storage/client-side-persistence/local-storage-solutions/application-key-value-stores.md) — Explains the use of browser-based key-value storage for persisting application state on the client side. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/web-storage-api.md))

### DevOps & Infrastructure

- [Frontend Build Pipelines](https://awesome-repositories.com/f/devops-infrastructure/frontend-build-pipelines.md) — Covers the fundamentals of frontend build pipelines, including module bundling and transpilation.

### Graphics & Multimedia

- [Hardware-Accelerated Animations](https://awesome-repositories.com/f/graphics-multimedia/hardware-accelerated-animations.md) — Provides detailed guidance on using GPU acceleration to achieve high-performance UI animations and smooth state changes. ([source](https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/css-js-animation.md))