1. Create a document with the color of a blue sky.
2. Create a dark blue rectangle shape that covers the bottom half of the page and moves slightly up and down.
3. Create another rectangle shape like step 2 with a lower opacity and smaller height.
4. Create a brown trapezoid above the rectangles.
5. Create a brown stick above the trapezoid and two white triangles (one in front and one behind the stick).
6. Each form (except the two rectangles) should slowly rock in the same motion.

1. Collect content for the site.
• What were the last 3 songs you listened to? (If you haven't listened to music lately find an object around you and choose 3 songs based on the first, middle, and last letter of the name of the object.)
• Write down the titles and artists of the songs.
• Download the album/song cover for each one.
• Find each song on YouTube and keep the links to each video ready for later.
2. The elements in your site will be formatted and displayed using a grid system.
• The grid is composed of 3 columns and 3 rows.
• All columns of the grid should be the same width, with a bit of a gap in between each column.
• The height of each cell on the first row should be equal to the width of each column. This means that the 3 cells on the first row are squares.
• The height of each cell on the second row should be half the height of the first row.
• the height of the last row should be a fourth of the first row.
• To add content to the grid, add elements onto the HTML file in the order listed below.
3. Add your 3 album/song covers onto the page.
• Make sure that each image fills up the grid cell it was placed in.
• If the grid was set up correctly, you should have 3 square images on the page lined up in a row.
4. Write down the song title and artist.
• Format the title such that it has more emphasis than the artist's name.
• Use a serif typeface for the song title, and a sans serif typeface for the artist's name.
• Make sure that the artist's name is placed below the song title.
• Align the text to the center of the grid cell.
5. On the last row of the grid, create 3 play buttons
• You can use an image if you want, or you can create the shape yourself using CSS. You can also style the buttons however way you want.
• Link each button to the YouTube video that corresponds to each of your songs.

1. Create a document with a background color of a flamingo.
2. Create a bar that’s 1/6 the height of the screen and takes up 5/6 of the width, put it all the way to the right and lift it 1/6 screen height from the bottom.
3. Create a 1/6 screen width brick on top of the bar, move it to the middle of the bar and place the brick 1/6 screen height above the bar.
4. Make sure both the bar and the brick are the color of white and when hovered, they turn crimson, ease-in-outly.
5. Now put a 30x30px, sky blue ball bouncing in between the bar and the brick every 0.5 seconds. When shown on a mobile size screen, the color of the background turns lavender and the ball turns yellow.

1. create a document with the two side of the walls of the well in the middle of the canvas. The well is as tall as the the whole canvas.
2. [Inside the two lines of wall:]
   create a circle with skin color in the middle of two orange lines and create two dark ellipses lay separately on the middle of the circle. Make sure thewy are place in the lower part of the screen.
3. create an orange rectangle and put it on the circle under the two ellipses
4. let the rectangle's height change slightly all the time just like open and close
5. create two skin colored circles on each side of the first one make the one on left in an arc route arounded the circle to the top of the larger circle and then go back on the same route. Make the one on right move the same route but move right.
6. put two pinky orange rectangles under the first skin color circle. The top part of two rectangles should be covered by the circle. Make sure the rectangles touch the buttom of the screen.
7. create a red circle with a black line under it and place it to the top, outside the screen
8. [Outside the two lines of wall:]
   create a large rectangle or button outside the well, write something to let people want to click
9. [Inside the two lines of wall:]
   Once the cursor touch the button, the red circle with line will gradually go down straightly and appear on the screen, but it can only reach the middle of the screen and cannot reach to those skin colored circles at the bottom
10. [Outside the two lines of wall:]
    create another large rectangle or button outside the well on the opposite side, write something to let people want to click
11. [Inside the two lines of wall:]
    Once the cursor touch the second button, there will be a layer of transparent rectangle covered the place inside the wall, gradually move from the buttom to the top.

1. Find a gif that is compelling to you
2. Create a document with a colour that compliments your chosen gif
3. Create a rectangle that is about a quarter the height of your screen and about two thirds the width of the screen
4. Place it along the bottom of the screen and give it white dashes on the top and bottom egdes
5. Within the rectangle, create 5 squares lined up horizontally, each with slightly rounded corners
6. Select 5 frames from the gif you chose and place one inside each of the 5 squares
7. Create a thin vertical line that repeatedly runs along the width of your larger rectangle placed at the bottom of your screen, timed to the length of one loop of your gif
8. Make a larger square above the rectangle on the bottom of your page and place your gif inside, and allow your gif to play only when the user hovers over this large square

1. Begin with a blank page that allows the content to fill the entire window.
2. Make the page responsive to the browser size.
3. Create a grid with two rows and four columns that fills the page.
4. Give the grid a thin, black border that goes between each module of the grid, dividing the page into 8 boxes.
5. Each box should shuffle through the colours red, yellow, neon green, and turquoise.
• The boxes should flash fairly quickly between colours.
• The boxes should never be the same colour as those adjacent to them.
• The first row of four boxes should start with these colours respectively: red, yellow, neon green, and turquoise.
• The second row of four boxes should start with these colours respectively: neon green, turquoise, red, yellow.
6. Each box should turn white when hovered over, instead of the previous colours listed.

1. First create a background color you like
2. Second, name your division class, and don't forget the hr tag, which could separate the content or define the change.
3. Third, in your css file, set up the position and transform under the name of your division class. Reposition your objects using transform: translate, also set up the width and height for your objects.
4. Fourth, remenbered we created the hr code in your html file? using that to define the changes of your object under the name of your devision class in the css file. In here, you can set up the boarder radius, and the animation for spin the objects. in order to make the circles keep moving, set up the ease infinite behind animation spin.
5. fifth, now create the four child objects and set up the color and animation delay for all of them.
6. sixth, set up the animation style under the keyframe spin tag. set up the percentage for each of the moving elements. For example, the first element should have two percentage, 0% and 100%, and inside the {} there should have translate percentage. Increase the percentage 25% started from the 0% for each objects. So the second element should be 25%{transform:translate(160%)}. The 160% behind the translate means the space between four moving objects, it could varies depends on the space you want. One thing really important is the third child, 50%{transform:translate(160%,160%)}, there are two 160%. and for the forth child 75%{transform:translate(0,160%)} is necessary, in order to make the objects moving in order. Test the percentage out.

1. Create a default html and css file.
2. Disable scrolling across the entire html document.
3. Google starry background wallpaper and save the first image result.
4. Use the saved image to make the background of your webpage.
5. Create a black tint for the background by creating an element that is the same size as the webpage window and setting its color to an 80% opaque black. Make sure that its size is responsive.
6. Create an animation that changes the background color from 0% opacity to white and 80% opacity, then back to 0% opacity.
7. Create a class for an element that starts with no background color, is about the size of a medium-sized star (in comparison to the background image), circular, and has a little blur around the edges. Set its attributes so that you can position it using absolute values (as opposed to relative). Make sure that the size of the element is responsive.
8. Set the animation of the class to use the animation that you created. The desired effect should slowly fade in and out infinitely.
9. Add a lot of these elements to your document. For each element, give it a different position on the document, and vary the animation start time between elements (hint: you may consider googling how to add elements to your html document in random positions using javascript if you feel comfortable with it).

1. Create a circle to represent the Sun at the centre of the page. Decorate and make it glow so it looks like a real sun!
2. Put a ring around the sun to represent the orbit path of Earth, then create Earth. (Earth should be in line with its orbit path.)
3. After the Earth is complete, create a ring as the orbit path of the moon. (The moon should also be in line with its orbit path.)
4. At this point, you should have the basic compositions of the Sun, Earth and moon.
5. The sun should be the largest in size. A ring should be around it.
6. The Earth should be smaller and orbit around the sun. A ring should also be around it.
7. The moon is the smallest and should orbit around Earth.
8. Make the Earth rotate on its own axis while orbiting around the sun.
9. Let the moon orbit around the Earth in a faster pace the others.
10. After the solar system is complete, make the background any colour or image you want to mimic the feelings of a galaxy. You can also make extra decorations to the background.
11. Finished!!

1. Create a document set up to create squares that fit together to fill the screen.
2. Make a box with a medium thick black line around the outside of the frame.
3. Divide the frame into 4 columns, the first 3 of the same size and the last one a bit smaller than the others.
4. Now divide the frame into 5 rows, the first 3 should be the same size. For the last 2 make the first the same size the smallest column in the instructions above. Make the last row a tiny bit larger than column in the instructions above.
5. Create a box within this frame. This box should fit within column 2-5, and row 1-4. Color this box red.
6. Create another box. Fit this in column 1, and row 4-6. Color the box blue. Add a border around the top and right sides.
7. Create a box in column 1, row1. Color white. Add a border to the bottom and right side.
8. Again create a box from column 2-4 and in row 4-6. Color white. Place a border at the top and right side.
9. Place a white box in column 4 and row 4. Add a the same border only at the top.
10. Create the final box in column 4, row 5. Color this box yellow. Add a border to the top.

Instructions: Eye Spy in Your Camera Roll

In order to create this page, you need to go way back in your phone history–– seriously, we’re talking those first photos, because this is a game of eye spy.

Based on your preference below, you will find 40 photos in your camera roll in accordance to the colors you’ve been assigned, 80 total, 40 per color. The color needs to be the most prominent in the image (it’s okay if not the entire image)/

Which do you prefer:

• 🐶 corgis: Red –– Green
• 🐨 koalas: Orange –– Blue
• 😸 cats: Yellow –– Purple

1. Great. You will now find photos on your phone/computer in the first color of the two. If you don’t have enough photos, congratulations–– you’re going on an adventure. See the “Shit, A Color Adventure” section below for further instruction now.
2. Once you found 40 photos of your first color, airdrop/email/send them to your computer. You will put these into a new folder titled the name of your color (eg. “red”).
3. Name the photos based on their hue of your first color, ordering from lightest to darkest and rename the file accordingly.
4. Repeat the process listed above for the second color you were assigned based on your animal preference, making sure to add a subtle differentiation in numbers to prevent calling the wrong image on the browser.
5. In looking at your folder, make sure the images are at a low resolution so the screen will be able to process them in a timely manner.
6. Crop images are so they are in a portrait orientation

---

Let’s set this shit up!

1. Currently, you should have two folders on your desktop, named a particular color, with 40 photos inside. You will create a new folder titled “exercise-b-eye-spy-“ with your name following the “spy-“ (eg. “spy-bob”).
2. Move your two photo folders titled with your two assigned colors inside of the “exercise-b-eye-spy-*name*) folder you just made.
3. Open up a code editor of your choice and create two documents, one of basic web language, and one assisting said page on design preferences.
4. Set up your “basic web language” doc and save this into your exercise b folder. Do the same for your “assisted design page”, making sure the two link.

