Assignments

Integrate Pacman and Javascript Game into your HTML page

Dec. 03, 2019 Max Points: 10
Description:

For this assignment I want you to add the Pacman CSS code an the Javascript game code from the earlier assignments into the tutorial web page that you created earlier. This project is all about integrating. You're not really doing anything new. On your tutorial page you should now add a section that says something like: "You can also use CSS to do animations. Even complicated animations like an animated PacMan." And then another section that says: "And if you learn Javascript, you can add a javascript game to your webpage. Take a moment to play the following game:"

First Look at Games written in JavaScript

Nov. 22, 2019 Max Points: 10
Description:

Look through the code on this page: https://www.w3schools.com/graphics/game_intro.asp

For each line of code, try to figure out what it does by experimenting by changing values. Changing the numbers will usually give you a clue.

Write an English language description of what each line is doing. Use your best guess. You should be able to figure out generally how the code effects the game. Explain to the best of your ability. Note that you have not learned JavaScript yet, so I do not expect you to fully understand this. The point of this exercise is to try to understand it. I think you will find that you understand more than you might think that you do.

Turn PacMan into a dinosaur head

Nov. 19, 2019 Max Points: 10
Description:

Starting with the Pacman CSS, change the shape of PacMan so that he becomes an dinosaur. The eye should be moved back and the hinge on the lengthened jaw should be below the center point. In other words the top of the mouth should be bigger than the bottom.

Create PacMan using CSS

Nov. 13, 2019 Max Points: 10
Description:

Just follow this tutorial: https://css-tricks.com/pac-man-in-css/

Please don't just copy/paste. Type out the css and html yourself so that you can get practice typing in the code.

plnkr.io has been buggy recently. Let's use https://codesandbox.io instead for this project.

Million Questions

No Due Date Max Points: 100
Description:

