Full HTML, CSS & Bootstrap Interview Handbook
Focused on Fresher Interviews (No JavaScript)
HTML Introduction
HTML (HyperText Markup Language) is used to structure web pages. Example: headings,
paragraphs, images, links, forms and tables.
HTML vs HTML5
HTML5 introduced semantic tags like header, nav, section, article and footer, along with audio,
video and canvas support.
div vs span
div is a block-level element that starts on a new line. span is an inline element used inside text.
id vs class
id is unique for one element. class can be reused on multiple elements.
Semantic Tags
header, nav, main, section, article, aside and footer improve readability, accessibility and SEO.
Forms
Common tags: form, input, label, textarea, select, option and button. Frequently asked: GET vs
POST.
GET vs POST
GET sends data in URL and is used for retrieval. POST sends data in request body and is more
secure for form submissions.
CSS Introduction
CSS styles HTML elements using selectors and properties.
Selectors
Element selector, class selector, id selector, universal selector and pseudo-class selectors.
Box Model
Content -> Padding -> Border -> Margin. One of the most asked interview topics.
Margin vs Padding
Margin is outside the border. Padding is inside the border around content.
Display Property
block, inline, inline-block, none, flex and grid.
Positioning
static, relative, absolute, fixed and sticky.
Relative vs Absolute
Relative moves from original position. Absolute positions relative to nearest positioned parent.
Fixed vs Sticky
Fixed stays on screen while scrolling. Sticky behaves normally then sticks at a position.
Flexbox
Used for one-dimensional layouts. Important properties: justify-content, align-items, flex-direction,
flex-wrap.
justify-content
Controls alignment along the main axis.
align-items
Controls alignment along the cross axis.
Grid
Used for two-dimensional layouts with rows and columns.
Flexbox vs Grid
Flexbox = one-dimensional. Grid = two-dimensional.
Responsive Design
Websites should adapt to mobile, tablet and desktop screens.
Media Queries
Example: @media(max-width:768px){...}. Used to change layout for different screen sizes.
Units
px, %, em, rem, vh and vw.
z-index
Controls stacking order of overlapping elements.
Overflow
visible, hidden, scroll and auto.
Transitions
transition: all 0.3s linear; creates smooth property changes.
Animations
More advanced than transitions and use keyframes.
Bootstrap Introduction
Bootstrap is a CSS framework used to build responsive websites quickly.
Bootstrap Grid
Uses containers, rows and columns. Example: col-md-6.
Container vs Container-Fluid
Container has fixed responsive widths. Container-fluid uses full width.
Bootstrap Navbar
Responsive navigation component with navbar, navbar-brand and navbar-toggler.
Bootstrap Cards
Used to display content in a structured card format.
Bootstrap Buttons
btn, btn-primary, btn-success and other classes.
Bootstrap Forms
Ready-made styling for form controls.
Browser Compatibility
A webpage should work correctly across Chrome, Firefox, Edge and Safari.
Top 100 Interview Questions with Short Answers
1. What is HTML?
2. What is HTML5?
3. What is a semantic tag?
4. Difference between div and span?
5. Difference between id and class?
6. What is CSS?
7. Types of CSS?
8. What is the box model?
9. Difference between margin and padding?
10. What is display:block?
11. What is display:inline?
12. What is inline-block?
13. What is position:relative?
14. What is position:absolute?
15. What is position:fixed?
16. What is position:sticky?
17. What is z-index?
18. What is Flexbox?
19. What is justify-content?
20. What is align-items?
21. What is align-self?
22. What is flex-wrap?
23. What is CSS Grid?
24. Difference between Grid and Flexbox?
25. What is responsive design?
26. What is a media query?
27. What is vh?
28. What is vw?
29. What is rem?
30. What is em?
31. What is overflow?
32. What is opacity?
33. What is line-height?
34. What is font-weight?
35. What is transition?
36. What is animation?
37. What is transform?
38. What is scale?
39. What is rotate?
40. What is translate?
41. What is Bootstrap?
42. Why use Bootstrap?
43. What is a container?
44. What is a row?
45. What is a column?
46. What is navbar?
47. What is navbar-toggler?
48. What is card component?
49. What is btn-primary?
50. What is browser compatibility?
Final Revision Checklist
✓ HTML structure ✓ Forms and tables ✓ Semantic tags ✓ CSS selectors ✓ Box model ✓
Positioning ✓ Flexbox ✓ Grid ✓ Media Queries ✓ Responsive Design ✓ Transitions ✓ Bootstrap
Grid ✓ Bootstrap Navbar ✓ Bootstrap Cards ✓ Top interview differences ✓ Practice at least 2 mini
projects