HTML, CSS, and JavaScript - 100 Questions & Answers
HTML (30 Questions)
1. What does HTML stand for?
HyperText Markup Language
2. Who is the inventor of HTML?
Tim Berners-Lee
3. What is the latest version of HTML?
HTML5
4. What does <!DOCTYPE html> do?
It defines the document type and version of HTML.
5. What is the purpose of <head> tag?
To contain metadata like title, scripts, styles.
6. What is the difference between <div> and <span>?
<div> is block-level, <span> is inline.
7. What is a semantic element in HTML5?
Elements that clearly describe their meaning, e.g., <article>, <section>, <nav>.
8. What tag is used to insert an image?
<img src='...' alt='...'>
9. How do you create a hyperlink?
<a href='url'>link</a>
10. Which tag is used to create a table?
<table>
11. Which tag is used for forms in HTML?
<form>
12. How to create a text input?
<input type='text'>
13. How to make a dropdown in HTML?
<select><option>Item</option></select>
14. What is the use of action and method attributes in a form?
They define where and how to send form data.
15. What is the difference between GET and POST?
GET sends data in URL, POST in body (more secure).
16. How do you embed a video?
<video src='...' controls></video>
17. What is a placeholder in an input field?
It shows a hint inside an input field.
18. What is the use of the <meta> tag?
To define metadata (charset, viewport, SEO keywords).
19. Can HTML be case-sensitive?
No, HTML is not case-sensitive.
20. What is the difference between id and class?
id is unique, class can be reused.
21. How to comment in HTML?
<!-- comment -->
22. What is alt in an image tag?
Alternative text shown if image fails to load.
23. Can you nest forms in HTML?
No, it's invalid HTML.
24. What are self-closing tags?
Tags like <br>, <hr>, <img> that don’t need a closing tag.
25. How do you open a link in a new tab?
Use target='_blank' in <a> tag.
26. What is a block-level element?
It starts on a new line and takes full width.
27. What is an inline element?
It doesn’t break the flow and fits within a line.
28. List 3 semantic tags in HTML5.
<header>, <footer>, <article>
29. What is the purpose of the <script> tag?
To add JavaScript to HTML pages.
30. What is ARIA in HTML?
Accessible Rich Internet Applications - improves accessibility.
CSS (30 Questions)
1. What does CSS stand for?
Cascading Style Sheets
2. What is the use of CSS?
To style and layout HTML elements.
3. How to include CSS in HTML?
Inline, internal (<style>), or external (<link>).
4. What is the difference between id and class in CSS?
#id is unique; .class can be applied to multiple elements.
5. How do you write a CSS comment?
/* comment */
6. What is a universal selector?
* selects all elements.
7. What is specificity in CSS?
It determines which rule applies if multiple rules match.
8. How do you select all <p> tags inside a <div>?
div p
9. How do you set a background color in CSS?
background-color: red;
10. How to center text?
text-align: center;
11. What is the CSS Box Model?
Describes layout using margin, border, padding, and content.
12. What is the difference between padding and margin?
Padding is inside the border; margin is outside.
13. How do you add a border to an element?
border: 1px solid black;
14. What does box-sizing: border-box; do?
Includes padding and border in total width/height.
15. How to create rounded corners?
border-radius: 10px;
16. What are the different position values?
static, relative, absolute, fixed, sticky
17. What does z-index do?
Controls stacking order of elements.
18. What does float do in CSS?
Places an element to the left or right.
19. How to make a responsive layout?
Use media queries and relative units (%, em, rem).
20. What is Flexbox in CSS?
A layout module for flexible and responsive design.
21. How to apply a Google Font?
Use <link> in HTML or @import in CSS.
22. What is a pseudo-class?
A keyword added to selectors like :hover, :first-child.
23. How do you animate an element?
Use @keyframes and animation properties.
24. What is the difference between em and rem?
em is relative to parent; rem is relative to root.
25. What is the difference between visibility: hidden and display: none?
Hidden hides element but keeps space; none removes it.
26. What is a media query?
A CSS technique for applying styles based on screen size.
27. How do you apply multiple classes?
class="btn primary" and use .btn.primary {} in CSS.
28. How do you make a sticky header?
Use position: sticky; top: 0;
29. What is the default position in CSS?
static
30. What is the difference between inline and block in CSS?
Inline does not break line, block does.
JavaScript (40 Questions)
1. What is JavaScript?
A scripting language used to make web pages interactive.
2. Where can you write JavaScript code?
In <script> tags or external .js files.
3. What is the correct syntax to print in console?
console.log("Hello");
4. How do you declare a variable?
Using var, let, or const
5. What is the difference between == and ===?
== checks value only, === checks value and type.
6. Name primitive data types in JS.
String, Number, Boolean, Null, Undefined, Symbol, BigInt
7. What is an array?
A list-like object to store multiple values.
8. How do you access an array element?
Using index: array[0]
9. What is an object in JavaScript?
A collection of key-value pairs.
10. How do you define a function?
function name() {}
11. How do you write an if-else statement?
if (condition) { } else { }
12. How do you write a switch statement?
switch(x) { case 1: break; default: }
13. What are loops in JavaScript?
Structures to repeat code: for, while, do...while
14. How do you write a for loop?
for (let i = 0; i < 10; i++) {}
15. What is a while loop?
Repeats code while a condition is true.
16. What is the DOM?
Document Object Model – a tree of HTML elements.
17. How do you access an element by ID?
document.getElementById("id")
18. How do you change text content?
element.textContent = "new text";
19. How to add a click event in JavaScript?
element.addEventListener("click", function() {});
20. How do you prevent default behavior?
event.preventDefault();
21. What is the difference between let, var, and const?
var is function scoped; let and const are block scoped.
22. What is a callback function?
A function passed to another function to be called later.
23. What is hoisting?
JS moves declarations to the top before execution.
24. What is closure in JS?
A function remembers variables from its lexical scope.
25. What is arrow function syntax?
const f = () => {}
26. What is NaN?
Not a Number
27. What is typeof operator?
Returns the type of a variable.
28. What is event bubbling?
Event propagates from child to parent.
29. What is this in JavaScript?
Refers to the current execution context.
30. What are promises in JS?
Used to handle asynchronous operations.
31. How do you write a promise?
new Promise((resolve, reject) => { });
32. What does async/await do?
Simplifies handling of Promises.
33. What is JSON?
JavaScript Object Notation – data format.
34. How to convert JSON to object?
JSON.parse()
35. How to convert object to JSON?
JSON.stringify()
36. What is the use of setTimeout()?
Delays code execution.
37. What is localStorage in JS?
Stores data in the browser with no expiry.
38. What is a template literal?
String with backticks: `Hello ${name}`
39. How do you handle errors in JS?
Using try...catch blocks.
40. What is the difference between null and undefined?
null is assigned by developer; undefined means uninitialized.
