Front-end Web Development
Assignment for Week 4
- Follow the steps in Assignment 1 (or use your work from last week).
- Change the
<p>
element to a <div>
element.
- Duplicate the
<div>
element.
- Add a
class
attribute to the first <div>
tag, with the value box-one
.
- Add a
class
attribute to the second <div>
tag, with the value box-two
.
- Add a CSS rule that makes elements with either
class
box-one
or box-two
have a width
and height
of 200px
, and a color
of white
.
- Add a CSS rule that gets rid of the default spacing that is built-in to the main document container.
- Add a CSS rule that gives elements with a
class
of box-one
a red
background
.
- Add a CSS rule that gives elements with a
class
of box-two
a blue
background
.
-
Modify a single existing rule such that the page looks exactly like this (text content can be different). The second box is 20px from the top and left of the first box:
Extra credit:
- There are at least three ways of achieving this effect. Try finding all three of them.
Solution