1. Create a background with a deep, almost midnight blue color.
2. Create 5 "balls" roughly the size of quarters. Have their edges be blurred
3. Have two remain stationary and also depict them as being bright red:
• one should be position at the top left
• one should be position at the top right
4. Have three start out in the bottom middle of the composition. Have them depicted as being bright red, initially but then trasition into pastel pink, a pastel green, and then a pastel purple color. Have this order repeat over and over again excluding any red.
5. As they are transitioning in color, have them float about in a decently fast paced order. They should float about the bottom portion of the page only.
6. When you hover over any of the "balls," make sure your mouse preforms the "wait/loading" function.
7. When you hover of the two "red balls," make sure they appear white.

1. Create a document with the background of a hot pink color.
2. Create a rectangle the size of a nickel, completely rounding one side and leaving the other squared off. Rotate this shape so that it is diagonal.
3. Create a second identical shape that is diagonally rotated in the opposite direction. For both shapes, the rounded edge should be on the top.
4. Allow both of the shapes to merge and overlap at the bottom half to create a small heart shape.
5. Color the heart shape a deep pink, and create three more hearts for a total of four.
6. Allow the hearts to move repeatedly from one corner to the other corner of the screen, moving back and forth at a somewhat quick pace, easing between areas. Make sure each heart has a different starting and ending point, and that they move at slightly different paces, but not differing in more than ten seconds. Allow them to move across the screen in a way that feels random, this can be of your choosing.
7. Next, google the phrase “conversation hearts transparent background,” and go to google images. Choose what should be the fourth image, with a 6x4 grid of yellow, green, pink, purple, and blue hearts with red text on top.
8. Crop out six hearts as their own individual images. Choose the blue heart with “true love” written on it, the green with “cutie pie,” the purple with “love you,” the yellow with “text me,” the pink with “xoxo,” and the orange with “you rock.”
9. Make these six images roughly the same size as the heart shapes, and apply the same type of movements to the images as the heart shapes. Make sure that every heart and image move in a slightly different way, from different points on the screen.
10. Then, add an out of focus blurred effect to both the images and the shapes. You should still be able to see that they are hearts, but the text on the images should be illegible.
11. When you hover on either the shapes or the images, the movement should pause and the forms should be clear, ridding itself of the blur, and revealing text on the images.
12. Finally, switch the background color and the color of the heart shapes with each other for when the window of the screen is at a size small enough to be a phone screen.

1. Pick a dark background color, one that reminds you of the night sky.
2. Create three squares that sit in the middle of the page, next to each other in a row. Each square should be slightly smaller than an Oreo, but slightly bigger than a bottle cap. The squares are all the same size. Create some space between them.
3. For the first square on the left, choose a handful of colors that you find peaceful. Showcase all those colors by letting them fade into one another in the first square.
4. For the second square in the middle, choose a handful of colors that you find exciting. Showcase all those colors by letting them fade into one another in the second square.
5. For the third square on the right, choose a handful of colors that you feel represent you. Showcase all those colors by letting them fade into one another in the third square.
6. If possible, you should be able to grab those colors and stop them in time, and the word that the colors represent should appear. (‘Peaceful’, ‘exciting’, and ‘me’)
7. When viewing this on something small like a phone, the squares should fall into a single column.

1. Create a document with the color of a sky on a humid and hot summer afternoon.
2. Create a glowing sun and place it in the middle of the screen, towards the top.
3. Create 12 ice cubes and place them in 4 columns and 3 rows under the sun.
4. In 10 seconds, the ice cubes will melt under the heat of the sun into translucent, circular puddles.

1. Create a document with a light neutral color background.
2. Make a black rectangle centered in the document that takes up around 2/3 of the screen, leaving equal amounts of white space around it. Let’s call this black rectangle the container.
3. Put four rectangles inside the container and make them red.
4. Have the four rectangles fit within the container with a little bit of space between them. By now it should look like a window.
5. Make the container not have color so that only the four rectangles are showing.
6. For the top-left rectangle, we are going to make two of its corners rounded: the top-right and bottom-left.
7. Next, we will make the top-right rectangle have two of its corners rounded as well: the top-left and the bottom-right
8. Do the same for the bottom two rectangles (bottom-left rectangle has its top-left and the bottom-right corners rounded) (bottom-right rectangle will have its top-right and bottom-left corners rounded)
9. Change the colors of the four rectangles from red to whatever you want them to be.
10. Done.

