You already know about gradients because you’ve worked with them in WD1, but you haven’t worked very much with multiple backgrounds, Pseudo Elements, or adding your own @font-face to a style. Pseudo elements allow you to control something about an existing element without changing the element itself (like a:hover or p:first-letter). The @font-face selector allows you to add new and creative fonts to a stylesheet as needed, then include them in the style of any element that requires text (a, h1, p, etc). Using each of these features will give you the ability to make your designs have an added “storybook” feel, but be prepared for a tough lesson because your design assignment will either be equally or more challenging than the Sunrise Challenge had been in 6.5.

Below are some helpful tips and resources that you can use during and after this lesson is over.

CSS Style Tips to Remember

• Pseudo elements are used to style a specific part of a larger element. For example, if you style, p:first-letter, then the first letter of every paragraph element will be styled according to your declaration.
• The best way to learn pseudo elements, like everything else related to web design, is to practice them.
• Color gradients are the combination of two or more colors filling up a region of space.
• CSS Color Gradients can either be linear (up, right, down, left) or radial (circular).

Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called CSS Fundamentals. Inside of this course, watch the following lessons (you will need your headphones), but when you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many sections you complete and how many questions you answer correctly after each section.

51. Pseudo Classes
52. Pseudo Elements
53. word-wrap
54. @font-face
55. Module 5 Quiz
56. Linear Gradients
57. Radial Gradients
58. background-size
59. background-clip
60. Transparent Borders
61. Multiple Background Images
62. Opacity
63. Module 6 Quiz

Assignment #2 (1 Point): Design Project
During the SoloLearn videos, you were able to review some things you learned in WD1 (like gradients and opacity), but you probably saw some things you’ve never done before (pseudo classes, multiple background images, @font-face, etc). In this challenge, you will be demonstrating your knowledge of the following CSS concepts: @font-face, multiple background images, and a pseudo class called first-letter. To do this, you will be creating a five page “haunted house” story like this (Page 1, Page 2, Page 3, Page 4, Page 5). Feel free to read the story, since you’ll have to write your own. The demo might give you some ideas.

THE 8 RULES FOR YOUR HAUNTED HOUSE WEBSITE ARE THESE:

• 1. Your background must include two images (a haunted house of some kind and a haunted house logo) and, if there is extra space in your background, a background-color that fits with your haunted house. Your SoloLearn videos gave examples of how to insert multiple background images, but here is another place to study multiple background images.
• 2. Your buttons/links must contain some kind of spooky background image. Unlike the Sunrise Challenge, you do not need to push the position of the background down. Simply putting a background image into the buttons is okay.
• 3. Your buttons/links must ALSO use the pseudo class :hover, so that when you hover over each link, the color or image changes. Please create a class=”on” for each button that matches the :hover so that you know what page you are “on” at any given time. For example, the demo pages turn the buttons white with black text whether you’re ON the page or just HOVERING over the buttons.
• 4. You must download a spooky @font-face (your choice), then figure out how to get your page links to show the font-face by studying this page or looking back at the SoloLearn videos for examples.
• 5. PAGES 2, 3, and 4 should be a made-up “haunted house” story that you write using the @font-face that you downloaded for the button links. You must write a decent and interesting story that fills up the pages. Write something worth reading.
• 6. The paragraphs that you write on PAGES 2, 3, and 4 should include the a pseudo class on the first letter. Using the pseudo class on the first letter gives each page and paragraph a storybook style like the demo.
• 7. On PAGES 2, 3, and 4, you must make a different version of your haunted house image and place it in the background. For example, the demo shows that Page 1 has the official picture in the background, but Page 2 shows a faded version of the same picture in the background (which allows the text to come through a little more clearly).
• 8. On PAGE 5 (last page), you must use a background picture that reflects the conclusion of your story. For example, the demo story (Page 2, Page 3, Page 4) talks about some kids hearing a mumbled voice behind the open door of a creepy house. By the end of the story, they never figure out what the sound was, so the final page (Page 5) shows a picture of that open door to the creepy house.

To make your five-page “haunted house” website a little more interesting, why not also add a favicon, a title, some headings, or some text shadows? You are not required to do this, but if your goal is to design a complete website, those are just a few things that should automatically come with your design.

Assignment #3 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new design to your index page using a screenshot and a link. Remember that since you built a three page website, you do not need to provide a link to all three pages. All you need to provide is a link to the first page, which already links to the other pages. Also, remember that the links will have to point into the folder you made.

Assignment #4 (1 Point): eCampus Checkin
You no longer have any review sheets or review quizzes other than the final ICT Exam at the end of the semester. But if you have gotten this far, you still need to check in on eCampus and complete the quiz question that asks whether you finished all the assignments in this lesson. Once you’ve done that, you’re all set for the next lesson.

If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 6.10. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.