Frontend Web Development
Assignment for Week 16
- Download HTML5 Boilerplate.
- Create a paragraph inside
<div role="main"></div>.
- Put some random text inside the paragraph.
- Edit
css/style.css to make the paragraph 500 pixels wide and 500 pixels high.
- Add a
background-color to the paragraph.
- Add as many of these to the paragraph as you can:
linear-gradientborder-radiusbox-shadowtext-shadow
Use DocHub for the correct syntax.
- When done, zip your workspace and send it to Jeffrey to see how it looks in simpler browsers.
Extra credit:
- Animate the paragraph using
@keyframes.
- Add pseudo-elements to the paragraph (
::before, ::after).
- Change its font using a web font from Google Web Fonts.
- Duplicate the paragraphs in the HTML and have your rules only apply to every other rule (
:nth-child).
- Write more text in the paragraph than there is space in the box, and apply ellipses to the paragraph using
text-overflow.
- Write some JavaScript that changes the CSS or the class of the paragraph when you click on it. Add a
transition rule that animates the CSS change.
- Apply
perspective to the <body>, and then use different transform values on the paragraph.