1. Create a document with a four column, three row, orange and blue checkerboard.
2. Create a yellow circle inside the first orange section. Center it within the section.
3. Create a smaller dark orange circle within the yellow circle. Center it within the yellow circle.
4. Create an even smaller red circle within the dark orange circle. Center it within the dark orange circle.
5. Repeat steps 2-4 for all orange sections.
6. Create a light blue circle inside the first blue section. Center it within the section.
7. Create a smaller navy circle within the light blue circle. Center it within the light blue circle.
8. Create an even smaller blue circle within the navy circle. Center it within the navy circle.
9. Repeat steps 6-8 for all blue sections.
10. The circles are to change colors. Before the circles change colors, admire the circles as they are.
• The yellow circle should go from yellow, to dark orange, to red, back to yellow and repeat.
• The dark orange circle should go from dark orange, to red, to yellow, back to dark orange and repeat.
• The red circle should go from red, to yellow, to dark orange, back to red and repeat.
• The light blue circle should go from light blue, to navy, to blue, back to light blue and repeat.
• The navy circle should go from navy, to blue, to yellow, back to navy and repeat.
• The blue circle should go from blue, to light blue, to navy, back to blue and repeat.

1. Create a document with the background as the color blue. The type that reminds you of an old windows computer.
2. Create a Square.
3. Create 2 more to later align them together using grid columns.
4. Animate the squares with time as they blend into the background from shades of grey.
5. Let a hover stop them from moving any more.

1. Create a window on the document. A window on a wall. Outside your window, you see the sunset and sunrise.
2. Create a gold pea to represent the sun, on the top left of this window.
3. As it sets to the right, create the colors of the sky to reflect the ones of a sunset. Fading to one another.
4. As it rises, choose colors to reflect a sunrise, just like before.

