HTML/CSS Online Test - TestDome

HTML/CSS Online Test Test real-world HTML/CSS skills that matter in a world with AI. Protected by AI proctoring.

For jobseekers

Practice your skills and earn a certificate of achievement when you score in the top 25%.

Take a Practice Test

For companies

Screen real HTML/CSS skills, flag human or AI assistance, and interview the right people.

Create an HTML/CSS Screening Test From $7 per candidate

About the test

The HTML/CSS online test assesses knowledge of HTML and CSS through a series of live coding questions that test the ability to implement and style a user interface. Tasks on this test are executed inside the Google Chrome web browser.

The assessment includes work-sample tasks such as:

• Defining HTML elements and their attributes, and applying CSS styles to them.
• Creating forms to group inputs and collect user data.
• Using responsive web design principles.

A good Web front-end developer or UI/UX developer needs a solid understanding of HTML and CSS in order to create and style web pages and user interfaces that both look good and are easy to navigate.

Sample public questions

Menu Spacing Easy7 mincodePublic AI-resistant HTML/CSS Bug Fixing Element Spacing New

A website features a menu with multiple menu items. However, the borders and spacing between and within these items are not properly styled.

Update only the CSS styles for the menu-item class so that the website looks like the image below:

All borders have a thickness of 2px.

Solve Question Inspector Easy10 mincodePublic HTML/CSS Bug Fixing Elements and Attributes

Fix the bugs in the following HTML code.

Solve Question Avatar Easy7 mincodePublic HTML/CSS Borders Element Size Styling

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:

Solve Question Blog Tags Easy5 mincodePublic HTML/CSS CSS Basics Styling

A blog uses several tags which are highlighted in different ways based on relevance.

Apply the CSS classes to the HTML so that the result looks like the image below:

Solve Question Spreadsheet Easy7 mincodePublic HTML/CSS Elements and Attributes Tables

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 Advanced Form Hard10 mincodePublic HTML/CSS Elements and Attributes Forms HTML5

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 Articles Easy20 mincodePublic HTML/CSS CSS Selectors Positioning Styling

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

Solve Question Semantics Easy7 mincodePublic HTML/CSS Elements and Attributes HTML5 Semantic Tags

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 Styling Links Easy7 mincodePublic HTML/CSS CSS Selectors Styling Text Formatting

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:

Solve Question Movie Ticket Hard5 minmcaPublic HTML/CSS Animation CSS Advanced

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:

Which of the following would produce the desired animation?

Solve Question View all public questions

For jobseekers: get certified

Earn a free certificate by achieving top 25% on the HTML/CSS test with public questions.

Take a Certification Test

Sample silver certificate

Sunshine Caprio

Java and SQL TestDome Certificate View certificate Take a Certification Test

Used by

What others say

Simple, straight-forward technical testing

TestDome is simple, provides a reasonable (though not extensive) battery of tests to choose from, and doesn't take the candidate an inordinate amount of time. It also simulates working pressure with the time limits.

Jan Opperman, Grindrod Bank

For companies: premium questions

Buy TestDome to access premium questions that can't be practiced.

Create an HTML/CSS Screening Test From $7 per candidate

Ready to interview?

Use these and other questions from our library with our Code Interview Platform.

Try Sample Interview Know More

38 more premium HTML/CSS questions

Links, Article Style, Cities, Editor, Format Table, Shirts, Upload, Warehouse, Widgets, iframe, Link, Addition, Bookmark, Blog, Christmas Tree, Data Entry, Price List, Baby Names, Label Color, Bicycle Report, Game Offer, Curious Leaf, Gaming Console, Travel Blog, Vegetable Encyclopedia, Keywords, Timesheet, Email Tables, Ad, Ice Cream Flavors, Screen Reader, Logo, Loading, Subscribe, Seating Arrangement, Share Button, Wave Background, TestDome Logo.

Skills and topics tested

• HTML/CSS
• CSS Selectors
• Styling
• Fonts
• Elements and Attributes
• HTML5
• Forms
• Element Spacing
• Positioning
• Hyperlink
• IFrame
• CSS Advanced
• Element Size
• Bookmarks
• Semantic Tags
• Selectors
• Flexbox
• Tables
• CSS Basics
• Accessibility
• Responsive Design
• UI
• Language
• Borders
• Inline Styles
• Video
• Animation
• CSS Layout

For job roles

• UI/UX Developer
• Web Front-End Developer

Sample candidate report

View candidate report

Need it fast? AI-crafted tests for your job role

TestDome generates custom tests tailored to the specific skills you need for your job role. Sign up now to try it out and see how AI can streamline your hiring process!

Use AI Test Generator

What others say

Simple, straight-forward technical testing

TestDome is simple, provides a reasonable (though not extensive) battery of tests to choose from, and doesn't take the candidate an inordinate amount of time. It also simulates working pressure with the time limits.

Jan Opperman, Grindrod Bank

Product reviews

Used by

Solve all your skill testing needs

150+ Pre-made tests

From web development and database administration to accounting and MS Excel. See all pre-made tests.

130+ skills

From SQL and Python to Attention to Detail and Logical Reasoning. See all questions to filter by skill.

AI-ready assessments

Test what matters in a world with AI, protected by AI proctoring that flags any assistance.

How TestDome works

1

Choose a pre-made test or create a custom test

2

Invite candidates via email, URL, or your ATS

3

Candidates take a test remotely

4

Sort candidates and get individual reports

Enterprise-ready technical solutions

Multi-user Account

Support multiple users with shared permissions and role-based access control.

GDPR compliance

TestDome is fully GDPR compliant, see our legal pages .

Single Sign-On (SSO)

Use SSO for easy and secure user authentication for multiple users in your company. Request access.

Data anonymization

Automatic data anonymization after a defined period of time — or on-demand.

Want to know more?

Screening Features Interview Features

Related HTML/CSS Tests:

Web Developer