Before you take your quiz, see how much you've learned in this lesson. Practice with the activity below by completing each coding prompt.
Add the images "squirrel.png" and "grass.png" as the div's background.
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<div
style="
background-image
:
url
(
)
,
url
(
)
"
>
Add a gradient that travels from left to right to the div below. It should have color stops of #333333 and #8888FF.
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<div
style="
background
:
linear-gradient
(
to right
,
#333333
,
#8888ff
)
"
>
<div
style="
background
:
linear-gradient
(
90deg
,
#333333
,
#8888ff
)
"
>
The div below should have a border image based on the image "stars.png". It should be sliced by 10 on each side, and with the side-section images repeating. Use the shorthand property.
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<div
style="
border-image
:
url
(
)
10
repeat
"
>
<div
style="
border-image
:
url
(
)
10
round
"
>
Give the div below rounded corners.
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<div
style="
border-radius
:
%
"
>
<div
style="
border-radius
:
px
"
>
Use a filter to make the image below completely sepia tone.
<!DOCTYPE html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<html>
<head>
<title>Practice Prompts</title>
</head>
<body> </body>
</html>
<img
style="
filter
:
sepia
(
100%
)
"
>
<img
style="
filter
:
sepia
(
1
)
"
>
<img
style="
filter
:
sepia
(
1.0
)
"
>
squirrel.png
grass.png
stars.png
flowers.jpg
https://s3.amazonaws.com/cms.accelerate-ed.com/image/2a191d6b-23f2-4a24-955f-75166eada761.png
https://s3.amazonaws.com/cms.accelerate-ed.com/image/98101106-3bab-4d58-b755-d36d9559d902.png
https://s3.amazonaws.com/cms.accelerate-ed.com/image/44279cd7-0b84-405a-b0b6-8f0b3639e3de.png
https://s3.amazonaws.com/cms.accelerate-ed.com/image/c863222b-3412-462b-bbb8-668153f5c4d6.jpg
