mks-blogs-logo
General
26-Jun-2024

Important web development questions

Web DevQuestionsHTMLCSSJSReactWebpackBrowserSEO
Important Web Dev Questions | Hero Image | s.mani.in

HTML

  1. What is the advantage in choosing semantically appropriate elements while writing HTML?
  2. Does position of <script> tag in the HTML affect its behaviour during parsing? If yes, then how?
  3. Why do we use <!DOCTYPE html> declaration at the top of the HTML file?
  4. What is the difference between <link> tag and <a> tag, and in which part of HTML do we use them?
  5. Name the attributes and their expected values used while declaring the following tags -
    • <link>
    • <a>
  6. What is the use of <iframe> in HTML?
  7. What does tabindex HTML attribute do?

CSS

  1. What is the difference between px,em,rem and fr font unit?
  2. How to set the base font of webpage?
  3. What do you understand by Normal Document Flow?
  4. What all values does position CSS property accept? How do these values affect the Normal Document Flow?
  5. What is the difference among display: none, visibility: hidden and opacity: 0?
  6. How to set and use the CSS variables?
  7. What is the meaning and siginicance of the word cascading in Cascading Style Sheets(CSS)
  8. The building blocks of CSS are Inheritance, Cascade and Specificity. What are they?
  9. Why do browsers have a default stylesheet, known as user-agent-stylesheet?
  10. Give one example on both transition and transform CSS property showing their usage.
  11. Give an example showing the usage of keyframe and animation CSS property.
  12. What are the acceptable values of display CSS property?
  13. What is CSS Flex Layout? List down all the properties associated with it.
  14. What is CSS Grid Layout? List down all the properties associated with it.
  15. What are the ways with which we can center an html element relative to its parent?
  16. Illustrate the features of the following types of CSS selector -
    • Simple Selectors
    • Combinator Selectors
    • Pseudo-Class Selectors
    • Pseudo-Elements Selectors
    • Attribute Selectors
  17. What advantages do media queries provide in CSS?
  18. Why do we wanna use the word-break CSS property?
  19. Explain CSS Box Model.
  20. State the difference between box-sizing: border-box and box-sizing: content-box?
  21. What is the difference between box-shadow and drop-shadow CSS property?
  22. What is the benefit of using vendor prefixes in few of the CSS properties?
  23. Create a table in HTML and color the rows alternately.
  24. Whatis the use of :root pseudo class?

JavaScript

  1. Create a dropdown widget using only CSS and Vanilla JavaScript.
  2. What is the use of Map and Set classes in JavaScript? How do we use them?
  3. Explain the differences between the following and in which scenarios we would wanna use one over another
    • Map & WeakMap
    • Set & WeakSet
  4. What are the differences among var, let and const variable declarations in JS?
  5. What do you understand by the term Execution Context?
  6. What is Closure in JavaScript?
  7. What is Hoisting in JavaScript?
  8. What is Function Borrowing in JavaScript?
  9. Why JS is called multi-paradigm programming language?
  10. What is the difference among call(), apply() and bind() methods? Explain with the examples.
  11. State the difference between Rest and Spread operator in JS.
  12. What is ES6? Why should we care about this?
  13. What are polyfills? Create polyfills of map, promise, apply, forEach, bind and Array.isArray.
  14. What is the difference between function-expression and function-declaration?
  15. How arrow-functions are different than the normal functions in JS?
  16. What is Currying? Explain with an example.
  17. State the difference between forEach and map method.
  18. What are the various ways with which we can create an object?
  19. What is the difference between Object.seal() and Object.freeze() methods of Object class?
  20. What does Object.defineProperty() do?
  21. How to configure the property of an object for writability and enumerability?
  22. How can we iterate over an Object which inherently is a non-iterable built-in type?
  23. What all built-in types in JS are iterables?
  24. State the difference between iterators and generators.
  25. How does Promise deal with the asychronous code in JavaScript? How do we declare a promise?
  26. List down the static methods available in the Promise class.
  27. What advantages does async/await have over Promise?
  28. What are the difference between the terms Shallow-Copy and Deep-Copy?
  29. State the difference between __proto__ vs prototype.
  30. Explain the term prototype-chain and prototype-inheritance.
  31. How to set and get the prototype of an Object?
  32. How is the type of a construct checked in JS?
  33. State the difference between == and === equality checks.
  34. What is the advantage of optional chaining?
  35. What benefit does destructuring provide in JS?
  36. What is Event-Loop in JavaScript? Is there any difference between the event-loop of Browser and NodeJS runtime environment?
  37. Explain the purpose of following methods on event object -
    • preventDefault
    • stopPropagation

Document Object Model (DOM)

  1. What is event-bubbling, event-capturing and event-delegation? What is the need of having these in the DOM?
  2. Create a table only using VanillaJS.
  3. What are the different ways of selecting an element using Vanilla JS?
  4. How to create an element and put it in the DOM dynamically?
  5. Let's say who want to inject 10 paragraph nodes in the DOM. Will you add them iteratively (i.e. one by one) in the DOM or will you use some other strategy? Provide the reasoning for selecting the strategy.
  6. What is Shadow DOM? What is the need of having this type of DOM?
  7. Suppose you want to render an infinite scrolling functionality with the data having 1Cr+ data points. At the scroll end, new data is received from the server and the data is pushed to the DOM. Is it a good idea to keep the 1Cr+ DOM nodes in the DOM? What are the methods with which we can mitigate the problem risen by this?