1. Create a new document with six sections, three by two, that cover the entire page. (Two rows and three columns)
2. On mobile, make it two by three. (Three rows and two columns
3. Make the chart have a black border around all boxes (including the overall chart itsel
4. Each box should have either the word "Truth" or "Lie". Truths and lies cannot be placed next to each other on the desktop screen. However on mobile, this does not matter.
5. Center the words in the box.
6. Give a WARM background color to the boxes that have the word "Truth".
7. Give a COOL background color to the boxes that have the word "Lie".
8. Choose a comic typeface you feel like is playful and apply this to the words.
9. All Truths should be written in white and all Lies should be written in black.
10. Lastly, make the color of the words "Truth" and "Lie" blink black & white. But truths and lies cannot be the same shade at the same time as they blink.

1. Create a document without anything visibly on it
2. Create a repeating set of rectangles, enough to fill up the space between your thumb and pointer finger when stretched. Each rectangle should be about the width of your finger. There should be an even number of rectangles.
3. Make it so that the rectangles operate in a pattern where every other rectangle is black and the rest are white.
4. The black rectangles should disappear when you move about the page. 5. When the page becomes small, all of the rectangles disappear.
5. In their place, there is an orb that also fills the space between your thumb and pointer finger, in both its height and width. There should be no obvious center of the orb, instead it is most intense in the center, and fades out to almost nothing. The orb is the opposite of the rectangles.
6. As you remain on the page, the orb should shift between the three colors that make up screens. It continues infinitely, or until the page becomes large again.

1. Choose one of these topics: rainbow, storm, sunset, sunrise, blue sky. You will be creating a grid, and the boxes will be used to showcase different representations of the topic.
2. Create a grid that fills up the entire viewport height and width. Leave a small square in the top left corner. Here, you will put your name and topic. Have the rest of that row be one rectangle
3. In the rest of the body, create about 7 or 8 boxes with varying sizes.
4. In one box, include a paragraph or two from a Wikipedia page about your topic.
5. In another box, include lyrics from a song that relates to your topic.
6. In another box, include a quote that is relevant to your topic.
7. Include an image of your topic in one box.
8. Have at least one box include a gradient that is representational of your topic (i.e. a rainbow gradient for the rainbow topic) and moves when you hover over it.
9. Create a details tag in one of the boxes that has links to the Wikipedia page and song.

1. Create a canvas that is the size of your browser and change the background color to light grey.
2. If the mouse is pressed, create an ellipse with the color of your choice.
3. If the mouse is released, create a rectangle with the color of your choice.

1. Create a document in a coconuty/ivory, off-white color
2. There are three paragraphs in total that are visible all at the same time. Each section starts with a new line.
3. One paragraph contains seven pairs of (charcoal-colored) rounded brackets that are slanted.
4. Adjust the space between the brackets in each line so that the paragraphs take up the document's full width. But make sure that everything looks evenly spaced throughout the whole document; nothing should be even close to touching.
5. The spaces between the brackets should be able to contract, so much to the point where they look like a bunch of plates on a drying rack.
6. Similar to an accordion, the spaces between the brackets should be able to expand as well slowly.
7. Make sure it only expands and compresses depending on which one you give attention to.
8. Lastly, the color of the document should slowly change to a maroon color. Simultaneously, the brackets should transform into a bright red color (ex: Ferrari, candy apple). This color change should only happen whenever you are active on the document.

1. Create a document with a linear-gradient background color of the sky late at night with it being the darkest at the top of the page and the lightest at the bottom.
2. Create 47 organically shaped rounded forms that will disperse across the page, diagonally, from the top left corner to the bottom right corner of the page. The sizes of these rounded forms will go from small-big-small, starting from the top-middle-bottom.
3. Each shape should have a range of yellow to orange colors as they “glow” at different times. When they are not “glowing,” their color should be set as the background color as if they cannot be seen.
4. All of the rounded shapes will be slightly blurry.
5. Create a dark green hill at the center of the page. It’s okay if the hill covers some of the rounded shapes.

1. Create a document with a gradient resembling the ocean - darker blue at the bottom and lighter blue at the top.
2. Create ten circles with equal distances from each other.
3. Make a radial gradient with colors of your choosing to fill the circles.
4. Change the sizes of the circles so they’re all different - have larger circles next to smaller circles.
5. Make the circles appear, and nearly disappear but not completely.
6. Make the circles rise from the bottom to the top of the screen, looping continuously and disappearing from the top and bottom edges.
7. Make sure each of the circles doesn’t rise up at the same time or appear/disappear in sync with each other.
8. When the screen size is the width of an iPad (viewing horizontally) or smaller, adjust the sizes of the circles to make sure they still look like circles. Repeat this process when the screen size is the width of an iPhone or smaller.
9. The end result should resemble bubbles rising underwater in each screen size.

1. Create a document with a gradient background that goes from lavender to Blue (you can add pink as well if you like).
2. Find an image of a butterfly online and animate that image so that it moves around the screen gently.
3. Make the image fade out at the end of the animation.
4. Repeat this process for 5 butterflies.
5. Lastly, create a sparkle animation around the butterflies in random order.
6. Use css animation to create the sparkle animation and it should fade in and fade out infinity.

1. Open an html document and place a sunset gradient as the background.
2. Create a circle towards the top of the page and in the center with the word ‘sunset’ in it. Make the circle light pink.
3. Across the center of the page, create 5 circles placed randomly horizontally and vertically. The circles should be small, and should look like stars. Animate them fading in and out, switching between white, yellow, and light pink. The animation duration should be four seconds.
4. Create a slightly larger circle that is dark orange at the top and center of the page. Have this circle, the sun, fade in as it travels down the page, reaching full opacity at the center. Have the sun fade out as it travels off the page. The animation duration should be 10 seconds.
5. Create a white circle the same size as the fun, and create the same animation as before, but delayed by 5 seconds.
6. Animate the background, choosing a darker color gradient to fade in when the moon is at the center, and a lighter color gradient when the sun is.

1. It is a sky of a sunny day, bright and vibrant.
2. Suddenly you feel a urge to eat, you are very hungry.
3. Draw a big bun that covers most of the screen.
4. The bun is plain but fluffy, looks very golden.
5. Inside put a nice crispy beef.
6. Make it double.
7. Because you are very hungry.
8. Add the lower bun.
9. you are good to go!