---

Great! Let’s get going on this layout.

1. Title your document + make the web page responsive/compatible for screen readers, emojis, etc
2. Make sure you’re text is responsive should an increased screen view be used.
3. Create an all-encompassing container that holds the components of an organizational layout that is divisible by 40 across and down the screen (hint, these will be different numbers).
4. One photo will be uploaded per unit. Sort the interior works within said container to make sure that the layout is an entire entity and responsive.
5. Depending on the height of your desired cells, please make sure to put these dimensions to your photos as well, so they take up the entire width of a unit.
6. Should one cursor move over the top of one image cell, please code and alternative image to appear, of the compliment color, that is also arranged from lightest to darkest. Thus, as one moves over all of the images on the page in order, they will be revealed to see an accompanying image in a similar light-dark hue of the complementary color in the same place as the original colored photo.
7. Repeat the process above for every image on the screen (hint - you should just copy and paste! Doing so with your file names up for photos makes this process a whole lot faster!) *There should be no white space between the cell’s units and all components within the container should be touching. Should this be a problem, please consult your assisted design page to ensure that said proportions of cells containing images are congruent with the cell’s determined dimensions.
8. Add a component to the page in a web-safe, sans-serif typeface that says “eye spy *name’s* camera roll (eg. “Eye spy bob’s camera roll”)
9. Give your container some room to breathe on the page, so that it is not lying right against your scroll bar ;)
10. Alter the icon representing how one navigates the page to resemble something that is “searching” or “looking for”
11. Make the webpage responsive at different screen sizes so no photos are cut off and we can see your lovely images
12. Cheer–– you’re done! Save this bad boy and upload it to github!