You need to ask 5 questions per class period (you're free on weekends and holidays).

Priority 1: Questions about your current project
Priority 2: Questions about things that we have talked about in class
Priority 3: Questions about anything technology related (something that I might be able to answer)
Priority 4: Questions about science
Priority 5: Big life questions (what is life?)

Play with Responsive Design

Nov. 05, 2019 Max Points: 10
Description:

@media only screen and (max-width: 1023px) {
h2 {
font-size: 40px;
line-height: 45px;
}
}

The css code above will only apply to screen resolutions that are up to 1023px wide. Use a series of css commands to make your plnkr website look different depending on the screen resolution. At this point it doesn't have to look good or even scale appropriately. I just want you to prove to yourself that the web page can look different depending on the screen resolution. Maybe just make the background color turn to different colors depending on the resolution.

For this assignment you must have the web page respond to at least 4 different screen resolutions.

Using "Inspect Element", choose a popular website and make it spooky

Oct. 31, 2019 Max Points: 10
Description:

Yesterday you edited the HTML content using "Inspect Element". Today, you are going to change the .css to transform the look and feel of the web page.

Experiment with Chrome "Inspect Element"

Oct. 30, 2019 Max Points: 10
Description:

Choose a website and edit the content of the website by using "Inspect Element". In class I changed a CNN News story to read "McCurdy Wakes up on the Right Side of Bed" and changed the photo in the story to be a photo of me. Do something similar. It doesn't have to be CNN. You won't be able to turn this in because the changes will only be on your computer so you will have to show me what you did at the end of class (or some other time if you are out today). To learn more about "Inspect Element" you can read a tutorial here: https://zapier.com/blog/inspect-element-tutorial/ (By the way, the way I found that tutorial was by typing "Inspect Element Tutorial" in Google and choosing the very first link. Amazing, huh?)

More advanced animation

Oct. 27, 2019 Max Points: 10
Description:

Read through the following tutorial: https://marksheet.io/css-animations.html

Try to recreate the animation examples shown in plnkr. In other words, don't just read, do.

I'll be in to help you on Tuesday, but try to do this on your own. Make sure that you at least have questions. You can only have questions if you try and fail, so do that (the failing part is optional this time, though)

You get extra credit for turning in something by the end of class today. Work together if you like.

Blow me away!

Oct. 18, 2019 Max Points: 10
Description:

Do something cool with animation. Use the "hello friend" animation as your starting point.

Explore your favorite web page

No Due Date Max Points: 10
Description:

Find a website (anything is fine).
Look at the source code (ctrl+u)
Try inspecting the page (ctrl+shift+i on Chrome. Talk to me if you're using Safari)

Find one tag that you don't undertand and use google to try to figure out what it is. Hint: what did you search for on that last assignment. html table

Turn in a 2 or 3 sentence description of that tag. Don't copy past please. In your own words.

Create a CSS Tutorial

Oct. 09, 2019 Max Points: 100
Description:

Create a Web Page that shows how to use CSS to style a web page.

Note that this is a 100 point assignment. The others have only been 10 point assignments. Take this one seriously!

For this assignment you are now an expert CSS user that will explain to others how to make a web page look amazing. This means that your web page needs to look amazing, right? Otherwise, why would anyone ready past the first sentence. They would think, "this looks horrible. I'm not going to trust this person."

These are the things that you need to include in your explanation:

1. How do you change fonts and how should someone go about choosing a font. Explain Serif vs San-Serif.

2. How do you add more white space. Show examples of too much white space and too little white space. The amount of white space that you use in your description should be "perfect". You get to define what "perfect" means based on your own aesthetic preference.

You will want to have your samples nicely contained. Maybe in a shaded box (hint: background-color), maybe side-by-side, if appropriate so that the layout looks pleasing.

Grading: 50 pts for content (e.g. how good is your description) and 50 pts for style (e.g. how good does it look)

Experiment with CSS

Sept. 16, 2019 Max Points: 10
Description:

Start with the attached plunk and make the resulting page look completely different without touching the HTML at all. You will only be editing the stylesheet.

Add Photos to your website

Sept. 15, 2019 Max Points: 10
Description:

Starting with your former plunker that had tables, add photos to that site. Add at least 3 different photos: 1 that you make really narrow, one that you make really wide, and one that is sized appropriately to look good in the rest of your page.

Turn your photo into a link so that when you click on it you get taken to another webpage.

Finally, embed a youtube video on your site.

Hint: search for "HTML photo" on google.

Working with tables

Sept. 06, 2019 Max Points: 10
Description:

Sorry that I won't be there in class tomorrow (Fri). I would like you to search for "html table" on Google and read through the beginning part of any of the first few links.

Then create a plunk (using plnkr) that contains a table that has the name, birthday and favorite website (with a link) of 5 people in our class.

Turn in the plunk at the end of class even if you are not finished and even if your html doesn't work. The mistakes (or not!) that you make will help me know where you are in your understanding. You'll have an opportunity to re-turn it in later after you get help.

Enjoy!

First Website

Sept. 04, 2019 Max Points: 10
Description:

Starting with the attached plunk, make a website that has:
* An About Me section that has two or 3 sentences separated into paragraphs that describes you.
* A section that has links to 5 of your favorite websites.

Saving in Plnkr is a little weird. You will be forking a new version (you'll see the fork button at the top of the page). Make sure that the fork is also public. As long as you are still in the same session, you'll have a "Save" button that you can use. If you ever open the plunk in a new window, though, you will have to fork it again. Every time you fork it, the URL (website address) will change.

To turn in your assignment, you will be submitting the URL of your plunk. If you make changes after you turn it in, you will need to fork a new version so that the original (turned in) version does not change.

Complicated, I know, but you'll get the hang of it.

Announcements

Oct. 18, 2019

Another animation example that has multiple animations on the same object:

http://plnkr.co/edit/le4zycfDKfKjed9OIVZl?p=preview

Oct. 16, 2019

Another animation example: http://plnkr.co/edit/AxKstxDK0MBzxka5N7D3?p=preview

Oct. 15, 2019

Animation example:
http://plnkr.co/edit/0A2h0so2hh4jFz63NfBD?p=preview

Sept. 27, 2019

Playing with fonts: http://next.plnkr.co/edit/v0P0VvNKLPF4nd4j?open=lib%2Fscript.js

Sept. 26, 2019

https://graphicdesign.stackexchange.com/questions/71470/how-to-use-san-francisco-font-on-windows

Sept. 19, 2019

Here is the example that we did in class of using css to change the way that <div> and <span> works.

Sept. 03, 2019

http://plnkr.co