NodeJS

  1. List down the phases of event-loop of NodeJS runtime environment. Explain each phase.
  2. One problem that is observed while following the callback-based asynchronous code handling is Callback-Hell. What is it? What are the options available to circumvent this problem?
  3. Since both setTimeout and promise is used to handle asynchronous code, whose callback is executed first if both are present in the code in the same execution context?
  4. What is the difference between microTask and macroTask queues? Which queue does event-loop give more priority to during the execution?
  5. Which queue do the callbacks provided in the following APIs go to -
    • process.nextTick
    • setTimeout
    • setInterval
    • Promise
    • queueMicrotask
    • setImmediate
  6. When is queueMicrotask used?
  7. Why a node project has both package.json and package-lock.json?
  8. What benefits do npm and yarn have over one another?
  9. How to pass environment variables in a node project?
  10. ExpressJS is a web framework built on top of NodeJS. This framework utilises and implements the concept of middlewares. Please explain what are they.

Browser

  1. Why Browser is called a SandBox?
  2. Highlight the features (storage size, retention time etc) of the following browser storages -
    • Local Storage
    • Session Storage
    • Cookies
    • IndexedDB
  3. How to use the storage APIs mentioned in the last question?
  4. What is a Service Worker? What is the need of having this?
  5. How does a Service Worker thread communicate with the main thread of the Browser?
  6. What are the metrics associated with the performance analysis of a page in the browser? (Hint: TTFB, TTI etc)
  7. What is the difference between load and DOMContentLoaded event?
  8. State the difference between HTTP and HTTPS.
  9. What is Critical Rendering Path(CRP)? What are the stages through which website rendering pass?
  10. In order to have animating effect using JavaScript, it is recommended to use requestAnimationFrame over setTimeout Browser API. What problem does the latter pose which the former solve?
  11. When are the requestAnimationFrame callbacks executed? Which queue are they sent to? Is it handled by the event-loop?
  12. Code out a view in which a small box is traversing from left-to-right within a stipulated time, but smoothly. Dont use CSS animations for this.
  13. Between the moment you hit enter in the address bar with the URL and the moment when the page is visible in the browser, lot of entities are at work in the background. What are those entities?
  14. What do you understand by Render-Blocking and Parser-Blocking resources?
  15. What are entities involved in the functioning of a Browser Engine?
  16. What are Observers? Why is it a recommended approach towards detecting the changes over eventListeners?
  17. In what scenario, the following observers are used -
    • Intersection Observer
    • Mutation Observer
    • Resize Observer
    Explain with examples.
  18. What does heap-memory indicate and why is it useful during the performance analysis of a webpage?
  19. What is Cross Origin Resource Sharing (CORS)? What are pre-flight requests and when are they triggered? Are CORS error generated for only JS requests?
  20. What is CSP? How CSP rules can prevent your site from a malicious attack?
  21. What is Prefetching, Preloading and Preconnecting?
  22. How does incremental parsing for HTML work in Browser? Does the browser send each element to the rendering pipeline or does it follow batching model?
  23. Let's suppose your website is taking a lot of time to go through the initial load. What general strategy can you opt to optimize your site?

Tooling

  1. What is the use of PostCSS Plugin? What are the useful PostCSS sub-plugins?
  2. How does SCSS/SASS help in writing CSS in easy way? Does code in SCSS get transpiled to CSS or SCSS is directly sent to the browser?
  3. What is the use of Babel plugin?
  4. What is Abstract Syntax Tree (AST)? And why is it beneficial to know this while writing a plugin?
  5. How TypeScript is converted to JavaScript?
  6. How would you setup a react project from scratch? What all packages/plugins are the bare minimum for this?
  7. What is JSX? Who takes care of converting JSX syntax to HTML?
  8. What is cURL command? What are the basic options that are used with it? Give an example.
  9. What is the main reason of using a bundler(e.g. webpack) in the project?
  10. Why production builds are often subjected to minification and obfuscation processes?
  11. What is the use of source map files?
  12. What are the differences between SPA and MPA?
  13. Explain CSR, SSR and Hydration in detail.

Search Engine Optimization

  1. What is a web-crawler?
  2. Why are the files such as sitemap.xml and robots.txt are essential in a website from the SEO perspective?
  3. List down the most crucial factors that can influence Search Engine Optimization.
  4. What is Schema Markup? How is it useful for Search Engine? How to implement it in the webpage?
  5. What is Open Graph Protocol? What does it do and what was the need of its creation?
  6. Explain the benefits of using rel="noopener noreferrer nofollow" attribute in a tag.

General

  1. What is Cache Busting? What are the various ways to achieve this?
  2. What is the reason captcha is used in the forms? What is the full form of captcha?
  3. What are Turing tests?
  4. The second's hand of watch moves after 1 second. There must be some mechanism in it which is telling that "lets move now since 1s has passed". What is that internal mechanism in the computer system which informs it that 1s or 1ms has passed?
Table of Content
  • HTML
  • CSS
  • JavaScript
  • Document Object Model (DOM)
  • NodeJS
  • Browser
  • Tooling
  • Search Engine Optimization
  • General

Drop a note or follow me on

s.mani | gmail profile
s.mani | linked profile
s.mani | instagram profile
s.mani | youtube profile
s.mani | medium profile
DMCA.com Protection Status