wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

Web Design EOPA Practice

Total questions: 67

Worksheet time: 34mins

Name
Class
Date
1.

Which of the following is a valid HTML tag?

a)

h1

b)

<>

c)

<h1>

d)

>h1<

2.

What does HTML stand for?

a)

Hidden Text Meta Language

b)

Hyper Text Markup Language

c)

Hidden Theme Markdown Level

d)

Hyper Text Markdown Language

3.

Which of the following is an example of metadata about a webpage?

a)

The title of the webpage

b)

The body of the webpage

c)

An <h1> tag on the webpage

d)

All of the above

4.

What is the function of the <br> tag?

a)

Create a line break on the resulting webpage

b)

Create a horizontal line on the resulting webpage

c)

Italicize text

d)

Bold text

5.

Which of the following is the correct HTML code to creat a hyperlink that displays Click Me and links to google.com?

a)
b)
c)
d)
6.

Which of the following lines of HTML code will insert an image into a webpage?

a)
b)
c)
d)
7.

True or False: As long as you cite your sources, you can put any image you find online on your website.

a)

True

b)

False

8.

Which of the following actions will help you avoid violation of copyright laws?

a)

Always cite the source of the image

b)

Check the copyright of the image to make sure it can be used by others without permission

c)

Limit your searches to public domain images

d)

All of the above

9.

Which of the following HTML code snippets would produce the following web page:

a)
b)
c)
d)
10.

Which of the following tags defines a table row?

a)

<table>

b)

<tr>

c)

<th>

d)

<td>

11.

Which of the following tags defines a table header?

a)

<table>

b)

<tr>

c)

<th>

d)

<td>

12.

Which of the following HTML code snippets will generate the attached table?

a)
b)
c)
d)
13.

Which of the following HTML code snippets is the proper way to set the background color of an <h1> tag to be blue?

a)
b)
c)
d)
14.

Which of the following is a valid color in HTML?

a)

"blue"

b)

"rgb(255, 0, 0)"

c)

"#00FF00"

d)

All of the above

15.

All of the colors you see on a computer screen are the result of a mixture of the same three colors. What are those colors?

a)

red, yellow, blue

b)

green, orange, purple

c)

red, green, blue

d)

red, green, yellow

16.

Why do we use CSS?

a)

HTML wasn't intended to be able to style web pages, CSS allows us to add style

b)

Separate the content of a web page from the design of a web page

c)

Easily modify the look and feel of a web site even at a large scale

d)

All of the above

17.

Which of the following is a valid CSS rule?

a)
b)
c)
d)
18.

Which of the following code snippets will select all <img> tags on a page and give them a height of 200 pixels?

a)
b)
c)
d)
19.

Which of the following code snippets will select all HTML elements with the class "alert" and set their color to be red?

a)
b)
c)
d)
20.

Which of the following CSS rules will select the HTML element with the id logo and set the font size for that element to 60 pixels?

a)
b)
c)
d)
21.

What is the function of the Cascade in CSS?

a)

The Cascade is a set of guidelines to make your site look beautiful

b)

The Cascade helps you write styling for your websites quickly by providing easy templates to use

c)

The Cascade determines which CSS rules will be applies when multiple rules for an item are contradictory

d)

The Cascade will make sure there are no types in your CSS rules

22.

In what order does the Cascade look at factors to determine which CSS rule to follow?

a)

Order, Important, Specificity

b)

Importance, Order, Specificity

c)

Specificity, Importance, Order

d)

Importance, Specificity, Order

23.

Assume you have two files for your website, and these files exist in the same folder:


home.html

style.css


Which of the following is the proper was to apply the CSS code inside style.css to the home.html file?

a)
b)
c)
d)
24.

Assume you have two files for your website, and these files exist in the same folder:


index.html

about.html


Which of the following is the proper way to link to the about.html page from the index.html page?

a)
b)
c)
d)
25.

What are IFrames?

a)

Buttons that link to other websites

b)

Videos uploaded to your website

c)

The number of views your website has

d)

HTML pages embedded inside of other HTML pages

26.

What is the function of the div tag?

a)

To define a section of an HTML page

b)

To group a block of elements together to format them with CSS

c)

To efficiently apply the same style to several different elements

d)

All of the above

27.

Which of the following correctly uses div to style multiple elements the same way?

a)
b)
c)
d)
28.

What is the difference between <span> and <div>?

a)

<span> is better for styling text, while <div> is better for styling images

b)

<span> is for styling multiple elements, while <div> is for styling single elements at a time

c)

<span> is used to group and style inline elements, while <div> creates a line break

d)

<span> is used to style elements, while <div> is used to embed parts of other websites

29.

Which of the following selects all p tags with the class alert and makes them red?

a)
b)
c)
d)
30.

How can I select all h1 tags that are immediate children of div tags?

a)
b)
c)
d)
31.

What is the reasoning behind the Don't Repeat Yourself principle?

a)

It helps you stay under the HTML file character limit

b)

Repeated code makes it harder to read and edit

c)

HTML files with repeated code will take a very long time to load

d)

It makes a more clean and organized website for the user

32.

What are some ways to cut down on repetitive code in your website?

a)

Group together multiple selectors with commas

b)

Strategically plan ahead to make sure the site is coded concisely

c)

Use a div to style multiple elements

d)

All of the above

33.

Which of the following will turn the h1 tag blue as the mouse hovers over it?

a)
b)
c)
d)
34.

Which of the following will insert an exclamation point after every h2 element?

