Frontend Web Development
Assignment for Week 18
- Create an HTML file and a CSS file.
- Add a doctype,
<html>, <head>, and <body> into the correct places of the HTML file.
- Add a
<title> to the <head>.
- Link the CSS file to the HTML file by creating a
<link> element in the <head>.
- Create a paragraph.
- Put some random text inside the paragraph.
- Make the paragraph 500 pixels wide and 500 pixels high.
- Add as many of these to the paragraph as you can:
border-radiusbox-shadowtext-shadowlinear-gradient
Use Mozilla's CSS reference for the correct syntax.
Extra credit:
- 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 element (
:nth-child).
- Write some JavaScript (with the help of jQuery) that changes the class of the paragraph when you click on it. Write some CSS for that class. Add a
transition declaration that animates the CSS change.
Extra-extra credit:
- Apply
perspective to the <body>, and then use different 3D transform values on the paragraph.
- Animate the paragraph using
@keyframes.
Solution