---

This is the “Shit, A Color Adventure” Section

Congrats, you’re feed is about to get a lot more colorful. Please go out and find, search for, or phone a friend to fill your web content with the colors that you were given.

I highly recommend taking this time to grab a bite to eat, see some new spots of the city, and make some colorful choices :)

1. Create a new document containing a baby blue backdrop
2. Create a white oval form on the left corner
3. The size of the oval form should resemble the size of a spoon head
4. Create 5 more of the same ovals
5. The six ovals are stacked on top of each other and all look exactly the same
6. They are all constantly moving slowly back and forth from left to right at different paces
7. Determine their paces randomly, as long as the ovals aren’t moving all together
8. All the ovals look exactly the same, but their placement and pace are different from one another
9. Make sure, the ovals don’t overlap each other and aren’t all moving at the same pace

1. Create a document that contains a 3 by 3 grid with a thin, black border around the grid. Every space in the grid should have the same value of height and width, and the height should equal to width
2. Put the poem shown below in the top left square which should be set to a green background. The poem should use the font courier, align to the left, bold the title, should be scrolled to view the part at the bottom, and do not let it go over the square.
3. Create a pink background for the square in the middle (column2, row 2). Put a red ball (round form) about the size of a pea that bounces up (50% out of the square) in the middle of the pink square. The ball should start from the middle, and then moves up, and then moves below the start point a tiny bit, and repeat infinitely.
4. Put the image below in the bottom right square with pink background. The width of the image should be the width of the square. As the poem you put in the first square, this image should be set to its original ratio so it should be able to scroll down in the square.
5. No content other than bouncing ball shall go out of the square

