Webmaker/Sooke/Schools/Journey

From MozillaWiki
Jump to: navigation, search

Welcome the 'Build the Web' Exploratory Wiki for Journey Middle School!

Sharing Pad

=== Basic Rules ===a

  • Same as school for food & drink
  • Raise your hand to ask a question
  • You can work alone or in partners (completely up to you)
  • Help each other
  • Do not post photos of yourself or others on the web, share personal information like phone numbers, home addresses. (clarify school's policy)
  • Please don't wander off - no Facebook/Youtube, or other unrelated web activities while we work.
  • Work at your own pace!

Week 1

  • What is the Internet?
  • What is the Web?
  • What is the Open Web?
  • Web Browsers
  • Introduction & Webmaker Overview
  • What Web Pages are Made Of ?

Week 2

Terminology

URL URL stands for Universal Resource Locator. It is the address of a web page. Each page has its own unique web address (URL). This is how your computer locates the web page that you are trying to find.

HTTP The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.

HTML HTML or HyperText Markup Language is the standard markup language used to create Web pages. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html> ).

Tags Tags are codes in an HTML document which the browser reads and then interprets for subsequent display to a reader. Tags are not visible when an HTML document is viewed in a browser, but their effects are. Tags begin with the opening symbol "<" and end with the closing symbol ">"; and usually come in pairs, one that begins an action and one that ends it. 

hi <b>there</b> everyone

hi there everyone.

Tags are codes in an HTML document which the browser reads and then interprets for subsequent display to a reader. Tags are not visible when an HTML document is viewed in a browser, but their effects are. Tags begin with the opening symbol "<" and end with the closing symbol ">"; and usually come in pairs, one that begins an action and one that ends it.

Document Link (for tutorial #1 and #2)

  1. Complete tutorial #1 - "your first web page".
  2. Follow the tutorial #2 - "My Evil Twin"
  3. If you find you have extra time, please navigate to: http://www.codecademy.com/courses/hour-of-code/0/1 and follow this tutorial on JavaScript.

Week 3

Your choice (finish the web pages you were working on - tutorial #2) or move onto online challenges:

Week 4

Week 5

  • Go to this template (which was what we made last week)
  • Hit 'Remix'
  • Login (Login with Persona) and use the same user and password as last week
  • Look through the code.
  • See how, from last week we copied the same
    containers a few times over to duplicate our flipping card?
  • Notice that the first div container has an extra attributed added  : card1

AND that there is a new style added

#card1, #card4{ background-image: url(http://content9.flixster.com/question/33/54/66/3354663_std.gif); }

This is how we tell the webpage we want to card1 and card4 the same background.

1. With a goal of having two cards matching, please add styles for cards2 - cards12

Take your time, have fun. You can also add a few more cards if you want, but recommend max of 20

2. Change 'flipper speed' so people can see the picture for a longer period of time. Hint you'll find this in the .flipper portion of style. If you think your game would be more fun at a fast speed that's OK too :) 3. Add a border to your front card and your back card, using the .back and .front styles border-color:black; border-style: solid;

There are a number of border styles: dotted, solid, double, dashed to choose from

4. Finally, If you would like to, add a 'Card Game Title' to the backs of your cards. You might think this means you have to write it over and over again, but no. All you do is add this style: 

.front:after {
        content: "Cat Memory Game";
        font-family:verdana;
        color:white;
        font-size:15px;
 }

By using 'after' we're telling the CSS to put this text after everything else already in that container. There is also .before for the opposite.

If you get stuck, or want to see the finished project for this week - you can look at the code for next week's template :)

Week 6

Week 7

File:Http://tiptoes.ca/wp-content/uploads/2015/02/2015-02-26 1306.png
  • Press Play to see the timeline move with your video.
  • Click on the Events Tab and add text to your timeline.
  • Add a Popup.
  • In Wikipedia find an article about the music, artist or topic of your video. Copy the URL (control C)
  • In Popcorn maker add a Wikimedia Event to your timeline, and insert the URL of your Wikipedia article.
  • Play with adding images an anything else you'd like!
  • Login to save and share
  • Check back for the final version of our Card Game

Resources

Referenced

Retrieved from "https://wiki.mozilla.org/index.php?title=Webmaker/Sooke/Schools/Journey&oldid=1058617"