Frontend Web Development
Assignment for Week 15
- 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:
linear-gradientborder-radiusbox-shadowtext-shadow
Use DocHub for the correct syntax.
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.