Poem: The Answer Baseness is a passport for the base, Honour an epitaph for the honourable. See how the gilded sky teems With the twisted shadows of the dead. The ice age is over, So why does ice still bind the world? The Cape of Good Hope has been discovered, So why is the Dead Sea still thick with sails? I come into this world Carrying only paper, rope and a shadow, To proclaim before judgment is passed This plea of the judged: Listen to me, world, I ! do ! not ! believe! If a thousand challengers lie beneath your feet Then I am number one thousand and one. I do not believe the sky is blue; I do not believe the thunder’s roar; I do not believe that dreams are false; I do not believe that death has no revenge. If the ocean is destined to break the dike; Then let its bitter water pour into my soul; If the land is destined to rise, Then let mankind choose a new mountain for survival. The vast unobstructed firmament Is it with glimmering stars; They are a new turning: These hieroglyphs of the ages, These staring eyes of the future.

image: https://fsa.zobj.net/crop.php?r=gjgRmFvG- UL4jDeyYluFfNZxGc4NFtzUgEJFJ2_QmSTVjFdcdk- FwFgsYIflH_3ik-7n8vVKACBPthZEUERBLJO1x0PN6taG87mMCDmE1k9QsnReb55lkRJwPnTx d45OgvF_NwGtLxQEg3Gx

1. Using geometric blocks of color in a grid format, draw a line that goes from the top left corner of the workspace to the bottom right.
2. You cannot draw a perfectly straight line.
3. You must use more than one color.
4. Format the page for iPhone 6/7/8.
5. End Enjoy.

Directions to Code Mondrian Painting

Step 1: Background

