HTML and CSS Interview Questions for Freshers and Experienced Developers
Frontend interviews can get tricky when a layout behaves differently from what you expected. You write a grid structure on your local screen and test it once and then during live coding sessions and elements start breaking on smaller mobile displays. Freshers and experienced developers can run into these questions at software companies in Pune and Mumbai. Knowing how HTML structure works and how CSS rules affect a layout gives you a much stronger answer than memorizing definitions. This guide covers frequently asked HTML and CSS interview questions with explanations and code examples you can practise before a technical round.
Which HTML Questions Should Freshers Practise First?
Most interviews begin with the basics. Before moving to harder problems an interviewer may check whether you can explain page structure and accessibility and choose the right HTML elements.
1. How Is HTML5 Different From Earlier HTML?
HTML is the markup language used to organize the content on a web page. HTML5 brought in newer browser features including built-in media support and semantic elements and options for storing data in the browser.
Older websites often depended on plugins such as Flash to play audio or video. HTML5 made these tasks easier with native elements such as <audio> and <video> and added semantic tags including <header> and <nav> and <article> and <footer>. It also introduced the <canvas> element and browser storage options and more useful form validation features.
<!-- Older HTML structure using generic divisions -->
<div id="header">Website Title</div>
<div class="content">Main content block</div>
<!-- HTML5 structure using semantic containers -->
<header>Website Title</header>
<main>
<article>Main content block</article>
</main>
<footer>Copyright details</footer>
Semantic tags make a project easier to read and maintain especially when several developers are working on the same codebase across teams in Hinjewadi and Pimpri and Magarpatta.
2. How Can You Make HTML More Accessible?
Accessible HTML helps people use a website with screen readers and keyboard navigation or other assistive technology. Start with a sensible heading structure and useful text alternatives and make sure interactive elements can receive keyboard focus.
Give meaningful images descriptive alt text. Keep keyboard focus visible on interactive controls and connect each form field to its label using matching for and id values.
<!-- Poorly structured image tag -->
<img src="data-chart.png">
<!-- Accessible image tag containing alt descriptions -->
<img src="data-chart.png" alt="Bar graph displaying annual sales growth">
<!-- Form accessibility structure -->
<label for="user-email">Work Email</label>
<input type="email" id="user-email" name="user-email" aria-describedby="email-instructions">
<span id="email-instructions">Enter official corporate email address</span>
3. When Should You Use Div or Span?
Use <div> when you need a block-level container for a section of content. It normally starts on a new line. A <span> stays inline and is useful when you want to style a small part of a sentence without creating a separate block.
<div class="product-card">
<h2>Product Description</h2>
<p>This item is currently <span class="status-active">available</span> in stores.</p>
</div>
Which HTML Topics Come Up After the Basics?
After checking basic syntax an interviewer may move on to forms and browser storage and how browsers decide to render a document.
4. How Does HTML5 Form Validation Work?
HTML form controls can validate many inputs before the form is submitted. Attributes such as required and pattern and minlength and maxlength handle common checks without a custom JavaScript validation routine.
<form action="/submit-data" method="POST">
<label for="account-name">Account Name (3-15 characters):</label>
<input type="text" id="account-name" name="account-name"
required minlength="3" maxlength="15"
pattern="[A-Za-z0-9_]+"
title="Letters numbers and underscores only">
<label for="contact-email">Email Address:</label>
<input type="email" id="contact-email" name="contact-email" required>
<button type="submit">Submit Details</button>
</form>
5. Why Does an HTML Document Need DOCTYPE?
The DOCTYPE line tells the browser how to interpret the document. Put <!DOCTYPE html> at the beginning of the page so the browser uses standards mode rather than the older quirks mode that can cause unexpected layout differences.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width and initial-scale=1.0">
<title>Candidate Portal</title>
</head>
The UTF-8 character declaration helps browsers display letters and symbols from different languages correctly.
6. How Do LocalStorage and SessionStorage Differ?
Both APIs store small pieces of data in the browser as key-value pairs. localStorage keeps its data after the browser is closed until it is cleared. sessionStorage is tied to a tab's page session and is cleared when that session ends.
Storage Property
LocalStorage Mechanism
SessionStorage Mechanism
Data Persistence
Retained until manually cleared
Cleared when tab closes
Storage Capacity
Approximately 5MB to 10MB
Approximately 5MB to 10MB
Window Scope
Shared across tabs with same origin
Isolated strictly to single tab
Application Scenario
Storing user themes and persistent settings
Handling multi-step checkout drafts
// LocalStorage usage for persistent theme settings
localStorage.setItem('theme' and 'dark');
const userTheme = localStorage.getItem('theme');
// SessionStorage usage for temporary form data
sessionStorage.setItem('formStep' and '2');
const currentStep = sessionStorage.getItem('formStep');
Which CSS Questions Test Specificity and Layout Skills?
CSS questions often come down to why one rule wins over another or how a layout is arranged. Interviewers want to know whether you can follow the cascade and explain what the browser is applying.
7. How Does CSS Specificity Decide Which Rule Wins?
When several selectors target the same element specificity helps determine which declaration takes effect. IDs generally carry more weight than classes and attributes while type selectors carry less weight. Inline styles usually override normal stylesheet declarations and although the cascade also considers importance and origin.
/* Element selector - weight value 1 */
p { color: blue; }
/* Class selector - weight value 10 */
.text-label { color: yellow; }
/* ID selector - weight value 100 */
#main-heading { color: red; }
/* Inline styles override external selector rules with weight value 1000 */
<p id="main-heading" class="text-label" style="color: green;">
This string renders green text due to inline weight precedence
</p>
If two declarations have the same origin and importance and specificity then the one that appears later in the cascade wins.
8. How Does the CSS Box Model Affect Width?
Each element has a content area and padding and border and margin. With box-sizing: border-box the declared width includes the padding and border so the element is less likely to exceed the size you set.
/* Default model where padding adds onto width */
.standard-box {
width: 300px;
padding: 20px;
border: 5px solid #333;
/* Total calculated rendering width equals 350px */
}
/* Border box model where width stays fixed */
.fixed-box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #333;
/* Total calculated rendering width stays exactly 300px */
}
9. When Is Flexbox a Better Choice Than Grid?
HTML Flexbox is handy when items need to line up in a row or a column. Grid is better when the layout needs control over rows and columns together such as a dashboard or a full page structure.
Feature Aspect
Flexbox Approach
CSS Grid Approach
Dimension Axis
One dimensional layout flow
Two dimensional layout matrix
Ideal Scenarios
Aligning buttons and navigation lists and icon groups
Building overall page structures and dashboard blocks
Content Adaptation
Items flex according to content dimensions
Items fit predetermined explicit grid tracks
/* Flexbox centering implementation */
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Two dimensional CSS Grid page template */
.dashboard-grid {
display: grid;
grid-template-columns: 240px 1fr 300px;
grid-template-rows: auto 1fr auto;
gap: 16px;
}
How Do You Handle Responsive Design and Browser Compatibility?
A page should work on a narrow phone screen and still make sense on a wide desktop display. Interviewers may ask how you prevent elements from overflowing or layouts from breaking at different screen sizes.
10. How Do Media Queries Help Build Responsive Layouts?
Media queries let CSS respond to the viewport size. With a mobile-first approach you write the basic styles for small screens first and add wider-screen adjustments using min-width breakpoints.
/* Base styles designed for mobile screen displays */
.content-container {
width: 100%;
padding: 12px;
}
.side-panel {
display: none;
}
/* Tablet screen layout adjustments */
@media (min-width: 768px) {
.content-container {
width: 720px;
margin: 0 auto;
}
.side-panel {
display: block;
width: 30%;
}
}
/* Desktop screen layout adjustments */
@media (min-width: 1024px) {
.content-container {
width: 960px;
}
}
Add the viewport meta tag inside the document's <head> so mobile browsers use the device width when laying out the page:
<meta name="viewport" content="width=device-width and initial-scale=1.0">
11. How Can You Troubleshoot Cross-Browser CSS Issues?
Some CSS features behave differently across browsers and that can lead to spacing problems or missing styles. A reset or normalize stylesheet can reduce default differences while Autoprefixer adds prefixes where supported browser targets require them.
Tools such as normalize.css help make default browser styles more consistent. Feature detection and vendor prefixes can also help when supporting older browser versions.
/* Vendor prefixes targeting legacy flexbox rendering */
.card-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
12. How Do You Find the Cause of Horizontal Overflow?
A horizontal scrollbar often means an element is wider than its container. Inspect the element dimensions in developer tools and check the breakpoints and any fixed widths. Images and videos should also have a maximum width so they cannot spill outside the layout.
/* Prevent image assets from breaking layout boundaries */
img and video {
max-width: 100%;
height: auto;
display: block;
}
/* Prevent container overflow causing horizontal scroll */
.page-wrapper {
width: 100%;
overflow-x: hidden;
}
Which Advanced CSS Topics Matter in Senior Interviews?
For senior roles the discussion often moves from syntax to trade-offs. You may need to explain how you would diagnose a slow page or choose a maintainable styling approach for a large component library.
13. What Can You Do to Improve CSS Performance?
CSS performance work usually starts with removing unused rules and keeping stylesheets lean. It also helps to understand how styling fits into browser rendering when you build a full stack project from the ground up.
Keep selectors simple where possible. Long chains can be harder to maintain and may require more complex matching than a direct class selector.
/* Inefficient selector chain forcing long matching cycles */
body div.main-wrapper section.content ul.link-list li a.active-link {
color: #0066cc;
}
/* Optimized CSS selector allowing fast direct lookup */
.nav-link-active {
color: #0066cc;
}
Critical styles can be included early so the first visible part of a page renders quickly. Load the remaining styles efficiently and measure the result with Core Web Vitals rather than assuming that one technique will always improve the score.
14. How Can You Make a Navigation Menu Work on Mobile?
A common pattern is to show a full navigation row on desktop and a menu button on smaller screens. The button should open and close the mobile links and remain usable with a keyboard.
/* Default desktop navbar styling */
.navigation-menu {
display: flex;
gap: 24px;
list-style: none;
}
.hamburger-button {
display: none;
}
/* Mobile responsive menu dropdown styles */
@media (max-width: 768px) {
.hamburger-button {
display: block;
cursor: pointer;
}
.navigation-menu {
display: none;
position: absolute;
top: 60px;
left: 0;
width: 100%;
background-color: #ffffff;
flex-direction: column;
padding: 16px;
}
.navigation-menu.active {
display: flex;
}
}
15. When Should You Use rem em or px?
The unit you choose affects how spacing and text respond to changes in the page's base font size. Pixels can be useful for fine details while em and rem are often better for scalable typography and spacing.
Unit Type
Unit Reference Point
Preferred Real World Application
px
Fixed absolute pixel value
Defining thin borders and explicit drop shadows
em
Relative to font size of parent container
Component level spacing tied to local typography
rem
Relative to font size of root html element
Page layout margins and padding values and global typography
/* Establishing accessible typography scaling using rem units */
html {
font-size: 16px;
}
h1 {
font-size: 2.5rem; /* Calculates accurately to 40px */
}
.card-container {
padding: 1.25rem; /* Calculates accurately to 20px */
}
Using rem for shared spacing and typography makes it easier to adjust the overall scale by changing the root font size.
Common Questions About HTML and CSS Interviews
Can I Learn HTML and CSS While Changing Careers?
A career change is easier to manage when you practise a little every day instead of trying to memorize every rule. You may learn basic HTML structure and CSS styling within four to six weeks but the pace depends on your starting point and the time you can spend practising. Build a few pages yourself so you can see how the code behaves.
What Can a Frontend Fresher Earn in Pune?
Starting salaries vary by company and by the skills a candidate can demonstrate. Frontend freshers in Pune may see offers around ₹3.5 LPA to ₹6 LPA but these figures are indicative rather than guaranteed. A portfolio with responsive layouts and readable code can help during campus placements and off-campus interviews.
Should I Learn JavaScript Before Frontend Interviews?
HTML and CSS cover page structure and presentation but many frontend interviews include JavaScript as well. Be ready to explain how scripts work with the DOM and how form events are handled and how a page updates without a full reload. Reviewing top programming languages can also help you understand where frontend skills fit into software development.
Which Projects Help a Frontend Portfolio Stand Out?
A few complete projects are more useful than a long list of unfinished demos. Try building a business website with semantic HTML and a dashboard using CSS Grid and a form that includes accessible labels and native validation. Put the code on GitHub so recruiters can review your decisions and see how you organize a project.
How Should You Approach Frontend Whiteboard Questions?
If you are asked to plan a layout on a whiteboard or shared editor first clarify what the page needs to do. Mention the screen sizes and browser support you are accounting for. Sketch the HTML structure before adding CSS and explain your choices as you work through the problem.
Do Training Certificates Help With Frontend Jobs?
A certificate can show that you completed a course but it does not replace practical ability. Guided exercises and project work through a program such as SevenMentor can help you build that foundation. In an interview you will still need to explain your code and demonstrate how you solve problems. A clear portfolio is useful evidence of that work.
Where Can I Get Hands-On Frontend Training?
Guided training can give beginners time to practise with feedback instead of working through every problem alone. Look for labs and code reviews and mock interviews that let you test what you have learned. Learners can explore the Full Stack Python Course or other web technology training options through SevenMentor.
How Can You Prepare for Your Next Frontend Interview?
Good preparation means knowing the concepts and being able to use them under time pressure. Practise semantic HTML and CSS specificity and build a few layouts with Flexbox and Grid. Then resize the browser and fix the problems you find instead of stopping when the page first looks right.
When preparing for interviews in Pune or Mumbai you can combine independent practice with feedback from someone who understands frontend work. SevenMentor offers training with mentor guidance and lab projects and mock interview practice. Visit the official SevenMentor contact page to ask about available schedules and training options.
Shital Chauhan
Expert trainer and consultant at SevenMentor with years of industry experience. Passionate about sharing knowledge and empowering the next generation of tech leaders.