a)
b)
c)
d)
35.

Which of the following is not a property that can hide the visibility of an element?

a)

opacity

b)

hidden

c)

visibility

d)

display

36.

Who might need to look something up in HTML/CSS documentation?

a)

A student learning about web development

b)

A web developer using a new feature

c)

A person building a personal website as a hobby

d)

All of the above

37.

The Inspector would be a useful tool for which of the following tasks?

a)

Starting to write the HTML and CSS based on a design

b)

Testing what small CSS changes will do to the site presentation

c)

Finalizing changes made to the styling of the website

d)

All of the above

38.

Which of the following is not a part of the box model?

a)

padding

b)

background

c)

border

d)

margin

39.

For the given div, what is the size of the right padding?

a)

15px

b)

10px

c)

5px

d)

20px

40.

True or False: An image can have more than one CSS filter.

a)

True

b)

False

41.

Which of the following applies a grayscale filter to all images?

a)
b)
c)
d)
42.

Which of the following defines an animation increase-font that increases the font size from 5px to 20px?

a)
b)
c)
d)
43.

Which of the following applies an animation named grayscaleFilter over 10 seconds to every img tag?

a)
b)
c)
d)
44.

What would be the resulting difference if the line transition: width 2x, height 2s; was removed from the first CSS rule?

a)

Images would not longer get larger as the mouse hovers over them

b)

The transition would happen over 10s, since this is the default duration

c)

Images will no longer show up on the website

d)

There would no longer be a smooth transition for the image:hover rule

45.

What is the difference between .container and .container-fluid?

a)

.container-fluid keeps margins to the left and right of the content, while .container fills the entire width of the window

b)

.container-fluid is responsive to the window size, while .container creates a fixed width that never changes, regardless of window size

c)

.container-fluid constantly updates to fit the width of the window, while .container will update occasionally as the window is resized

d)

.container should be used in headers, while .container-fluid is used for p tags

46.

True or False: Is is impossible to have more than one jumbotron on a give page.

a)

True

b)

False

47.

Which of the following creates a responsive jumbotron on your website?

a)
b)
c)
d)
48.

How many columns fit in a single row in the bootstrap grid system?

a)

4

b)

8

c)

12

d)

It depends on the screen size

49.

What is the smallest device that will display these columns side by side?

a)

Desktop Computer

b)

Laptop

c)

Tablet

d)

Smart Phone

50.

What is the correct way to add a default-styled button to an <a> tag?

a)
b)
c)
d)
51.

Whcih of the following will correctly display a page header with subtext?

a)
b)
c)
d)
52.

Which of the following correctly creates a thumbnail of the CodeHS logo that links to https://codehs.com?

a)
b)
c)
d)
53.

Which of the following creates a table that is responsive to screens of different sizes?

a)
b)
c)
d)
54.

Which page should the following nav-tabs be added to?

a)

home.html

b)

profile.html

c)

messages.html

d)

It should be added to every page on the website.

55.

Fill in the Blank: contents of a navbar need to go inside a _____ div.

a)

.navbar

b)

.nav-tabs

c)

.active

d)

.container

56.

Why might you decide to use a dropdown menu on your website?

a)

To group options together in a way that makes sense

b)

To have a simple interface without too many buttons

c)

To save space and keep a clean wesite layout

d)

All of the above

57.

True or False: Only people who are new to Bootstrap need to look at documentation.

a)

True

b)

False

58.

True or False: it is plagiarism to copy code from Bootstrap examples to your own website.

a)

True

b)

False

59.

Which of the following is not part of the Design Cycle?

a)

Empathize

b)

Ideate

c)

Educate

d)

Test

60.

What is the first step of the Design Cycle?

a)

Prototype a few solutions you come up with for the problem

b)

Gain empathy and understanding for the group you are designing for

c)

Define a specific problem to solve

d)

Generate ideas for many potential solutions

61.

Which of the following is not a strategy to help build empathy for your users?

a)

Explain the correct solution to your user

b)

Observe users and their behavior in the context of their lives

c)

Engage with and interview users

d)

Immerse yourself in the experience of your user

62.

Why is it important to maintain a beginner's mindset while building empathy for your user?

a)

It helps you avoid applying your own assumptions to a situation

b)

It helps you design solutions for yourself, rather than your user group

c)

It helps you understand the problem without having to interact with your user group

d)

It helps you use your familiarity with a situation to solve a problem for your user group

63.

What is the goal of the "define" step of the design cycle?

a)

Come up with a list of all the problems that your users face

b)

Use your findings from the empathy phase to decide if you are interested in the project still

c)

Come up with some solutions for the problems you observed your user groups facing

d)

Use your findings from the empathy phase to come up with one specific problem that needs to be solved for your users

64.

Which of the following does not need to be included in a POV statement?

a)

The user

b)

Their needs

c)

Potential solutions

d)

Your insights

65.

Which of the following is NOT good method for a group brainstorm?

a)

Building on the ideas of others

b)

One conversations at a time

c)

Encourage wild ideas

d)

Shoot down ideas that aren't considered good ideas

66.

What is a prototype?

a)

Anything physical that lets a user interact with your idea

b)

A storyboard illustrating a step by step process

c)

A mock-up of a website drawn on paper

d)

An experience that a user goes through

67.

Which of the following is NOT a good testing method?

a)

Listen to the questions your user asks

b)

Correct your user if they are using your prototype incorrectly

c)

Take notes about how your user interacts with your prototype

d)

Have your user constantly talk through their experiences