- Go into CSS tab - Erase anything that is already there - Set body and html styles to have wall-like background color (ex: #f6f6f6)

Ex of what my CSS code looks like: body, html {

background-color: #f6f6f6; } Step 2: Canvas

- Make a big box (AKA: this is the canvas) - To make painting I used #id and <div> - In CSS panel make a new #id for your big box. You can call your ID whatever you like, but you

need to add an # in front of it. (I called mine #painting) - Set the Height and Width for your box. You can choose your own number but it should be big

enough to divide into quarters and thirds, etc. (I made mine 400px) - Set background to white (#fff4db) - Add positioning (centered on background with space from the top.) To do that you can set left

and right margins to auto and margin-top to 30px - Add a box-shadow to #painting style for it to stand out from wall

Ex of what my CSS code looks like: #painting { background-color: #fff4db;

width: 400px; height: 400px; marging-top: 30px; margin-right: auto; box-shadow: 10px 10px 0px #8d8d8d; }

- Switch back to HTML tab and inbetween the <body> tags add a new <div> tag. Give it the #id

style you just created. (ex: id="painting" inside the opening tag.)

Ex of what my CSS code looks like: <body>

<div id-”painting”></div> </body>

Step 3: Positioning and dividing boxes with DIVs and CSS

- The rows, columns and boxes will each have their own CSS #id and one or more HTML <div>s Starting with the top row, the big box on the right and two smaller on the left

- Go into CSS tab and define new #id for top row - Since the #painting size is 400px, the top row should have height of 290px

Ex of what my CSS code looks like: #toprow { Height: 290px; }

- Now add a new <div> in between the tags of the big painting in the HTML page. (this one won’t

be visible)

Ex of what my CSS code looks like: <body>

<div id="painting">

<div id="toprow"></div> </div> </body>

Step 4: Big box

- Create new #id for big red box and set width and height of 290px - Add corresponding <div> to HTML within the #toprow <div> you previously made. You will

add color after.

Ex of what my HTML code looks like: <body>

<div id="painting">

<div id="toprow"></div> </div> </div> </body>

Ex of what my CSS code looks like: #bigbox { Width: 290px; Height: 290px; } Step 5: Color

- In CSS tab, start a new line - Write you first color class (looks like the other styles you types so far except instead of “#” in

front of the selector you put a “.” (period) Try the color “red” as the background color.

Ex of what my CSS code looks like: .red {

Background-color: red; }

- To Apply the .red class to our #bigbox DIV, add the text class=”red” to its tag in HTML

Ex of what my CSS code looks like: <body>

<div id= “painting”> <div id= “toprow”> <div id= “bigbox” class= “red”></div> </div> </div> </body>

- Now make classes for other colors in this painting: .blue, .yellow, and .black.

Ex of what my CSS code looks like: .red {

Background-color: red; } .blue {

Background-color: blue; } .yellow { Background-color: yellow; } .black {

Background-color: black; } Step 6: Position elements

- Make a class called .right and use it to float the bigbox DIV to the right

Ex of what my CSS code looks like: .right {

Float: right; } Ex of what my HTML code looks like: <div id=”bigbox” class=”red right”</div>

Step 6: Dividers

- Make a new #id for the top divider and assign a color and position class to it in HTML - Make the divider 10px wide and 290px tall

Ex of what my CSS code looks like: #divider1 { Height: 290px;

Width: 10px; } Ex of what my HTML code looks like: <body>

<div id="painting">

<div id="toprow">

<div id=”bigbox” class=”red right”></div> <div id=”divider1” class=”black right”></div>

</div> </div> </div> </body>

Step 8: Columns

- Make a new #topleftcolumn tag, a .mediumbox class and a horizontal #divider2 in between. - The #topleftcolums won’t be visible

Ex of what my HTML code looks like: <body>

<div id="painting">

<div id="toprow">

<div id=”bigbox” class=”red right”></div> <div id=”divider1” class=”black right”></div> <div id= “topleftcolumn” class= “right”> <div class= “mediumbox”></div> <div id="divider2" class= "black"></div>

<div class="mediumbox"></div>

</div> </div> </div> </body>

Ex of what my CSS code looks like: .mediumbox {

Width: 100px; Height: 140px; } #divider2 { Height: 10px; Width: 100px; }

Step 9: middle row divider

- Make a .middlerow class and add it to HTML code

Ex of what my CSS code looks like: .middlerow {

Width: 100px; Height: 140px; } Ex of what my HTML code looks like: <body>

<div id="painting">

<div id="toprow">

<div id=”bigbox” class=”red right”></div> <div id=”divider1” class=”black right”></div> <div id= “topleftcolumn” class= “right”> <div class= “mediumbox”></div> <div id="divider2" class= "black"></div>

<div class="mediumbox"></div>

</div> </div> <div id= “middlerow”></div> </div> </body>

- Now fill out the bottom row - Repeat the process the same way as the top row you completed with different size and colors if

you wish.

1. Create an element that is a quarter the height of the window and the full width.
2. Set the background color of this element to a gradient, going from a sky blue, to a lighter teal blue, to a pale pink, to a warm pink-rose.
3. Create another element below this first element and make it three quarters the height of the window and full width. The two elements should then fill up the whole space.
4. Set the background of this second element a gradient from a teal blue, to a pale blue, to a deep blue.
5. In this second element, make a grid that is ten columns by ten rows. The column widths should be variable but use the available space. The rows should also be variable, but start small and get bigger by the last row.
6. Create a hundred elements within this grid in order to style each cell.
7. Set each of the hundred cells background color to white and add a small margin to give them space.
8. Select all the even cells and round their edges slightly so that they look like rounded squares
9. Select all the odd cells and do the same, but with a different settings so there is some variability
10. Select a handful of the first elements of each row and add margin so that the rows don't all start in the same place
11. Execute the last step for a handful of the last element of each row, for the same effect.