HTML & CSS Guide for Beginners
Start Your Web Development Journey
HTML & CSS Interview Preparation Guide (High
Level)
HTML Basics
• What is HTML?
• Difference between HTML and HTML5
• Structure of an HTML document
• Semantic vs non-semantic elements
Semantic Elements
• <header>
• <main>
• <section>
• <article>
• <aside>
• <footer>
• <nav>
• <figure>
• <figcaption>
• Interview Question: Why should we use semantic HTML instead of only <div>
elements?
Forms
• <form>
• <input> types
• <label>
• <textarea>
• <select>
Accessibility
• ARIA
• Alt text
• Keyboard navigation
• Screen readers
Meta Tags
• viewport
• charset
• description
• keywords
• favicon
Images
• Responsive images
• srcset
• picture
• lazy loading
Tables
• thead
• tbody
• colspan
• rowspan
CSS Selectors
• Universal
• Class
• ID
• Attribute
• Child
• Descendant
• Adjacent sibling
• General sibling
• Pseudo-class
• Pseudo-element
• Interview Question: Which selector has higher priority?
Frequently Asked Interview Questions
• 1. Explain the CSS Box Model.
• 2. Difference between display:none and visibility:hidden.
• 3. Difference between relative, absolute, fixed, and sticky.
• 4. Difference between Flexbox and Grid.
• 5. Explain CSS specificity.
• 6. Difference between em and rem.
• 7. Difference between inline, block, and inline-block.
• 8. What are semantic HTML elements?
• 9. Why is accessibility important?
• 10. Difference between id and class.
• 11. What is the difference between margin and padding?
• 12. What is the purpose of the viewport meta tag?
• 13. How do you center a div horizontally and vertically?
• 14. What is box-sizing: border-box?
• 15. Difference between visibility:hidden and opacity:0.
• 16. Explain the CSS cascade and inheritance.
• 17. What is the difference between justify-content and align-items?
• 18. How does z-index work?
• 19. What are pseudo-classes and pseudo-elements?
• 20. How do media queries make a website responsive?
Missing CSS Sections (Added)
Box Model
• margin
• border
• padding
• content
• box-sizing: border-box
Display
• block
• inline
• inline-block
• none
• flex
• grid
Position
• static
• relative
• absolute
• fixed
• sticky
• Question: Why is my absolute element not moving where I expect?
Flexbox
• flex-direction
• justify-content
• align-items
• align-content
• flex-wrap
• gap
• flex-grow
• flex-shrink
• flex-basis
• order
• Questions: Difference between justify-content and align-items
• When to use align-content?
• Why isn't flex-grow working?
CSS Grid
• grid-template-columns
• grid-template-rows
• repeat()
• minmax()
• gap
• auto-fit
• auto-fill
• grid-area
Units
• px
•%
• rem
• em
• vw
• vh
• fr
• Question: Why is rem preferred over px?
Responsive Design
• Media queries
• Mobile-first design
• Breakpoints
• Responsive images
Specificity
• Priority: Inline Style > ID > Class > Element
• !important
• Cascade
• Inheritance
Pseudo Classes
• :hover
• :focus
• :active
• :first-child
• :last-child
• :nth-child()
• :not()
Pseudo Elements
• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection
Overflow
• hidden
• scroll
• auto
• visible
Z-index
• Stacking context
• Why z-index sometimes doesn't work
Transitions
• transition
• duration
• delay
• timing function
Transform
• translate()
• rotate()
• scale()
• skew()
Animation
• @keyframes
• Animation properties
CSS Variables
• :root { --primary: #2563eb; }
Common Layout Questions
• Navbar
• Sidebar
• Hero section
• Card layout
• Pricing cards
• Responsive gallery
• Login form
• Dashboard layout
• Sticky header
• Footer