Full Stack Dev Short Notes
Shared 12/3/2025•347 views
1. Web Development Fundamentals HTTP/HTTPS: Request-response protocol. HTTPS is secure HTTP. URLs: Uniform Resource Locators (e.g., https://example.com/path?query=val#frag ). DNS: Domain Name System, translates domain names to IP addresses. Browsers: Render HTML, CSS, execute JavaScript. Clients & Servers: Client (browser) requests resources, Server provides them. 2. Frontend Development HTML (HyperText Markup Language) Structure: Defines content structure. Tags: <!DOCTYPE html> , <html> , <head> , <body> . Common Elements: Headings: <h1> - <h6> Paragraphs: <p> Links: <a href="..."> Images: <img src="..." alt="..."> Lists: <ul> (unordered), <ol> (ordered), <li> (list item) Divisions: <div> (block-level), <span> (inline) Forms: <form> , <input> , <button> Semantic: <header> , <nav> , <main> , <article> , <section> , <footer> CSS (Cascading Style Sheets) Styling: Describes presentation of HTML. Selectors: Tag: p { ... } Class: .my-class { ... } ID: #my-id { ... } Attribute: [type="text"] { ... } Combinators: div p (descendant), div > p (child) Properties: color , font-size , margin , padding , display , position . Box Model: Content, Padding, Border, Margin. Layout: Flexbox: 1D layout (rows or columns). display: flex; Grid: 2D layout (rows and columns). display: grid; Responsive Design: @media queries for different screen sizes. JavaScript (JS) Client-side Scripting: Adds interactivity to web pages. Variables: var (old), let (block scope), const (block scope, immutable reference). Data Types: Number, String, Boolean, Null, Undefined, Symbol, BigInt, Object. Operators: Arithmetic, Assignment, Comparison ( == vs === ), Logical ( && , || , ! ). Control Flow: if/else , switch , for , while . Functions: Declaration: function greet() { ... } Expression: const greet = function() { ... } Arrow: const greet = () => { ... } DOM Manipulation: Accessing and modifying HTML elements. document.getElementById('id') document.querySelector('.class') element.addEventListener('click', handler) element.textContent = 'New Text' element.classList.add('active') Asynchronous JS: Callbacks: Functions passed as arguments. Promises: Represents eventual completion/failure of an async operation. .then() , .catch() . Async/Await: Syntactic sugar over Promises for cleaner async code. async function() { await promise; } ES6+ Features: Classes, Modules ( import/export ), Destructuring, Spread/Rest operators, Template Literals. Frontend Frameworks/Libraries React: Component-based UI library. Virtual DOM, JSX, State, Props, Hooks ( useState , useEffect , useContext ). Vue.js: Progressive framework. MVVM pattern, Components, Data, Methods, Computed, Watchers. Angular: Comprehensive framework. TypeScript, Components, Modules, Services, Dependency Injection, RxJS. 3. Backend Development Node.js Runtime Environment: Executes JS outside browser. NPM: Node Package Manager. Manages dependencies. Event-driven, Non-blocking I/O: Ideal for real-time apps. Modules: require() / module.exports (CommonJS), import/export (ES Modules). Core Modules: fs (file system), http , path . Express.js Web Framework for Node.js: Simplifies building APIs and web apps. Routing: app.get('/', handler) , app.post('/api', handler) . Middleware: Functions executed sequentially. app.use(express.json()) . Request/Response Objects: req (request), res (response). Databases SQL (Relational): Structured data, tables, schemas, relationships. Examples: PostgreSQL, MySQL, SQLite. Key Concepts: Tables, Rows, Columns, Primary Key, Foreign Key, Joins. SQL Commands: SELECT , INSERT , UPDATE , DELETE , CREATE TABLE . NoSQL (Non-Relational): Flexible schemas, scale horizontally. Examples: MongoDB (Document), Redis (Key-Value), Cassandra (Column-Family). MongoDB: Collections, Documents. JSON-like structure. Mongoose (for Node.js): ODM (Object Data Modeling) library for MongoDB. ORMs/ODMs: Object-Relational Mappers / Object-Document Mappers. SQL: Sequelize, TypeORM, Prisma. NoSQL: Mongoose. API Development (RESTful) Representational State Transfer: Architectural style for networked applications. Resources: Identified by URLs (e.g., /users , /products/123 ). HTTP Methods: GET: Retrieve resource(s). POST: Create new resource. PUT: Update/replace existing resource. PATCH: Partially update existing resource. DELETE: Remove resource. Stateless: Each request from client to server contains all information needed. JSON: JavaScript Object Notation. Common data interchange format. Authentication & Authorization Authentication: Verifying user identity (Who are you?). Session-based: Server stores session ID. Token-based: JWT (JSON Web Tokens). Stateless. Authorization: Determining what an authenticated user can do (What can you access?). Roles, Permissions. Hashing: One-way function for storing passwords securely (e.g., bcrypt). 4. Development Tools & Practices Git: Version control system. Commands: git init , git add , git commit , git status , git log , git branch , git checkout , git merge , git push , git pull , git clone . Platforms: GitHub, GitLab, Bitbucket. Testing: Unit Tests: Test individual functions/components (Jest, React Testing Library). Integration Tests: Test interaction between components/modules. End-to-End (E2E) Tests: Simulate user scenarios (Cypress, Playwright, Selenium). Deployment: Cloud Platforms: AWS, Google Cloud, Azure. PaaS: Heroku, Vercel, Netlify, Render. CI/CD: Continuous Integration/Continuous Deployment. Automates build, test, deploy. Containerization: Docker. Packages app and its dependencies. Monitoring & Logging: Track application health and debug issues. 5. Key Concepts & Principles MVC (Model-View-Controller): Architectural pattern (frontend & backend). DRY (Don't Repeat Yourself): Avoid redundant code. KISS (Keep It Simple, Stupid): Prioritize simplicity. Separation of Concerns: Each component/module handles a distinct function. Security: Input validation, sanitization, protecting against XSS, CSRF, SQL Injection. Performance: Optimize asset loading, database queries, caching.