Try to solve 7 HTML/CSS interview questions and Front End interview questions below. Hints can help you find answers to questions you are having trouble with.

1. Avatar

Borders Element size Styling
   
Easy 

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

HTML5, CSS3  
 


  •   Avatar shape: Wrong answer
  •   Avatar size: Wrong answer
  •   Avatar border: Wrong answer


2. Semantics

Elements and attributes HTML5 Semantic tags
   
Easy 

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.
HTML5, CSS3  
 


  •   Classless div element: Wrong answer
  •   Self contained content: Wrong answer
  •   Toggling lorem-ipsum visibility: Wrong answer


3. Spreadsheet

Elements and attributes Tables
   
Easy 

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".

HTML5, CSS3  
 


  •   The table has the correct title: Wrong answer
  •   The table has the correct header structure: Wrong answer
  •   The table has the correct body structure: Wrong answer
  •   The table has the correct data: Wrong answer


4. Styling Links

CSS selectors Styling Text formatting
   
Easy 

Write CSS so that link <a href="http://www.testdome.com">Check documentation</a> and cursor looks like a question mark:

A stylish link with a hover-over mouse pointer.

HTML5, CSS3  
 


  •   Uppercase letters: Wrong answer
  •   No underline: Wrong answer
  •   Mouse pointer: Wrong answer
  •   Content around link: Wrong answer


5. Inspector

Bug fixing Elements and attributes
   
Easy 

Fix the bugs in the following HTML code.

HTML5, CSS3  
 


  •   Paragraphs: Wrong answer
  •   Headings: Wrong answer
  •   Lists and images: Wrong answer
  •   Table: Wrong answer


6. Advanced Form

Elements and attributes Forms HTML5
   
Hard 

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

  • The formula input field has an autocomplete option with the following options: "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.
HTML5, CSS3  
 


  •   Formula (autocomplete): Wrong answer
  •   Iterations (slider): Wrong answer
  •   Precision (number picker): Wrong answer


7. Articles

CSS selectors Positioning Styling
   
Hard 

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.

HTML5, CSS3  
 


  •   Article size: Wrong answer
  •   Article position: Wrong answer
  •   Article color: Wrong answer


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)

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)

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.