© Dev.

Roshan
HTML/CSS Topics Details
Request Lifecycle, DOM, and CSSOM Understanding the flow of HTTP requests, Document Object Model, and CSS
Object Model

Semantic HTML and Accessibility Guidelines Writing meaningful HTML tags and ensuring web accessibility for all users

Forms and Validations Creating forms with proper input validation, both client-side and server-side

Media - Responsive Images, Audio, and Video Techniques for handling responsive images, audio, and video elements

Browser-Side Storage, Workers, and Caching Overview of Local Storage, Session Storage, Cookies, IndexDB, WebSQL

Service Workers, Web Workers Asynchronous background tasks and service worker caching strategies

SEO Basics Essential SEO strategies, meta tags, and on-page optimization

Rules, Selectors, and Property Values Understanding CSS rules, selectors, cascading behavior, inheritance, and
specificity

Responsive Design (Mobile and Desktop First) Building layouts that adapt to different screen sizes and devices

Media Queries Using media queries to apply styles based on device characteristics

Layout - Float, Flexbox, Grid, Display, Positioning CSS layout models and positioning techniques

Animations and Transitions - Basics, SVG Creating smooth transitions and animations in CSS, including working with
SVG

Processors / Preprocessors, Frameworks, CSS-in-JS Using tools like Sass, Less, and exploring CSS-in-JS libraries
 © Dev. Roshan
OOP / Functional JS Topics - (1) Details
Variables, Scope, Data Types, Operators, Covers variable declaration, scope types (global, block, function), various data types,
Loops, If Statements operators, loops (for, while, do-while), and conditional statements (if-else,
switch)

Error Handling and Functions Handling runtime errors using try-catch, and understanding function declarations,
expressions, arrow functions, and their scope

Execution Context (this) Understanding how the context of this changes, and using call, apply, bind
methods to control it

Differentiating Factors in ES5 and ES6 Key differences between ES5 and ES6, including let, const, arrow functions,
classes, template literals, destructuring, and default parameters

Events and Event Handling, DOM Manipulation Managing browser events (click, input, etc.), and dynamically manipulating the
DOM tree (creating, updating, deleting elements)

Object Prototype, Prototypal Inheritance, Understanding the prototype chain, prototypal inheritance, and closures (functions
Closure retaining access to their scope)

Async Programming - Event Loop and Delving into how the JavaScript event loop works, including macro-tasks, micro-tasks
Microtasks (promises, setTimeout, setInterval)

Callbacks and setTimeout, Promises, How to handle asynchronous operations using callbacks, promises, and modern
Async/Await async/await syntax

Promise Methods - Promise.all, Understanding Promise.all and Promise.race for handling multiple promises and
Promise.race their results efficiently

Error Handling in Async Code Techniques for managing errors in asynchronous code, particularly in promises and
async functions (try-catch, .catch())

Testing Overview of different types of tests (unit, integration, E2E), and libraries used for testing
(Jest, Enzyme, Karma, Jasmine)
 © Dev. Roshan
OOP / Functional JS Topics - (2) Details

Patterns, Module Systems, Principles Design patterns: Singleton, Factory, and module systems like CommonJS, UMD,
AMD. Also includes the PubSub pattern, observables

12-Factor App, SOLID, DRY Principles Key software design principles, including 12-factor app methodology, SOLID
design principles, and DRY (Don't Repeat Yourself)

Functional Programming Concepts Principles of functional programming, covering pure functions, side effects,
closures, immutability, point-free style, map/reduce/filter, higher-order functions,
currying, and composition

PWA (Progressive Web Apps) Concepts related to PWAs, such as service workers, caching strategies,
background sync, push notifications, App Manifest, and Workbox for offline
access

Tooling Webpack, Parcel, Rollup: understanding module bundling, config setups, code
splitting, tree shaking, federation, loaders, and plugins

Code Splitting, Minification, and Techniques for optimizing code delivery in production, including bundling,
Production-Ready Assets minification, and code splitting

Transpilation Using Babel or other tools to transpile modern JavaScript into

GIT Hooks Understanding and using GIT hooks to automate tasks at key points of a Git
workflow (pre-commit, post-commit, etc.)

Code Analysis Tools Using tools like ESLint, Husky for static code analysis and ensuring code quality
during the development process
 © Dev. Roshan
NFR Details

PERFORMANCE Compression, Caching / CDN / Expirations, HTTP Headers, JS Profiling (CPU/MEM),

Basic perf testing: lighthouse, webpagetests. Awareness of metrics like TTFB, TTI and their
possible high number causes

SECURITY SSL/TLS, CORS, XSS, CSRF, Access / Refresh Tokens / Encryptions, Validations /
Encoding, HTTP Cookies / Sec. Headers, Sessions / Authentication / Authorization / protect
user data, RBAC, ABAC

Accessibility Understands A/AA/AAA accessibility guidelines and write code adhering to meet the
accessibility benchmarks. Has a fair understanding to make dynamic content accessible
with ARIA, uses enhanced techniques to meet accessibility standards viz: skip navigation,
no JS, etc. Creating accessible forms, content and best practices

DevOps Gulp/Grunt - create tasks / custom scripts, Webpack / Parcel / Rollup - config from-ground
setup, Code Splitting, Loaders and plugins, Understands GIT hooks and can use them.
Code bundling/minification/production ready assets using Webpack etc. Test Case runners.
Docker, Vagrant and the differences.

- Integrate plugins like sitespeed.io to ensure performance-related checks on the pages

Logging Standards: Can customize logging framework to extend to create own formats
with additional data like session id, hostname for log statements