JOBSEEKER?

HTML/CSS Interview Questions

Practice for HTML/CSS interviews by solving TestDome questions. Our interview questions are used by more than 7,000 companies and 450,000 individual test takers.

Jobseekers: Certify Your Knowledge

Take a Certification Test

Companies: Use Our Tests for Screening

Buy a Pack Of Candidates

Need to practice your HTML and CSS skills for an upcoming job interview? Try solving these HTML and CSS interview questions that test knowledge of elements, attributes, styling, selectors, and other skills. We’ll provide feedback on your answers, and you can use a hint if you get stuck.

These HTML and CSS interview questions are examples of real tasks used by employers to screen job candidates such as front-end developers, UI/UX designers, and others that need to use HTML and CSS to create and implement a user interface.

1. Avatar

Easy  
HTML/CSS Borders Element Size Styling Public

Every user on your website has an image avatar that is displayed when they post a comment. You want to style these images differently from other images on your site. Add a CSS class named avatar that fulfils the following requirements:

  1. The avatar's border is rounded, so that it appears as a circle.
  2. The avatar's width and height are both 150px.
  3. The avatar has a solid border, has a width of 2px, and be colored gray.

For example, the avatar in the template should look like:

Cat avatar

Solve Question

2. Semantics

Easy  
HTML/CSS Elements and Attributes HTML5 Semantic Tags Public

Update the website's HTML, without using JavaScript or CSS, to make use of semantic elements so that:

  • The classless outer div element is replaced with a more appropriate element.
  • The divs with the image and caption classes are replaced with self-contained content elements.
  • The divs with the lorem-ipsum and description classes are replaced with elements, so that by default only the contents of the description element are shown. When the contents of the description element are clicked, the visibility of the rest of the lorem-ipsum element is toggled.
Solve Question

3. Spreadsheet

Easy  
HTML/CSS Elements and Attributes Tables Public

You've been sent a snippet from a spreadsheet, and have been asked to re-create it for display on the company's internal website.

Re-create the following spreadsheet using HTML, in a table appropriately captioned "Purchase Orders".

Solve Question

4. Styling Links

Easy  
HTML/CSS CSS Selectors Styling Text Formatting Public

Write CSS so that the link <a href="http://www.testdome.com">Check documentation</a> looks like the one in the image below, and the cursor looks like a question mark when hovering over the link:

A stylish link with a hover-over mouse pointer.

Solve Question

5. Inspector

Easy  
HTML/CSS Bug Fixing Elements and Attributes Public

Fix the bugs in the following HTML code.

Solve Question

6. Movie Ticket

Hard 
HTML/CSS Animation CSS Advanced New Public

You're making the 'Buy' button for a movie ticket website, which has the class buy-button.

The buy-button class has the following CSS:

.buy-button {
  width: 100px;
  height: 100px;
  background: Orange;
  /* Make it a circle */
  border-radius: 50%;
  /* Center horizontally and vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

A 1 second animation named wiggle should be added to it so the button wiggles when the mouse hovers over it.

Rotating to 25 degrees clockwise (first 0.33 s), then to 25 degrees counterclockwise (second 0.33 s) and then returning to the original position.

It should look like this:

Button moves clockwise after 0.33 seconds, counterclockwise at 0.66 seconds and back to the starting position at 1 second.

Which of the following would produce the desired animation?

(Select all acceptable answers.)

Solve Question

7. Advanced Form

Hard  
HTML/CSS Elements and Attributes Forms HTML5 Public

With the new HTML5 features, modify the form so that:

  • The formula input field suggests the following options when the user starts to type: "sin", "cos", "tan" and "cot".
  • The iterations input field is a slider with possible values from 1 to 10.
  • The precision input field is a number picker with possible values from 1 to 100, where 50 is the default value.
Solve Question

8. Articles

Hard  
HTML/CSS CSS Selectors Positioning Styling Public

Using CSS only (without adding additional HTML attributes), style articles so that they occupy the whole browser window and have the following properties:

Article Position Background color
First Upper-left quarter Red
Second Upper-right quarter Yellow
Third Lower-left quarter Blue
Fourth Lower-right quarter Green

The four colored quarters of the articles.

Solve Question

If you feel ready, take one of our timed public HTML/CSS Interview Questions tests:
HTML/CSS

HTML/CSS Online Test (Easy / Hard)

HTML/CSS and Bootstrap Online Test (Easy / Hard)

HTML/CSS and JavaScript Online Test (Easy / Hard)

HTML/CSS and JavaScript with jQuery Online Test (Easy / Hard)

HTML/CSS and React Online Test (Easy / Hard)

HTML/CSS and Vue.js Online Test (Easy / Hard)

HTML/CSS, Angular, TypeScript, and Node.js Online Test (Easy / Hard)

HTML/CSS, Angular, TypeScript, Node.js, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript with jQuery, and Bootstrap Online Test (Easy / Hard)

HTML/CSS, JavaScript, and Bootstrap Online Test (Easy / Hard)

HTML/CSS, JavaScript, and React Online Test (Easy / Hard)

HTML/CSS, JavaScript, C# Algorithms, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, C#, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, Java Algorithms, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, Java, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, Node.js, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, PHP, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, Python Algorithms, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, Python, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, Ruby, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, Scala, and SQL Online Test (Easy / Hard)

HTML/CSS, JavaScript, VB.NET, and SQL Online Test (Easy / Hard)

HTML/CSS, React, and Node.js Online Test (Easy / Hard)

HTML/CSS, React, Node.js, and SQL Online Test (Easy / Hard)

HTML/CSS, Vue.js, and Node.js Online Test (Easy / Hard)

HTML/CSS, Vue.js, Node.js, and SQL Online Test (Easy / Hard)

ASP.NET (Core) MVC

ASP.NET (Core) MVC, HTML/CSS, JavaScript, C#, and SQL Online Test (Easy / Hard)

ASP.NET Web Forms

ASP.NET Web Forms, HTML/CSS, JavaScript, C#, and SQL Online Test (Easy / Hard)

Not exactly what you are looking for? Go to our For Jobseekers section.
Dashboard Start Trial Sign In Home Tour Tests Questions Pricing For Jobseekers