Review Cards Assignment

In this lesson, we learned about how to create transitions and animations using only HTML and CSS. Most of the examples shown for each technique were just playful demonstrations, and weren't accomplished an important task. But for this assignment, you will get to use these techniques to create a useful, interactive template.

Using HTML containers and CSS properties, you are going to create a web page with a series of "cards" or "holders". These will be like flashcards to review material from one of your lessons in this course, or any other course you're currently taking. On each card, you will add a question, term, person or event. Each of these should have an answer or description paired with it. The answer portion for each card will be hidden in some way when the page loads. When you hover your cursor over a card, a CSS transition should reveal the answer, and then hide it again when you move your cursor away.

The look of the containers, their layout on the page, and the transitions used to reveal the answers are all up to you. You are encouraged to come up with creative or unusual ways for the answers to be revealed, as long as they meet all of the assignment criteria. Your activity template should also have an on-screen title, and some sort of animation that plays one time when the web page opens.

Your completed assignment should contain all of the following:

You should have at least 8 cards/containers with revealable answers. Revealing answers should use a transition that changes one or more CSS properties. The activity has a title that appears at the top of the web page. An animation runs when the page is opened.

When you're done, save your HTML file and upload it to your Neocities account. Then submit the assignment link to your teacher. You will be graded using the following rubric: