Web Design Test

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.

Consider the screenshot of web page provided here.

Select all the parts of the web page that contain issues like wrong text formatting, missing a page element, or similar.

You have been asked to adjust the below numbered list so that all copy matches the first two lines.

_{(Open full-size image in a new tab.)}

How do you adjust each line to match Lines 1 and 2?

Fix the bugs in the following HTML code.

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:

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

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.

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

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:

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.

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:

Consider the form provided here. The form should validate all fields once the "Create user" button is clicked and it should clear the form if validation has passed.

The fields have the following constraints:

• First name - required, must have at least one character that is not a whitespace.
• Last name - required, must have at least one character that is not a whitespace.
• Username - required.
• Description - no constraints.
• Address - no constraints.
• Address 2 - optional, if provided it should have at most 5 characters.
• Age - optional, if provided it should be a number between 18 and 65, both included.
• Password - required, it should have at least 4 characters.

Test the form and select all the fields that were not implemented correctly.

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?

Study the two images below.

_{(Open full-size images in a new tab.)}

You were asked to make the original image above more vibrant and focused on the runners' upper bodies.

Which effects and tools did you likely use on the original image to produce the edited image?

You work as a solo, freelance graphic designer. A potential client contacts you to work on a new product's marketing material. He says they haven't written the advertising text or decided on the theme yet, but asks that you get started on the design to save time.

How do you respond?

You were assigned to do web accessibility testing on a website to buy theater tickets.

You noticed the following in the page:

• The heading appears before the description in the visual page.
• Screen readers order the description before the heading.
• The pricing section is dynamically loaded almost immediately after the rest of the page.
• The picture of the seating arrangements has the alternate text: "Theater".
• The page requires scrolling to reach the end.

Some visually impaired users of the site use a screen reader on their browser.

Which of the following characteristics of the page reduces the accessibility for screen reader users compared to users who don't use a screen reader?

For the following scenarios, select the most appropriate type of performance testing.